學習前端有一段時間了，發覺想要學好前端要學的東西實在是太多太多，防止學過的太久不用會忘記，在這裏回顧、記錄和總結自己的疑點，查漏補缺！

就任何瀏覽器而言，導航欄都非常重要，熟練使用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導航欄