如何制作簡(jiǎn)單導(dǎo)航欄

　　導(dǎo)語(yǔ)：一個(gè)網(wǎng)頁(yè)必不可少的元素之一，導(dǎo)航，雖然各種創(chuàng)新已經(jīng)逐漸把導(dǎo)航欄的“欄”給去掉了，以非欄架的形式制作出導(dǎo)航。所以，導(dǎo)航是一個(gè)網(wǎng)頁(yè)友好的入口，要學(xué)習(xí)網(wǎng)頁(yè)制作，制作導(dǎo)航欄是必須的。

　　導(dǎo)航欄簡(jiǎn)單制作方法

　　1、制作導(dǎo)航欄的一般思想是通過(guò)無(wú)序標(biāo)簽ul來(lái)實(shí)現(xiàn)的，由li來(lái)加入各個(gè)欄目，加入超鏈接，同時(shí)可以在其中加入ID標(biāo)簽，方便下步操作。

　　2、通過(guò)外鏈樣式表導(dǎo)入基本的CSS代碼，可以實(shí)現(xiàn)導(dǎo)航欄初步效果

　　3、通過(guò)padding內(nèi)補(bǔ)白拉開(kāi)距離。在這里也可以使用margin做出距離，但是margin有時(shí)候在計(jì)算中會(huì)出現(xiàn)疊加現(xiàn)象。所以個(gè)人習(xí)慣使用padding

　　4、然后使用偽類實(shí)現(xiàn)兩個(gè)效果：a、去掉超鏈接下劃線;b、鼠標(biāo)經(jīng)過(guò)變換顏色。應(yīng)注意顏色的取值應(yīng)該接近但有明暗區(qū)別。

　　CSS代碼匯總(方便復(fù)制嘗試)

　　#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;}

　　注意事項(xiàng)

　　以上代碼屬于基本的導(dǎo)航欄代碼，應(yīng)該加上一些調(diào)整以適應(yīng)頁(yè)面內(nèi)容。

　　推薦使用firebug等調(diào)試工具

【如何制作簡(jiǎn)單導(dǎo)航欄】相關(guān)文章：

css就能實(shí)現(xiàn)簡(jiǎn)單導(dǎo)航欄實(shí)例08-15

Fireworks如何制作精美導(dǎo)航效果10-26

Word文檔如何分兩欄，三欄，多欄10-02

Fireworks制作精美導(dǎo)航技巧07-10

PHP應(yīng)用：用XSLT輕松實(shí)現(xiàn)樹(shù)形折疊導(dǎo)航欄08-05

wps如何制作簡(jiǎn)單的表格10-22

如何正確使用導(dǎo)航儀07-21

word2013怎么制作建議欄11-13

用DW MX制作導(dǎo)航下拉菜單10-29