1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容，可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。
3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏，overflow: hidden代码的意思是超出高度和宽度的部分自动隐藏，float: left使导航栏水平显示。
6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
制作一个放导航栏的容器制作一个放导航栏的容器，容器名为nav，容器宽为1000px，高为30px，背景颜
色为灰色，相关代码如下：
#nav
{
width:1000px
height:30px
background:#CCC
margin:0 auto
margin-top:50px
}
<div id="nav"></div>
显示结果在浏览器中显示的结果为下图所示：
在容器中放入一些导航栏导航栏代码如下:
<ul>
<li>模块一</li>
<li>模块二</li>
<li>模块三</li>
<li>模块四</li>
<li>模块五</li>
<li>模块六</li>
</ul>
为导航栏添加一些属性<style type="text/css">
#nav
{
width:1000px
height:30px
background:#CCC
margin:0 auto
margin-top:50px
}
#nav ul
{
width:960px
height:35px
}
#nav ul li
{
float:left
width:100px
float:left
list-style:none
background:yellow
line-height:35px
}
</style>
导航栏在浏览器页面的显示结果如下图所示：
