小米官网静态网页项目实战6

最底下图标字体与广告栏

部分结构代码：

    <!-- 创建广告容器 -->
    <div class="ad w">
        <ul class="shortcut">
            <li>
                <a href="#">
                    <i class="fas fa-clock"></i>
                    小米秒杀
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-building"></i>
                    企业团购
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-frog"></i>
                    F码通道
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-robot"></i>
                    米粉卡
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-keyboard"></i>
                    以旧换新
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-sim-card"></i>
                    话费充值
                </a>
            </li>
        </ul>

        <ul class="imgs">
            <li>
                <a href="#"><img src="./img/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./img/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./img/3.jpg" alt=""></a>
            </li>
        </ul>
    </div>

</body>
</html>

CSS样式代码：

    /* 设置下部的广告区域 */
    .ad{
        height: 170px;
        margin-top: 14px;
    }

    .ad .shortcut,
    .ad .imgs,
    .ad li{
        float: left;
    }

    /* 设置左侧快捷方式 */
    .ad .shortcut{
        width: 228px;
        height: 168px;
        background-color: #5f5750;
        margin-right: 14px;
        padding-top: 2px;
        padding-left: 6px;
    }
    .ad .shortcut li{
        position: relative;
    }

    /* 设置上边框 */
    .ad .shortcut li::before{
        content: '';
        position: absolute;
        width: 64px;
        height: 1px;
        background-color: #665e57;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto
    }

    /* 设置左边框 */
    .ad .shortcut li::after{
        content: '';
        position: absolute;
        height: 70px;
        width: 1px;
        background-color: #665e57;
        top: 0;
        bottom: 0;
        margin: auto 0;
        left: 0;

    }

    /* 设置快捷方式中的超链接 */
    .ad .shortcut a{
        display: block;
        color: #cfccca;
        height: 84px;
        width: 76px;
        text-align: center;
        font-size: 12px;
        overflow: hidden;
    }

    .ad .shortcut a:hover{
        color: #fff;
    }

    /* 设置图标字体 */
    .ad .shortcut i{
        display: block;
        margin-top: 20px;
        margin-bottom: 6px;
        font-size: 20px;
    }


    /* 设置左侧的图片 */
    .ad .imgs li{
        width: 316px;
        margin-right:15px; 
    }

    .ad .imgs li:last-child{
        margin: 0;
    }

    .ad .imgs img{
        width: 100%;
        vertical-align: top;
    }

素材图片：



效果图：

注意：图标字体的正确引用与定位的使用，如需全部完整代码请参考上一篇文章。