CSS在導航菜單中的應用

劉曉娟

【摘 要】導航菜單是網頁設計中的重要內容，利用CSS可以制作出效果豐富的導航菜單。文章使用ul無序列表和CSS分別制作了水平導航菜單和縱向導航菜單，給出了在導航菜單制作過程中各網頁元素的CSS樣式的設置方法，分析了各CSS樣式屬性的具體應用方法，并就其中的瀏覽器兼容性問題進了討論。

【關鍵詞】CSS；導航菜單

0 引言

CSS，層疊樣式表（英文全稱：Cascading Style Sheets）是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS是一種定義樣式結構如字體、顏色、位置等的語言，被用于描述網頁上的信息格式化和現實的方式。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，具有更好的易用性和拓展性，已被廣泛用于網頁設計。

導航菜單是網頁設計中的重要內容，它為網站的訪問者提供整個網站的概況，使其可以方便地訪問到所需的內容。通過CSS可以描述豐富的導航顯示效果。本文以導航菜單的制作為例，探討CSS在網頁制作中的應用。

1 CSS的概念與功能

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。

CSS樣式表的功能可以歸納為以下幾點[1]：

（1）提供了豐富的文檔樣式外觀，可以靈活控制頁面中文字的字體、顏色、大小、間距、行高、縮進及對其方式；

（2）可以為網頁中的任何元素設置背景顏色和背景圖片，并且可以控制背景圖片的位置；

（3）允許為任何元素創建邊框，可單獨設置上下左右各邊框的樣式；

（4）精確控制網頁中各元素的大小和位置，并可調整元素邊框與其他元素間的距離，以及元素邊框與元素內容間的距離；

（5）可以給頁中的元素設置各種過濾器，從而產生諸如圓角、陰影、模糊、透明等效果，而這些效果以往只能在圖像處理軟件中才能實現；

（6）可以與腳本語言相結合，使網頁中的元素產生各種動態效果，改善了flash動畫中圖片不能動態更新的缺點。

2 CSS在橫向導航菜單中的應用

橫向導航菜單一般出現在網頁頂部，提供網站在整體結構。以圖1所示導航菜單為例，橫向導航菜單制作過程如下。

2.1 編寫導航菜單的HTML代碼

2.2 設置外層div的樣式

在外層div上設置導航欄的整體樣式，需設置導航條的寬度、高度、背景顏色、居中顯示。此處CSS樣式設置如下。

