在自學(xué)網(wǎng)頁(yè)設計路上：[2]如何制作簡(jiǎn)單導航欄

在自學(xué)網(wǎng)頁(yè)設計路上：[2]如何制作簡(jiǎn)單導航欄

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

工具/原料

DW

調試瀏覽器

方法/步驟

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

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

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

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

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è)面內容。

推薦使用firebug等調試工具

在自學(xué)網(wǎng)頁(yè)設計路上 (共3篇) 上一篇：如何使網(wǎng)頁(yè)自動(dòng)居... | 下一篇：如何布局網(wǎng)頁(yè)主體

[在自學(xué)網(wǎng)頁(yè)設計路上：[2]如何制作簡(jiǎn)單導航欄]相關(guān)文章：

1.大學(xué)生網(wǎng)頁(yè)制作實(shí)訓報告心得

【在自學(xué)網(wǎng)頁(yè)設計路上：[2]如何制作簡(jiǎn)單導航欄】相關(guān)文章：

網(wǎng)頁(yè)設計制作教程《實(shí)例》207-14

網(wǎng)頁(yè)制作教學(xué)設計07-28

網(wǎng)頁(yè)設計與制作報告01-04

制作網(wǎng)頁(yè)教學(xué)設計04-20

網(wǎng)頁(yè)設計與制作心得12-12

網(wǎng)頁(yè)制作教學(xué)設計10-01

網(wǎng)頁(yè)制作教學(xué)設計02-25

為什么APP導航欄的放置？07-10

【熱】網(wǎng)頁(yè)設計與制作心得01-15