基于CSS技術(shù)的網(wǎng)頁(yè)導(dǎo)航欄制作

徐平

摘 要：CSS的開(kāi)發(fā)技術(shù)已成為現(xiàn)如今網(wǎng)頁(yè)前臺(tái)開(kāi)發(fā)的主要應(yīng)用技術(shù)，導(dǎo)航欄作為整個(gè)網(wǎng)站的向?qū)?，用途至關(guān)重要，基于CSS技術(shù)開(kāi)發(fā)的導(dǎo)航欄能在各類瀏覽器中正常使用，解決了瀏覽器不兼容的情況，從而解決了網(wǎng)頁(yè)開(kāi)發(fā)的難題。

關(guān)鍵詞：CSS；網(wǎng)頁(yè)制作；導(dǎo)航欄；瀏覽器兼容

對(duì)網(wǎng)頁(yè)前臺(tái)設(shè)計(jì)師而言，網(wǎng)頁(yè)的兼容性至關(guān)重要，用戶的體驗(yàn)是設(shè)計(jì)師設(shè)計(jì)的出發(fā)點(diǎn)，隨著瀏覽器的更新，許多網(wǎng)頁(yè)的導(dǎo)航欄無(wú)法正常使用，導(dǎo)致網(wǎng)站瀏覽異常，使得網(wǎng)頁(yè)需要頻繁地更新維護(hù)。而使用CSS技術(shù)進(jìn)行開(kāi)發(fā)的網(wǎng)頁(yè)導(dǎo)航欄，在多個(gè)瀏覽器中都可正常使用，并且還能在網(wǎng)頁(yè)開(kāi)發(fā)中廣泛應(yīng)用。

1 CSS簡(jiǎn)介

1.1 CSS概述

CSS（Cascading Style Sheet，層疊樣式表）是用于控制網(wǎng)頁(yè)元素顯示樣式的標(biāo)記語(yǔ)言，是目前流行的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，與傳統(tǒng)使用的HTML技術(shù)布局網(wǎng)頁(yè)相比，CSS可以實(shí)現(xiàn)網(wǎng)頁(yè)分離，同一個(gè)網(wǎng)頁(yè)應(yīng)用不同的CSS，會(huì)呈現(xiàn)不同的效果的特點(diǎn)。同時(shí)，CSS可以支持幾乎所有的字號(hào)和字體，對(duì)網(wǎng)頁(yè)中的對(duì)象可以進(jìn)行精確到像素為單位的排版，是目前最主流的設(shè)計(jì)語(yǔ)言之一，并且具有較強(qiáng)的易讀性，可針對(duì)各類人群。

1.2 CSS語(yǔ)法

CSS樣式表分為嵌入式樣式表、外部樣式表和內(nèi)聯(lián)樣式表3種，其中，優(yōu)先級(jí)：內(nèi)聯(lián)式>嵌入式>外聯(lián)式，本文所采用的主要為外部樣式表設(shè)計(jì)，更加方便應(yīng)用、修改。

CSS基本語(yǔ)法：td{ text-align：center；}，td為選擇器，text-align為屬性，center為值。期中，選擇器分為類選擇器、標(biāo)簽選擇器、ID選擇器和復(fù)合內(nèi)容，屬性與屬性值之間使用“：”隔開(kāi)，多個(gè)屬性之間使用“；”隔開(kāi)。

2 CSS技術(shù)的導(dǎo)航欄制作

2.1 使用Photoshop設(shè)計(jì)導(dǎo)航欄美工

在使用CSS制作網(wǎng)站導(dǎo)航欄之前，首先使用Photoshop制作網(wǎng)站導(dǎo)航欄的美工設(shè)計(jì)，根據(jù)網(wǎng)站整體風(fēng)格以及色彩搭配，設(shè)計(jì)好網(wǎng)頁(yè)所需的一級(jí)菜單和二級(jí)菜單的圖片樣式。要注意視覺(jué)區(qū)域的劃分、重點(diǎn)主題突出等特點(diǎn)。并且使用Photoshop保存出透明無(wú)底色的背景圖片作為備用，以我校實(shí)驗(yàn)教學(xué)部網(wǎng)站為例（見(jiàn)圖1-2）。

2.2 使用CSS和表格布局制作導(dǎo)航欄初步結(jié)構(gòu)

使用DIV+CSS的布局方式設(shè)置導(dǎo)航欄的位置，布局好整體架構(gòu)，并使用表格的布局方法完成導(dǎo)航欄內(nèi)部文字的布局設(shè)計(jì)。代碼如圖3所示。

設(shè)置ID選擇器dh和類選擇器mainMenu屬性，完成導(dǎo)航欄的視覺(jué)美工設(shè)計(jì)（見(jiàn)圖4）。

