- 相關(guān)推薦
在自學網(wǎng)頁設(shè)計路上：[2]如何制作簡單導航欄
一個網(wǎng)頁必不可少的元素之一，導航，雖然各種創(chuàng)新已經(jīng)逐漸把導航欄的“欄”給去掉了，以非欄架的形式制作出導航。所以，導航是一個網(wǎng)頁友好的入口，要學習網(wǎng)頁制作，制作導航欄是必須的。
工具/原料
DW
調(diào)試瀏覽器
方法/步驟
制作導航欄的一般思想是通過無序標簽ul來實現(xiàn)的，由li來加入各個欄目，加入超鏈接，同時可以在其中加入ID標簽，方便下步操作。
通過外鏈樣式表導入基本的CSS代碼，可以實現(xiàn)導航欄初步效果
通過padding內(nèi)補白拉開距離。在這里也可以使用margin做出距離，但是margin有時候在計算中會出現(xiàn)疊加現(xiàn)象。所以個人習慣使用padding
然后使用偽類實現(xiàn)兩個效果：a、去掉超鏈接下劃線;b、鼠標經(jīng)過變換顏色。應(yīng)注意顏色的取值應(yīng)該接近但有明暗區(qū)別。
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;}
注意事項
以上代碼屬于基本的導航欄代碼，應(yīng)該加上一些調(diào)整以適應(yīng)頁面內(nèi)容。
推薦使用firebug等調(diào)試工具
在自學網(wǎng)頁設(shè)計路上 (共3篇) 上一篇：如何使網(wǎng)頁自動居... | 下一篇：如何布局網(wǎng)頁主體
[在自學網(wǎng)頁設(shè)計路上：[2]如何制作簡單導航欄]相關(guān)文章：
【在自學網(wǎng)頁設(shè)計路上：[2]如何制作簡單導航欄】相關(guān)文章：
網(wǎng)頁制作教學設(shè)計07-28
網(wǎng)頁設(shè)計與制作報告01-04
制作網(wǎng)頁教學設(shè)計04-20
網(wǎng)頁設(shè)計與制作心得12-12
網(wǎng)頁制作教學設(shè)計10-01
網(wǎng)頁制作教學設(shè)計02-25
為什么APP導航欄的放置？07-10