CSS在導(dǎo)航菜單中的應(yīng)用

劉曉娟

【摘 要】導(dǎo)航菜單是網(wǎng)頁(yè)設(shè)計(jì)中的重要內(nèi)容，利用CSS可以制作出效果豐富的導(dǎo)航菜單。文章使用ul無(wú)序列表和CSS分別制作了水平導(dǎo)航菜單和縱向?qū)Ш讲藛危o出了在導(dǎo)航菜單制作過(guò)程中各網(wǎng)頁(yè)元素的CSS樣式的設(shè)置方法，分析了各CSS樣式屬性的具體應(yīng)用方法，并就其中的瀏覽器兼容性問(wèn)題進(jìn)了討論。

【關(guān)鍵詞】CSS；導(dǎo)航菜單

0 引言

CSS，層疊樣式表（英文全稱：Cascading Style Sheets）是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，被用于描述網(wǎng)頁(yè)上的信息格式化和現(xiàn)實(shí)的方式。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化，具有更好的易用性和拓展性，已被廣泛用于網(wǎng)頁(yè)設(shè)計(jì)。

導(dǎo)航菜單是網(wǎng)頁(yè)設(shè)計(jì)中的重要內(nèi)容，它為網(wǎng)站的訪問(wèn)者提供整個(gè)網(wǎng)站的概況，使其可以方便地訪問(wèn)到所需的內(nèi)容。通過(guò)CSS可以描述豐富的導(dǎo)航顯示效果。本文以導(dǎo)航菜單的制作為例，探討CSS在網(wǎng)頁(yè)制作中的應(yīng)用。

1 CSS的概念與功能

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

CSS樣式表的功能可以歸納為以下幾點(diǎn)[1]：

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

（2）可以為網(wǎng)頁(yè)中的任何元素設(shè)置背景顏色和背景圖片，并且可以控制背景圖片的位置；

（3）允許為任何元素創(chuàng)建邊框，可單獨(dú)設(shè)置上下左右各邊框的樣式；

（4）精確控制網(wǎng)頁(yè)中各元素的大小和位置，并可調(diào)整元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；

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

（6）可以與腳本語(yǔ)言相結(jié)合，使網(wǎng)頁(yè)中的元素產(chǎn)生各種動(dòng)態(tài)效果，改善了flash動(dòng)畫中圖片不能動(dòng)態(tài)更新的缺點(diǎn)。

2 CSS在橫向?qū)Ш讲藛沃械膽?yīng)用

橫向?qū)Ш讲藛我话愠霈F(xiàn)在網(wǎng)頁(yè)頂部，提供網(wǎng)站在整體結(jié)構(gòu)。以圖1所示導(dǎo)航菜單為例，橫向?qū)Ш讲藛沃谱鬟^(guò)程如下。

2.1 編寫導(dǎo)航菜單的HTML代碼

2.2 設(shè)置外層div的樣式

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

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

設(shè)置導(dǎo)航條寬度為600像素，高度為40像素，背景色為綠色，居中。

效果如圖2所示。

2.3 設(shè)置ul列表的樣式

從圖2可以看到，ul列表標(biāo)簽?zāi)J(rèn)的是有邊距的。不同瀏覽器對(duì)列表ul所具有的內(nèi)外邊距屬性具有不同的定義，在不同的顯示器下默認(rèn)的邊距是不同的。這需要設(shè)置ul的CSS屬性margin： 0px； padding： 0px；來(lái)去掉默認(rèn)的邊距設(shè)置，從而保證在不同的瀏覽器中ul邊距一致。列表項(xiàng)前的項(xiàng)目符號(hào)也不需要，可設(shè)置list-style-type： none去掉項(xiàng)目符號(hào)。ul標(biāo)簽的CSS樣式設(shè)置如下。

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

設(shè)置列表寬度為600像素，高度為40像素，去掉項(xiàng)目符號(hào)，去掉默認(rèn)的邊距設(shè)置。

2.4 設(shè)置列表項(xiàng)li的樣式

下面來(lái)調(diào)整每一個(gè)導(dǎo)航菜單項(xiàng)目的顯示方式，這里通過(guò)li樣式的設(shè)置來(lái)實(shí)現(xiàn)。此處列表項(xiàng)的樣式主要有：寬度、高度、文字樣式、水平居中，垂直居中，橫向排列。其中，垂直居中需通過(guò)設(shè)置行高line-height： 40px來(lái)實(shí)現(xiàn)。原本li是縱向排列的，此時(shí)需設(shè)置浮動(dòng)float： left來(lái)實(shí)現(xiàn)橫向排列。li標(biāo)簽的CSS樣式設(shè)置如下。

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

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

2.5 設(shè)置超鏈接樣式

