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

今天学习网页中最重要板块——导航菜单，学习目标就是小米商城的纵向导航菜单。一共四个知识点

一、ul列表基本格式

像导航菜单这种样式都一样的，一般用ul列表实现，基本格式如下：

            <ul>
                <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>
                <li><a href="###">生活 箱包</a></li>
                <li><a href="###">智能 路由器</a></li>
                <li><a href="###">电源 配件</a></li>
            </ul>

二、导航菜单制作

开始从外到内写样式：给整个列表ul设置宽高和内边距，并去掉小圆点。

.carousel-left ul{
    width: 100%;
    height: 100%;
    padding: 20px;
    /* 去掉圆点 */
    list-style: none;
}

给每个列表项li设置高度、字体大小

.carousel-left ul li{
    height: 42px;
    line-height: 42px;
    font-size: 14px;
}

超链接a调整颜色，去掉默认下划线

.carousel-left ul li a{
    color:#fff;
    text-decoration: none;
}

看下效果：

三、伪类：：after

箭头部分我们用伪类after实现，像这样的细节部分，用伪类处理可以省去不少盒子，让html更简洁。写法如下：

.carousel-left ul li a:after{
    content:">";
}

四、绝对定位

最后，需要调整箭头的位置，用绝对定位position实现。子盒子绝对定位position: absolute;，外层盒子必须要相对定位position: relative;

.carousel-left ul li a:after{
    content:">";
    /* 绝对定位 */
    position: absolute;
    right:0;
}
.carousel-left ul li{
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    /* 相对定位 */
    position: relative;
}

五、视频教程