前端技巧集：导航栏全解析

导航栏是网页中非常普遍的一个组件，今天一步步教大家如何做个导航栏。一般导航栏是使用无序列表实现的(ul+li)，看看下面的无序列表是不是非常像导航栏呢？

 <ul>
        <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>

先给ul加上border,便于查看元素的大小情况。

border: 1px solid gray;

一、两步把无序列表变垂直导航栏

清除ul样式

  list-style: none;
  padding-left:0;

把ul的display改为inline-block

display : inline-block;

看看，是不是垂直导航栏基本样式已经出来了。

二、美化垂直导航栏

大体的样子出来了，但是看上去比较紧凑。我们一起美化一下吧。

把ul的内边距调整一下

  padding:10px;

给li的内边距调整一下

  padding:10px;

把ul的边框加上圆角
看上去导航栏比较生硬，我们加个圆角润色一下。

  border-radius: 5px;

给li加上:hover特效

li:hover {
    background-color : #f5f5f5;
    cursor:pointer;
}

给li加上:hover特效加上圆角
背景还是比较生硬，我们用同样的方式润滑一下。

  border-radius: 5px;

给li加上:hover特效加上白色字体
背景色与字体颜色比较接近，看不清。我们把字体颜色设成白色，并且加粗。

color: #fff;
font-weight: bold;

我们的垂直导航栏基本上完成了，简单吧。大家试一下。

三、代码

垂直导航栏的代码一栏，如下所示：

        ul {
            border: 1px solid gray;
            list-style: none;
            padding-left: 0;
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
        }
        
        li {
            padding: 10px;
        }
        
        li:hover {
            background-color: #999;
            cursor: pointer;
            border-radius: 5px;
            color: #fff;
            font-weight: bold;
        }