十天学会HTML+CSS(第六天)：横向导航菜单

今天的学习目标是小米商城横向导航菜单。（文末有视频）

首先，找到对应的盒子<div class="nav-mid"></div>，在里面添加一个ul列表，结构跟昨天的一样。看下代码和效果。

        <div class="nav-mid">
            <ul class="nav-main">
                <li><a href="###">Xiaomi</a></li>
                <li><a href="###">REDMI手机</a></li>
                <li><a href="###">电视</a></li>
                <li><a href="###">笔记本</a></li>
                <li><a href="###">平板</a></li>
                <li><a href="###">家电</a></li>
                <li><a href="###">路由器</a></li>
                <li><a href="###">服务中心</a></li>
                <li><a href="###">社区</a></li>
            </ul>
        </div>

接着从外向内逐层添加样式。

1. ul列表去掉小圆点，加固定高度。

.nav-main{
    list-style: none;
    height: 100px;
}

2. 列表项全部左浮动

.nav-main li{
    float:left;
}

3. 超链接去掉下划线、加文字颜色、垂直居中、右边一定距离。看效果。

.nav-main li a{
    display: block;
    color: black;
    /* 去掉下划线 */
    text-decoration: none;
    /* 垂直居中 */
    height: 100px;
    line-height: 100px;
    /* 右边距 */
    padding-right:20px;
}

视频教程：