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、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
<body><nav>
<div>
<a href="#">点</a>
<a href="#">滴</a>
<a href="#">一</a>
<a href="#">生</a>
</div>
</nav>
<body>
<style>
body {
margin: 0/*一定的初始化是必要的*/
}
nav {
position: fixed/*因为是一个全页面的竖排导航，所以必须设置为固定定位*/
/*同时因为固定定位是把标签从文档中直接拿出来，所以布局其他元素时要用margin留出外边距，
必要时可以设置导航栏为固定宽度保证不会出现白边*/
background-color: #2f2f2f
height: 100%/*让导航栏与页面同高*/
top: 0left: 0/*设置了固定定位后这两个属性才起作用*/
}
nav a { /*设置每个a标记的display属性为block，这样方便控制每个a标记的样式*/
font-weight: bold
font-size: 18px
color: #ffffff
display: block
padding: 15px
text-decoration: none
}
nav div a:first-child { /*通过伪类来控制活动页面的a标记的样式，作为静态页面每个页面都要写不同的css控制样式，
所以使用不方便的话可以使用class来控制样式*/
box-shadow: -1px 0.5px 4px 1px #777 inset
background-color: #e58c7c
}
nav div a:hover {
background-color: #e58c7c
}
nav div a:active {
box-shadow: -1px 0.5px 4px 1px #777 inset
background-color: #e58c7c
}
</style>
div是不能定义垂直对齐,也就是V-ALIGN的!所以,
1:要看你DIV里面是什么内容,解决方法可以是使用FLOAT,浮动,把里面的元素浮动,然后定义MARGIN-TOP之类的
2:还可以在DIV里面放个TABLE,再在TABLE里面放内容,因为TABLE是支持垂直对齐V-ALIGN的
