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、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
vertical-align: middle是说这个属性么
这个属性严格意义上说并不是垂直居中
它只是让行内元素（文字和图片等）以自身为参照中对齐（top是顶对齐）
但这个参照不是绝对的，他受行高等因素影响(及浏览器的兼容)所以设置了对齐以后往往达不到自己想要的结果。
浏览器的垂直居中是个挺麻烦的事，简单的文字图片的对齐 可以用vertical-align，但稍微复杂点的就不好使啦
通常会用js计算高度在设置其他属性让目标元素居中
目前为止只有table的垂直居中属性 是真正意义上 且不需要js的垂直居中
不需要CSS3+HTML5，用AJAX+DIV+CSS就可以了。利用AJAX取得未读数据的数量，把DIV的innerHTML设为该数量就行了，另外这是一个DIV(或则其他块元素)中嵌入的一个相对定位层。所以没必要去使用CSS3和HTML5,毕竟国内主要浏览器都不支持。现在支持CSS3和HTML5的浏览器就只有最新的浏览器(如IE9、opera、safari、FF等等)
