劉曉娟
【摘 要】導(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.