從圖3可以看出，雖然設(shè)置了列表項(xiàng)文字為白色，但此時(shí)文字卻是藍(lán)色的。這是因?yàn)榱斜眄?xiàng)上加入了超鏈接，默認(rèn)的鏈接文字是藍(lán)色加下劃線的?？梢酝ㄟ^(guò)設(shè)置鏈接樣式來(lái)調(diào)整鏈接文字效果。此處調(diào)整默認(rèn)鏈接和已訪問(wèn)過(guò)的鏈接文字為白色，去掉下劃線。CSS樣式設(shè)置如下。

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

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

2.6 設(shè)置超鏈接的鼠標(biāo)經(jīng)過(guò)樣式

可以設(shè)置超鏈接的鼠標(biāo)經(jīng)過(guò)樣式a：hover，當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，改變鏈接內(nèi)容的背景顏色和文字顏色，更清晰的展現(xiàn)鏈接內(nèi)容，網(wǎng)頁(yè)效果也會(huì)更好。此處鼠標(biāo)經(jīng)過(guò)樣式a：hover設(shè)置如下。

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

設(shè)置鼠標(biāo)經(jīng)過(guò)時(shí)區(qū)塊背景為淺綠色，鏈接文字為綠色，無(wú)下劃線，塊級(jí)顯示。注意，鼠標(biāo)經(jīng)過(guò)時(shí)改變背景顏色，需設(shè)置a：hover樣式的顯示屬性display為block，否則僅在文字下方有背景顏色。

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

需要注意的是，如果把.nav ul li a：hover樣式放在.nav ul li a：link之前時(shí)，鼠標(biāo)經(jīng)過(guò)樣式中不起作用了。這是因?yàn)樵贑SS規(guī)范中，超鏈接樣式的排列順序： L-V-H-A，即a：hover必須出現(xiàn)在a：visited之后，否則會(huì)被隱藏[2]。

圖4 縱向?qū)Ш讲藛涡Ч?/p>

3 CSS在縱向?qū)Ш讲藛沃械膽?yīng)用

縱向?qū)Ш讲藛我话愠霈F(xiàn)在網(wǎng)頁(yè)左側(cè)，提供網(wǎng)頁(yè)某個(gè)具體內(nèi)容的導(dǎo)航。以圖4所示導(dǎo)航菜單為例，縱向?qū)Ш讲藛沃谱鬟^(guò)程如下。

3.1 編寫導(dǎo)航菜單的HTML代碼

3.2 設(shè)置外層div的樣式

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

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

設(shè)置導(dǎo)航條寬度為200像素，背景色為綠色。

3.3 設(shè)置ul列表的樣式

ul標(biāo)簽的CSS樣式設(shè)置如下。

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

設(shè)置列表寬度為200像素，去掉默認(rèn)的邊距設(shè)置，去掉項(xiàng)目符號(hào)，四周加上1像素的實(shí)線綠色邊框。

3.4 設(shè)置列表項(xiàng)li的樣式

Li標(biāo)簽上設(shè)置每一個(gè)導(dǎo)航菜單項(xiàng)目的顯示方式。此處列表項(xiàng)的樣式主要有：寬度、高度、文字樣式、水平縮進(jìn)，垂直居中，項(xiàng)目圖標(biāo)、下邊線。

其中，CSS中可以通過(guò)設(shè)置列表的前導(dǎo)圖片list-style-image屬性實(shí)現(xiàn)自定義列表項(xiàng)目圖片，但圖片與其后的文字對(duì)齊會(huì)有瀏覽器兼容性問(wèn)題。此處通過(guò)背景定位和字符縮進(jìn)的方法進(jìn)行解決，即把前導(dǎo)圖片作為li的背景，通過(guò)背景圖片的位置來(lái)控制圖片的位置，同時(shí)設(shè)置文字縮進(jìn)。

li標(biāo)簽的CSS樣式設(shè)置如下。

.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；}

設(shè)置列表項(xiàng)寬度為200像素，高度為35像素，字號(hào)14像素，加粗，縮進(jìn)40像素，垂直居中，背景圖片不重復(fù)，水平偏移15像素，垂直偏移13像素，下邊框?yàn)?像素的綠色實(shí)線。

3.5 設(shè)置超鏈接樣式

調(diào)整鏈接文字為灰色，去掉下劃線。CSS樣式設(shè)置如下。

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

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

4 結(jié)束語(yǔ)

通過(guò)水平導(dǎo)航菜單和縱向?qū)Ш讲藛蔚闹谱?，分析了CSS在導(dǎo)航菜單中的應(yīng)用，并就其中的瀏覽器兼容性問(wèn)題進(jìn)了討論。擁有易用的導(dǎo)航條對(duì)于任何網(wǎng)站都很重要。通過(guò) CSS，能夠把乏味的 HTML 菜單轉(zhuǎn)換為漂亮的導(dǎo)航欄。

【參考文獻(xiàn)】

[1]張洪斌，劉萬(wàn)輝.網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML+CSS+JavaScript）[M].北京：高等教育出版社，2013：59.

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