学习前端有一段时间了，发觉想要学好前端要学的东西实在是太多太多，防止学过的太久不用会忘记，在这里回顾、记录和总结自己的疑点，查漏补缺！

就任何浏览器而言，导航栏都非常重要，熟练使用CSS可以转换好看的导航栏而不再是枯燥的HTML菜单！

导航栏的本质：

导航栏本质上是一个链接列表：导航栏=链接列表

由于导航栏本质是链接列表，首先介绍一下链接和列表。

链接---作为内联元素，有四种状态：a:link --未访问过的链接

　　　　　　　　　　　　　　　    a:visited  --用户已访问过的链接

　　　　　　　　　　　　　　　    a:hover   --用户鼠标放在链接上时

　　　　　　　　　　　　　　　    a:active   --链接被点击时

当设置链接状态样式时，须遵循的顺序：

a:hover必须在a:link和a:visited后面

a:active必须在a:hover后面

列表---分为无序列表、有序列表和自定义列表

无序列表

浏览器效果图

 有序列表

浏览器效果图

自定义列表

浏览器效果

总结：ul li,ol li和dl dt dd都是组合标签，不能分开单独使用。并且li的直属父级必须是ul或者ol，dt和dd是同级标签他们的直属父级是dl。另外，dl dt dd组合标签又称为表格，标题型标签+列表型标签 与table有相同的用法，可以做表格。大家可以试着写一下，改天补个例子！ 言归正传，终于到导航栏了。

正因为导航栏本质是链接列表，实际上用CSS主要来设置列表和链接。给出标准导航栏实例，从简单的垂直导航栏到需要少量定位的导航栏来介绍。

1.垂直导航栏

使用CSS设置链接列表：

list-style-type:none;导航栏不需要列表标记，清除标记。

去掉浏览器默认的边距和填充。  

浏览器效果图：

2.水平导航栏

建立水平导航栏有两种方式：内联和浮动

内联方式

浏览器效果图：

内联方式建立水平导航栏，可以看出它的缺陷，链接大小不相同，要做到链接大小相同则需要用浮动。

浮动方式

浏览器效果图：

3.水平导航栏扩展

浏览器效果图

CSS导航栏