8项目通关前端/美团网布局项目04：banner区域拆分

@效果预览

页面布局，它还真就是个布局！整体与局部永远都是相对的！——爱因斯坦：我没说过

@布局思路

• 整个banner区域作为一个大盒子，根据设计图其尺寸为1190*447，水平居中放置；
• 上图的橙色子盒子，我们使用绝对定位丢到banner的最左侧，再给一个负值的top让它突破父盒子的上边界，把腿伸到页头的被窝里去~
• 右侧的两行方块用一个盒子兜起来，整体向右浮动；
• 内部的诸多小盒子，让他们一律左浮动，一行放不下时它们自然就这行了！
• 其它的内外边距神马的，看着调一下就是了。

这一节是不是太容易了（手动抠鼻）...

@HTML部分

因此有HTML如下：

<!-- banner区域 -->
<div class="banner">
    <!-- 定位到左侧 -->
    <div class="left-box"></div>

    <!-- 浮动到banner右侧，内部左浮动 -->
    <div class="right-box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

@CSS部分

整体布局

• banner整体水平居中，丢一个position: relative;锚记以便子元素对它做绝对定位；

/* banner区域 */
.banner {

    /* 根据效果图得到尺寸 */
    width: 1190px;

    // 高度和行高一致时 文字将垂直居中
    height: 447px;
    line-height: 447px;

    // 在父盒子中水平居中
    margin: 0 auto;

    // 背景色
    background-color: green;

    // 稍后left-box子盒子要做绝对定位
    position: relative;
}

左侧布局

• 把left-box怼到最左侧，并向上突破父盒子

/* banner区域 */
.banner {
    ...
    
    /* 使用绝对定位定到父盒子左侧 */
    .left-box {

        /* 尺寸 + 背景 */
        width: 230px;
        height: 490px;
        background-color: orange;

        /* 绝对定位 */
        position: absolute;
        left: 0; // 怼到最左侧
        top: -51px; // 怼出父盒子的脑壳
    }
    
    ...
}

右侧布局

• 右侧区域整体右浮动，内部左浮动，其余都是细节

/* banner区域 */
.banner {
    ...

    /* 整体右浮动 内部元素左浮动 */
    .right-box {

        /* 尺寸与背景 */
        width: 951px;
        height: 439px;
        background-color: skyblue;

        // 尺寸包含了内边距
        box-sizing: border-box;

        // 整体右浮动
        float: right;

        /* 内部的亲儿子div全部左浮动 */
        &>div {
            margin: 10px 5px;
            box-sizing: border-box;
            float: left;
        }

        /* 第一行来蓝色 */
        &>div:nth-child(1),
        &>div:nth-child(2),
        &>div:nth-child(3) {
            height: 241px;
            background-color: blue;
        }

        /* 第二行来紫色 */
        &>div:nth-child(4),
        &>div:nth-child(5),
        &>div:nth-child(6),
        &>div:nth-child(7) {
            height: 166px;
            background-color: purple;
            margin-bottom: 0;
            margin-top: 0;
        }

        /* 按列设置宽度 */
        &>div:nth-child(2),
        &>div:nth-child(6) {
            width: 148px;
        }

        &>div:nth-child(3),
        &>div:nth-child(7) {
            width: 229px;
        }

        &>div:nth-child(4),
        &>div:nth-child(5) {
            width: 270px;
        }

        &>div:nth-child(1) {
            width: 550px;
        }

        /* 最左列和最右列直接贴边 */
        &>div:nth-child(1),
        &>div:nth-child(4) {
            margin-left: 0;
        }

        &>div:nth-child(3),
        &>div:nth-child(7) {
            margin-right: 0;
        }
    }
    
}

@知识链接

• 浮动与清除
• 定位

源码在此