8项目通关前端/美团网布局项目11：完成友情链接

@效果预览

@布局思路

• 使用弹性盒横排div*5，比例flex全部设置为1；
• 每个div内部直排若干个dl + dt + dd；
• 合理设置margin、padding等间距；

@HTML部分

<!-- 友情链接 608px -->
<!-- 横排弹性盒 -->
<div class="zhai lianjie">

    <!-- 所有列1:1分配水平空间 -->
    <!-- 列1 -->
    <div class="column col1">

        <!-- 使用dl+dt+dd承载一个分类导航 -->
        <dl>
            <!-- 导航标题 -->
            <dt>用户帮助</dt>

            <!-- 链接列表 -->
            <dd><a rel="nofollow" href="http://www.meituan.com/help/selfservice" target="_blank">申请退款</a></dd>
            <dd><a rel="nofollow" href="http://www.meituan.com/help/faq" target="_blank">常见问题</a></dd>
            <dd><a rel="nofollow" href="https://rules-center.meituan.com/rules-detail/4" target="_blank">用户协议</a>
            </dd>
            <dd><a rel="nofollow" href="https://rules-center.meituan.com/rules-detail/2" target="_blank">隐私政策</a>
            </dd>
            <dd><a rel="nofollow" href="http://www.meituan.com/about/anticheat" target="_blank">反诈骗公告</a></dd>
            <dd><a rel="nofollow" href="https://rules-center.meituan.com/customer-rights"
                    target="_blank">消费者权益保障</a></dd>
        </dl>

        <dl>
            <dt>美团服务</dt>
            <dd><a href="http://waimai.meituan.com/" target="_blank">美团外卖</a></dd>
            <dd><a href="http://hotel.meituan.com/" target="_blank">美团酒店</a></dd>
            <dd><a href="http://maoyan.com/" target="_blank">猫眼电影</a></dd>
            <dd><a href="https://peisong.meituan.com/" target="_blank">美团配送</a></dd>
            <dd><a href="https://www.mtyun.com/" target="_blank">美团云</a></dd>
            <dd><a href="http://www.dianping.com/" target="_blank">大众点评</a></dd>
            <dd><a href="https://minsu.meituan.com/" target="_blank">美团民宿</a></dd>
            <dd><a href="https://mad.meituan.com" target="_blank">无人配送</a></dd>
            <dd><a href="https://em.meituan.com/?channeltype=01,01,01" target="_blank">企业用餐、企业用车、企业差旅</a></dd>
            <dd><a href="https://developer.meituan.com/" target="_blank">开放平台</a></dd>
        </dl>
    </div>

    <!-- 列2~5雷同 -->
    ...
</div>

@SCSS部分

/* 友情链接 */
>.lianjie {

    /* box */
    // background-color: #fff;
    margin: 38px auto;
    border-top: 1px solid #e5e5e5;
    padding: 40px 45px;
    box-sizing: border-box;

    /* flex */
    display: flex;
    flex-direction: row;

    /* 横排5个列 */
    >.column {
        /* 每列宽度相同 */
        flex: 1;

        /* 分类导航 */
        >dl {
            padding-bottom: 20px;

            /* 分类标题 */
            >dt {
                height: 28px;
                line-height: 28px;

                /* 个别标题本身包含可以跳转的链接 */
                >a {
                    font-size: 14px;
                    color: #666;
                }
            }

            /* 单个超链接容器单元格 */
            >dd {
                /* text */
                // height: 24px;
                line-height: 24px;
                font-size: 12px;
                color: #666;
            }

            /* 设置超链接样式 */
            a {
                font-size: 12px;
                color: #666;
            }

            a:hover {
                color: orange;
            }
        }
    }
}

@知识链接

极简页面布局知识手册

@获取源码

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