CSS導航欄
學習前端有一段時間了,發覺想要學好前端要學的東西實在是太多太多,防止學過的太久不用會忘記,在這裏回顧、記錄和總結自己的疑點,查漏補缺!
就任何瀏覽器而言,導航欄都非常重要,熟練使用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導航欄