#dh{ width：1024px； height：67px； float：left}

.mainMenu a：link，.mainMenu a：visited{fontsize：16px；display：block；line-height：42px；verticalalign：middle；text-align：center；color：#FFF；textdecoration：none；font-family："SimSun"；font-weight：600}

2.3 制作鼠標(biāo)劃過(guò)彈出菜單效果

#sub1{display：none；margin-top：-2px；paddingtop：6px；position：relative；}本語(yǔ)句定義ID選擇器sub1的顯示框?yàn)槲达@示，距離頂部距離為-2像素，文字距離盒子模型頂部距離為6像素，并且定位為相對(duì)定位。

#sub1 a{margin-left：10px；color：#636363；fontsize：13px；font-weight：600；text-decoration：none}定義了sub1選擇器中的超鏈接的文字屬性。

#sub1 a：visited{color：#636363；}定義了sub1選擇器中的超鏈接訪問(wèn)后的文字屬性。

#sub1 a：hover{color：#0160a2}定義了sub1選擇器中的超鏈接鼠標(biāo)劃過(guò)時(shí)的文字屬性。

#sub1{margin-left：120px；}定義了sub1選擇器距離左側(cè)偏移值。

在完成以上樣式的定義后，完成HTML頁(yè)面中的二級(jí)菜單制作（見(jiàn)圖5）。

其中：o n m o u s e o v e r = " d o c u m e n t . getElementById（sub1）.style.display=block"，表示鼠標(biāo)劃過(guò)得到的對(duì)象為sub1，并且顯示為塊級(jí)元素。

onmouseover="document.getElementById（sub1）. style.display=block"onmouseout="document. getElementById（ sub1）.style.display=none"表示鼠標(biāo)離開(kāi)，sub1元素隱藏。

最后完成導(dǎo)航欄所有二級(jí)菜單的制作（見(jiàn)圖6）。

3 網(wǎng)頁(yè)兼容性測(cè)試

網(wǎng)頁(yè)開(kāi)發(fā)完成后，往往會(huì)遇到瀏覽器兼容性問(wèn)題。瀏覽器兼容性問(wèn)題又稱網(wǎng)頁(yè)兼容性問(wèn)題，是指網(wǎng)頁(yè)在不同的瀏覽器上的效果可能會(huì)顯示的不一致，會(huì)導(dǎo)致出現(xiàn)頁(yè)面混亂、效果在某些瀏覽器中無(wú)法正常使用等，嚴(yán)重影響瀏覽者的用戶體驗(yàn)。因此，完成網(wǎng)頁(yè)開(kāi)發(fā)后必須進(jìn)行瀏覽器的兼容性測(cè)試，保證網(wǎng)頁(yè)效果在不同的瀏覽器中顯示正常。

經(jīng)過(guò)測(cè)試，使用CSS技術(shù)的導(dǎo)航欄能夠在Firefox，Google Chrome，IE11以及IETester上的各個(gè)版本兼容，因此滿足網(wǎng)頁(yè)開(kāi)發(fā)兼容性的要求（見(jiàn)圖7-10）。

4 結(jié)語(yǔ)

CSS技術(shù)對(duì)網(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，成為現(xiàn)如今網(wǎng)頁(yè)開(kāi)發(fā)的主流趨勢(shì)，本文介紹了使用CSS技術(shù)制作導(dǎo)航欄的過(guò)程以及方法。在實(shí)際操作中可按照該方法靈活運(yùn)用，根據(jù)不同的風(fēng)格制作出不同的、具有良好兼容性的網(wǎng)站導(dǎo)航欄。

[參考文獻(xiàn)]

[1]支和才，葉賓，吳嶸.網(wǎng)頁(yè)制作三合一項(xiàng)目教程[M].上海：上?？茖W(xué)普及出版社，2015.

[2]溫謙.HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局從入門(mén)到精通[M].北京：人民郵電出版社，2008.

[3]余躍泓.Web標(biāo)準(zhǔn)下的CSS+DIV布局初探[J].計(jì)算機(jī)光盤(pán)軟件與應(yīng)用，2012（10）：67-68.

[4]聞立鷗.基于表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁(yè)布局實(shí)踐[J].教育教學(xué)論壇，2015（27）：93-94.

The Production of Web Navigation Bar Based on CSS Technology

Xu Ping

（Guangdong Petroleum and Chemical Engineering Institute，Maoming 525000， China）

Abstract： CSS development technology has become now a webpage downstage development the main application technology， the navigation bar as a guide for the entire site， use is essential， CSS technology development of navigation based on can be normally used in the various web browsers to solve the browser is not compatible with the， in order to solve the problems of web development.

Key words： CSS； Web； navigation； browser compatibility