8项目通关前端/美团网布局项目12：完成页脚

@效果预览

@布局思路

• 使用两个div，分别向左和向右浮动，并在外层的容器盒子上清除浮动；
• 左侧盒子使用若干div和p的组合，自然形成多行块级元素效果；
• 右侧盒子使用直排弹性盒上下排列两行，水平交叉轴对齐方式为end；
• 最后一行使用横排弹性盒，纵向交叉轴方向上子元素居中对齐center；
• 使用精灵图管理多个小背景图，并通过background-position确定每个小盒子背景在大精灵图中的截图位置；

@HTML部分

<!-- 页脚 144px-->
<!-- zhai = 水平1190像素居中 -->
<!-- clearfix = 清除内部浮动 -->
<!-- yejiao = 当前盒子内部样式细节 -->
<div class="zhai clearfix yejiao">

    <!-- 向左则浮动的盒子 -->
    <div class="left-box">

        <div class="row1">
            <i style="font-style: normal;">
                ©2023 美团版权所有
            </i>

            <!-- 跳转id为minsu的锚记（anchor） -->
            <a href="#minsu">
                京ICP证070791号
            </a>

            <!-- 跳转页头 -->
            <a href="#">京ICP备10211739号-1</a>

        </div>

        <p>广播电视节目制作经营许可证（京）字第03889号</p>

        <p>药品医疗器械网络信息服务备案 （京）网药械信息备字（2022）第00228号</p>

        <p>医疗器械网络交易服务第三方平台备案：（京）网械平台备字[2018]第00004号</p>

        <p>平台EDI许可证</p>

    </div>

    <!-- 向右侧浮动的盒子 -->
    <!-- 直排弹性盒 直排两个行 -->
    <div class="right-box">

        <!-- 第一行 交叉轴方向上向右对齐 -->
        <div class="top">
            <img src="./imgs/jinghui.png" alt="很爽的警徽">
            <span>京公网安备 11000002002052号</span>
        </div>

        <!-- 横排弹性盒 -->
        <div class="bottom">

            <!-- 这4个元素垂直（交叉轴）居中 -->
            <img src="./imgs/zhizhao.png" alt="执照">

            <span>京公网安备 11000002002052号</span>

            <!-- 在精灵图上截取以下两个盒子的背景 -->
            <div class="col2"></div>
            <div class="col3"></div>
        </div>

    </div>

</div>

@精灵图

• 摆放多个小图标在一个大图上，以减少资源下载次数；
• 在需要使用时，通过background-position从精灵大图上进行截取；
• 因学名叫sprite故而翻译为精灵图，又名雪碧图；

@SCSS部分

公共样式

1190宽水平居中的盒子

.zhai {
    /* 宽度为1190px */
    width: 1190px;

    /* 水平居中 = 左右间距相等 */
    /* margin-left: 100px;
        margin-right: 100px;
        margin-top: 50px;
        margin-bottom: 50px; */

    /* 上下间距50 左右间距100 */
    /* margin: 50px 100px; */

    /* 上下间距50 左右间距自动 */
    margin: 38px auto;

    /* 当前盒子的背景色 */
    /* background-color: green; */
}

左右浮动

.left-box {
    float: left;
}

.right-box {
    float: right;
}

清除内部子元素的浮动

/* 在父元素内部的末尾放置一个伪元素 */
.clearfix::after {
    /* 内容为空气且不可见 */
    content: "";
    visibility: hidden;

    /* 是一个块级元素 */
    display: block;

    /* 清除左右浮动 */
    clear: both;
}

页脚样式

/* 页脚 */
.yejiao {
    /* box */
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;

    /* text */
    color: #999;
    font-size: 12px;

    a {
        color: #999;
        font-size: 12px;
    }

    /* 所有超链接鼠标覆盖变色 */
    p:hover,span:hover,a:hover {
        cursor: pointer;
        color: orange;
    }

    /* 左浮动盒子 */
    .left-box {
        >div,>p {
            margin-bottom: 5px;
        }

        >div.row1 {
            >a {
                margin-left: 10px;
            }
        }
    }

    /* 右浮动盒子 */
    >.right-box {
        /* flex */
        display: flex;
        flex-direction: column;
        // 水平方向（交叉）靠右
        align-items: end;

        /* 第一行 */
        >.top {
            margin-bottom: 5px;
        }

        /* 第二行 */
        >.bottom {
            /* 横排弹性盒 子元素纵向居中对齐 */
            display: flex;
            flex-direction: row;
            align-items: center;

            >img {
                width: 38px;
            }

            /* 最后两个盒子使用精灵图 */
            >.col2,
            >.col3 {
                background-image: url(../imgs/sprite.png);
                background-repeat: no-repeat;
                width: 111px;
                height: 39px;
                margin-left: 2px;
            }

            /* 从精灵图上截取合适位置作为盒子背景 */
            >.col2 {
                background-position: 0 -167px;
            }

            >.col3 {
                background-position: 0 -40px;
            }

        }
    }
}

@知识链接

极简页面布局知识手册

@获取源码

猛戳此处获取老师源码！ 更高处见！