8项目通关前端/美团网布局项目10：完成美团导航

@效果预览

@布局思路

• 纵向直排h3 + div*3；
• 每个div内部使用横排弹性盒，span显示分类导航名称，ul内使用li的左浮动+自动换行；
• 每个ul加下边框，最后一个ul无需下边框；

@HTML部分

<!-- 美团导航 272px -->
<div class="zhai bankuai-box daohang">
    <h3>美团导航</h3>

    <!-- 直排弹性盒 -->
    <div class="box">

        <!-- 直排三个行 -->
        <div class="row chengshi-box">
            <!-- 弹性盒横排分类名 + 列表 -->
            <div class="name">热门城市</div>

            <!-- 列表内的li向左浮动 + 自动换行 -->
            <!-- 在ul层面清除浮动带来的影响 -->
            <ul class="clearfix">
                <li>长沙</li>
                <li>杭州</li>
                <li>长春</li>
                <li>太原</li>
                <li>昆明</li>
                <li>深圳</li>
                <li>东莞</li>
                <li>武汉</li>
                <li>宁波</li>
                <li>重庆</li>
                <li>郑州</li>
                <li>广州</li>
                <li>合肥</li>
                <li>佛山</li>
                <li>沈阳</li>
                <li>大连</li>
                <li>哈尔滨</li>
                <li>天津</li>
                <li>济南</li>
                <li>青岛</li>
            </ul>
        </div>

        <div class="row fenlei-box">
            <div class="name">热门分类</div>
            <ul class="clearfix">
                <li>酒店HOT</li>
                <li>美食</li>
                <li>休闲娱乐</li>
                <li>运动健身</li>
                <li>生活服务</li>
                <li>上门服务</li>
                <li>购物</li>
                <li>时尚购</li>
                <li>本地购物</li>
                <li>结婚</li>
                <li>摄影写真</li>
                <li>宴会</li>
                <li>丽人</li>
                <li>母婴亲子</li>
                <li>学习培训</li>
                <li>家装</li>
                <li>汽车服务</li>
                <li>医疗</li>
                <li>宠物</li>
            </ul>
        </div>

        <div class="row zhoubian-box">
            <div class="name">周边热门</div>
            <ul class="clearfix">
                <li>门头沟区酒店</li>
                <li>廊坊美食</li>
                <li>廊坊休闲娱乐</li>
                <li>廊坊运动健身</li>
                <li>门头沟区生活服务</li>
                <li>门头沟区上门服务</li>
                <li>廊坊购物</li>
                <li>大厂回族自治县时尚购</li>
                <li>门头沟区本地购物</li>
                <li>大厂回族自治县结婚</li>
                <li>大厂回族自治县摄影写真</li>
                <li>门头沟区宴会</li>
                <li>大厂回族自治县丽人</li>
                <li>门头沟区母婴亲子</li>
                <li>大厂回族自治县学习培训</li>
                <li>门头沟区家装</li>
                <li>大厂回族自治县汽车服务</li>
                <li>廊坊医疗</li>
                <li>门头沟区宠物</li>
            </ul>
        </div>
    </div>
</div>

@SCSS部分

/* 美团导航 */
>.daohang {
    padding-left: 20px;

    /* 美团导航字样 */
    >h3 {
        height: 50px;

        /* text */
        line-height: 50px;
        color: #222;
        font-size: 16px;
        font-weight: 500;
    }

    /* 直排div*3 */
    >.box {
        height: 222px;
        box-sizing: border-box;

        /* 直排弹性盒 */
        display: flex;
        flex-direction: column;

        /* 定义城市、分类、周边三者间的共性 */
        >.row {
            flex: 1;

            /* flex */
            display: flex;

            /* 分类导航名称 */
            >.name {
                width: 78px;
            }

            /* 分类导航列表 */
            >ul {
                flex: 1;
                border-bottom: 1px solid #e5e5e5;
                margin-bottom: 8px;

                >li {
                    float: left;

                    /* box */
                    width: 105px;
                    height: 34px;
                    box-sizing: border-box;
                    padding-top: 3px;

                    /* text */
                    // 文字左对齐
                    text-align: left;
                    font-size: 12px;
                    color: #666;

                    /* 文本不折行 + 省略号 */
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                /* 每个Li被覆盖时手型+变色 */
                >li:hover {
                    cursor: pointer;
                    color: #f60;
                }
            }
        }

        /* 最后一个row下的ul无底边 */
        >.row:last-child>ul {
            border-bottom: none;
            margin-bottom: 0;
        }
    }
}

@知识链接

极简页面布局知识手册

@获取源码

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