如何製作簡單導航欄
來源:文萃谷 8.76K
導語:一個網頁必不可少的元素之一,導航,雖然各種創新已經逐漸把導航欄的“欄”給去掉了,以非欄架的`形式製作出導航。所以,導航是一個網頁友好的入口,要學習網頁製作,製作導航欄是必須的。
導航欄簡單製作方法
1、製作導航欄的一般思想是通過無序標籤ul來實現的,由li來加入各個欄目,加入超鏈接,同時可以在其中加入ID標籤,方便下步操作。
2、通過外鏈樣式表導入基本的CSS代碼,可以實現導航欄初步效果
3、通過padding內補白拉開距離。在這裏也可以使用margin做出距離,但是margin有時候在計算中會出現疊加現象。所以個人習慣使用padding
4、然後使用偽類實現兩個效果:a、去掉超鏈接下劃線;b、鼠標經過變換顏色。應注意顏色的取值應該接近但有明暗區別。
CSS代碼彙總(方便複製嘗試)
#container{margin:0 auto; width:800px;}
#nav ul{list-style:none;}
#nav ul li{float:left;}
#nav li a{padding:7px 10px;}
#nav li a:link,#nav li a:visited{background-color:#393; text-decoration:none;
color:#FFF;}
#nav li a:hover{background-color:#360;color:#999;}
注意事項
以上代碼屬於基本的導航欄代碼,應該加上一些調整以適應頁面內容。
推薦使用firebug等調試工具