• 
    

    
    

      99热精品在线国产_美女午夜性视频免费_国产精品国产高清国产av_av欧美777_自拍偷自拍亚洲精品老妇_亚洲熟女精品中文字幕_www日本黄色视频网_国产精品野战在线观看 ?

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

      2017-12-11 21:56:33劉曉娟
      科技視界 2017年25期
      關(guān)鍵詞:樣式列表菜單

      劉曉娟

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

      猜你喜歡
      樣式列表菜單
      巧用列表來(lái)推理
      CPMF-I 取樣式多相流分離計(jì)量裝置
      CPMF-I 取樣式多相流分離計(jì)量裝置
      學(xué)習(xí)運(yùn)用列表法
      取樣式多相流分離計(jì)量裝置
      擴(kuò)列吧
      中國(guó)新年菜單
      本月菜單
      美食堂(2017年1期)2017-01-13 01:37:42
      這是巴黎發(fā)布的新樣式
      不含3-圈的1-平面圖的列表邊染色與列表全染色
      通江县| 海盐县| 会东县| 永泰县| 治多县| 南华县| 新乡县| 大石桥市| 新巴尔虎右旗| 洛浦县| 淮北市| 斗六市| 驻马店市| 龙南县| 万山特区| 彩票| 绍兴县| 阳春市| 汉川市| 黑龙江省| 文成县| 池州市| 永善县| 元阳县| 青海省| 阿拉善右旗| 岚皋县| 称多县| 阿拉善盟| 吉林市| 敦化市| 铜陵市| 玛纳斯县| 黄大仙区| 西吉县| 衡阳市| 邯郸市| 绥阳县| 如皋市| 汉阴县| 安乡县|