.nav { height： 40px；width： 600px；background-color： #0C6；margin： 0px，auto； }

設置導航條寬度為600像素，高度為40像素，背景色為綠色，居中。

效果如圖2所示。

2.3 設置ul列表的樣式

從圖2可以看到，ul列表標簽默認的是有邊距的。不同瀏覽器對列表ul所具有的內外邊距屬性具有不同的定義，在不同的顯示器下默認的邊距是不同的。這需要設置ul的CSS屬性margin： 0px； padding： 0px；來去掉默認的邊距設置，從而保證在不同的瀏覽器中ul邊距一致。列表項前的項目符號也不需要，可設置list-style-type： none去掉項目符號。ul標簽的CSS樣式設置如下。

.nav ul { height： 40 px； width： 600 px； list-style-type： none； margin： 0px； padding： 0px； }

設置列表寬度為600像素，高度為40像素，去掉項目符號，去掉默認的邊距設置。

2.4 設置列表項li的樣式

下面來調整每一個導航菜單項目的顯示方式，這里通過li樣式的設置來實現。此處列表項的樣式主要有：寬度、高度、文字樣式、水平居中，垂直居中，橫向排列。其中，垂直居中需通過設置行高line-height： 40px來實現。原本li是縱向排列的，此時需設置浮動float： left來實現橫向排列。li標簽的CSS樣式設置如下。

.nav ul li { font-size： 14px； font-weight： bold； color： #FFF； float： left； height： 40px； width： 100px； text-align： center； line-height： 40px； }

設置列表項寬度為100像素，高度為40像素，字號14像素，加粗，白色，水平居中，垂直居中，橫向從左到右依次排列。效果如圖3所示。

2.5 設置超鏈接樣式

從圖3可以看出，雖然設置了列表項文字為白色，但此時文字卻是藍色的。這是因為列表項上加入了超鏈接，默認的鏈接文字是藍色加下劃線的。可以通過設置鏈接樣式來調整鏈接文字效果。此處調整默認鏈接和已訪問過的鏈接文字為白色，去掉下劃線。CSS樣式設置如下。

.nav ul li a：link { color： #FFF； text-decoration： none； }

.nav ul li a：visited { color： #FFF；text-decoration： none； }

2.6 設置超鏈接的鼠標經過樣式

可以設置超鏈接的鼠標經過樣式a：hover，當鼠標經過時，改變鏈接內容的背景顏色和文字顏色，更清晰的展現鏈接內容，網頁效果也會更好。此處鼠標經過樣式a：hover設置如下。

.nav ul li a：hover { color： #063；text-decoration： none； background-color： #CFC； display： block；}endprint

設置鼠標經過時區塊背景為淺綠色，鏈接文字為綠色，無下劃線，塊級顯示。注意，鼠標經過時改變背景顏色，需設置a：hover樣式的顯示屬性display為block，否則僅在文字下方有背景顏色。

完成后即可以看到圖1所示的效果。

需要注意的是，如果把.nav ul li a：hover樣式放在.nav ul li a：link之前時，鼠標經過樣式中不起作用了。這是因為在CSS規范中，超鏈接樣式的排列順序： L-V-H-A，即a：hover必須出現在a：visited之后，否則會被隱藏[2]。

圖4 縱向導航菜單效果

3 CSS在縱向導航菜單中的應用

縱向導航菜單一般出現在網頁左側，提供網頁某個具體內容的導航。以圖4所示導航菜單為例，縱向導航菜單制作過程如下。

3.1 編寫導航菜單的HTML代碼

3.2 設置外層div的樣式

在外層div上設置導航欄的整體樣式，需設置導航條的寬度、背景顏色等。此處CSS樣式設置如下。

.menu {width： 200px；background-color： #CFFACF；}

設置導航條寬度為200像素，背景色為綠色。

3.3 設置ul列表的樣式

ul標簽的CSS樣式設置如下。

.menu ul {width： 200px；margin： 0px；padding： 0px；list-style-type： none；border： 1px solid #3F9；}

設置列表寬度為200像素，去掉默認的邊距設置，去掉項目符號，四周加上1像素的實線綠色邊框。

3.4 設置列表項li的樣式

Li標簽上設置每一個導航菜單項目的顯示方式。此處列表項的樣式主要有：寬度、高度、文字樣式、水平縮進，垂直居中，項目圖標、下邊線。

其中，CSS中可以通過設置列表的前導圖片list-style-image屬性實現自定義列表項目圖片，但圖片與其后的文字對齊會有瀏覽器兼容性問題。此處通過背景定位和字符縮進的方法進行解決，即把前導圖片作為li的背景，通過背景圖片的位置來控制圖片的位置，同時設置文字縮進。

li標簽的CSS樣式設置如下。

.menu ul li {width： 200px；height： 35px；font-size： 14px；font-weight： bold；line-height： 35px； text-indent： 40px；background-image： url（ima/redarrow.gif）；background-repeat： no-repeat； background-position： 15px 13px；border-bottom：1px solid #3F9；}

設置列表項寬度為200像素，高度為35像素，字號14像素，加粗，縮進40像素，垂直居中，背景圖片不重復，水平偏移15像素，垂直偏移13像素，下邊框為1像素的綠色實線。

3.5 設置超鏈接樣式

調整鏈接文字為灰色，去掉下劃線。CSS樣式設置如下。

.menu ul li a { color： #666；text-decoration： none；}

完成后即可以看到圖4所示的效果。

4 結束語

通過水平導航菜單和縱向導航菜單的制作，分析了CSS在導航菜單中的應用，并就其中的瀏覽器兼容性問題進了討論。擁有易用的導航條對于任何網站都很重要。通過 CSS，能夠把乏味的 HTML 菜單轉換為漂亮的導航欄。

【參考文獻】

[1]張洪斌，劉萬輝.網頁設計與制作（HTML+CSS+JavaScript）[M].北京：高等教育出版社，2013：59.

[2]馬浩，文福安，孫燕蓮.標簽瀏覽器兼容性問題的探討[J].2010 Third International Conference on Education Technology and Training （ETT）：201-204.