导航栏是网页中非常普遍的一个组件，今天一步步教大家如何做个导航栏。一般导航栏是使用无序列表实现的(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;
}
四、垂直导航栏秒变水平导航栏
把li的display改为inline-block，垂直导航栏秒变水平导航栏。
我们把浏览器的窗口变小，水平导航栏居然换行了。
这显然不是我们需要的。如何不让水平导航栏换行呢？只要加上ul加上一个white-space属性，属性值为不换行nowrap，就可以了。
white-space:nowrap;
看是不是水平导航栏成了一行了，浏览器还加上了水平滚动条。
通常的还有一个办法是设置导航栏的高度，并且需要把overflow设置为hidden，让导航栏超出部分隐藏。在ul加上如下代码：
height: 40px;
overflow: hidden;
如有问题请留言；如有帮助请点赞。
