8项目通关前端/美团网布局项目05：完成banner右侧区域

@效果预览

@布局思路

• 给上一节中的铺排好位置的div设置图片背景呗；
• 最右侧用户信息区和二维码区，元素直排 + 宽高都居中，今天我们使用全新知识弹性盒来做！

@HTML部分

<!-- 向右侧浮动的盒子 -->
<div class="right-box">

    <!-- 轮播图 -->
    <div></div>

    <!-- 休闲生活 -->
    <div></div>

    <!-- 用户信息区 -->
    <div class="user-info-box">
        <img src="../pro/imgs/3.png" alt="">
        <span>Hi！你好</span>
        <button class="btn-login">立即登录</button>
        <button class="btn-reg">注册</button>
    </div>

    <!-- 住酒店 -->
    <div></div>

    <!-- 涨姿势 -->
    <div></div>

    <!-- 我是商家 -->
    <div></div>

    <!-- 二维码扫描区 -->
    <div class="qrcode-box">
        <img src="../pro/imgs/7.png" alt="">
        <span>美团App手机版</span>
        <div>
            <span class="red">1元起</span>
            <span>吃喝玩乐</span>
        </div>
    </div>

</div>

@样式部分

给盒子设置背景

.right-box {
    ...

    /* 轮播图区域（先拿一个背景图唬一下） */
    &>div:nth-child(1) {
        width: 550px;

        // 背景图片
        // background-image: url(../imgs/1.jpg);

        // 背景图不重复
        // background-repeat: no-repeat;

        // 起始位置：从盒子的左上角开始铺设背景图
        // background-position: 0 0;

        // 合成写法：url + 不重复 + 起始位置
        background: url(../imgs/1.jpg) no-repeat 0 0;

        // 背景图尺寸：
        // cover=刚刚好铺满容器（图片可能显示不完全） 最常用！
        // contain=刚刚好显示完整的图片（盒子可能没完全盖住）
        background-size: cover;
    }
}

如法炮制给其它盒子设置背景

/* 其余都是如法炮制 */
&>div:nth-child(2) {
    background: url(../imgs/2.jpg) no-repeat 0 0;
    background-size: cover;
}

&>div:nth-child(4) {
    background: url(../imgs/4.png) no-repeat 0 0;
    background-size: cover;
}

&>div:nth-child(5) {
    background: url(../imgs/5.jpg) no-repeat 0 0;
    background-size: cover;
}

&>div:nth-child(6) {
    background: url(../imgs/6.jpg) no-repeat 0 0;
    background-size: cover;
}

弹性盒部署直排居中

/* 用户信息区域 */
&>div.user-info-box {

    /* 背景色 + 边框 + 内边距 */
    background-color: white;
    border: 1px solid #E8E8E8;
    padding: 10px;

    // 当前盒子使用弹性盒布局
    display: flex;

    // 元素直排（row则为横排）
    flex-direction: column;

    // 纵向（主轴方向）元素排列：所有元素上下间距相等
    justify-content: space-around;

    // 横向（交叉方向）元素排列：水平居中
    align-items: center;

    img {
        width: 50px;

        // 球形图片
        border-radius: 50%;

        // 粗边框
        border: 4px solid #E4E4E4;
    }

    span {
        font-size: 15px;
    }

    button {
        width: 118px;
        height: 39px;

        // 圆角按钮
        border-radius: 20px;
        border: 1px solid #F2F2F2;
    }

    .btn-login {
        background-color: #FFCB00;
    }

    .btn-reg {
        background-color: white;
    }
}

如法炮制二维码区域

/* 二维码区域 */
div.qrcode-box {

    // 当前盒子使用弹性盒布局
    display: flex;

    // 主轴使用纵向
    flex-direction: column;

    // 元素的纵向（主轴）排列：垂直居中
    justify-content: center;

    // 元素的横向（交叉）排列：水平居中
    align-items: center;

    /* 边框和背景 */
    background-color: white;
    border: 1px solid #E8E8E8;

    img {
        width: 80px;
    }

    &>span {
        font-size: 16px;
        margin-top: 15px;
        margin-bottom: 5px;
    }

    &>div>span {
        font-size: 11px;
    }
}

---

@知识链接

• 弹性盒布局
• 使用背景

猛戳此处获取老师源码！