如何制作簡單導航欄

導語：一個網頁必不可少的元素之一，導航，雖然各種創新已經逐漸把導航欄的“欄”給去掉了，以非欄架的形式制作出導航。所以，導航是一個網頁友好的入口，要學習網頁制作，制作導航欄是必須的。

導航欄簡單制作方法

(資料圖)

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等調試工具