基于CSS技術的網頁導航欄制作

徐平

摘 要：CSS的開發技術已成為現如今網頁前臺開發的主要應用技術，導航欄作為整個網站的向導，用途至關重要，基于CSS技術開發的導航欄能在各類瀏覽器中正常使用，解決了瀏覽器不兼容的情況，從而解決了網頁開發的難題。

關鍵詞：CSS；網頁制作；導航欄；瀏覽器兼容

對網頁前臺設計師而言，網頁的兼容性至關重要，用戶的體驗是設計師設計的出發點，隨著瀏覽器的更新，許多網頁的導航欄無法正常使用，導致網站瀏覽異常，使得網頁需要頻繁地更新維護。而使用CSS技術進行開發的網頁導航欄，在多個瀏覽器中都可正常使用，并且還能在網頁開發中廣泛應用。

1 CSS簡介

1.1 CSS概述

CSS（Cascading Style Sheet，層疊樣式表）是用于控制網頁元素顯示樣式的標記語言，是目前流行的網頁設計技術，與傳統使用的HTML技術布局網頁相比，CSS可以實現網頁分離，同一個網頁應用不同的CSS，會呈現不同的效果的特點。同時，CSS可以支持幾乎所有的字號和字體，對網頁中的對象可以進行精確到像素為單位的排版，是目前最主流的設計語言之一，并且具有較強的易讀性，可針對各類人群。

1.2 CSS語法

CSS樣式表分為嵌入式樣式表、外部樣式表和內聯樣式表3種，其中，優先級：內聯式>嵌入式>外聯式，本文所采用的主要為外部樣式表設計，更加方便應用、修改。

CSS基本語法：td{ text-align：center；}，td為選擇器，text-align為屬性，center為值。期中，選擇器分為類選擇器、標簽選擇器、ID選擇器和復合內容，屬性與屬性值之間使用“：”隔開，多個屬性之間使用“；”隔開。

2 CSS技術的導航欄制作

2.1 使用Photoshop設計導航欄美工

在使用CSS制作網站導航欄之前，首先使用Photoshop制作網站導航欄的美工設計，根據網站整體風格以及色彩搭配，設計好網頁所需的一級菜單和二級菜單的圖片樣式。要注意視覺區域的劃分、重點主題突出等特點。并且使用Photoshop保存出透明無底色的背景圖片作為備用，以我校實驗教學部網站為例（見圖1-2）。

2.2 使用CSS和表格布局制作導航欄初步結構

使用DIV+CSS的布局方式設置導航欄的位置，布局好整體架構，并使用表格的布局方法完成導航欄內部文字的布局設計。代碼如圖3所示。

設置ID選擇器dh和類選擇器mainMenu屬性，完成導航欄的視覺美工設計（見圖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 制作鼠標劃過彈出菜單效果

#sub1{display：none；margin-top：-2px；paddingtop：6px；position：relative；}本語句定義ID選擇器sub1的顯示框為未顯示，距離頂部距離為-2像素，文字距離盒子模型頂部距離為6像素，并且定位為相對定位。

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

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

#sub1 a：hover{color：#0160a2}定義了sub1選擇器中的超鏈接鼠標劃過時的文字屬性。

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

在完成以上樣式的定義后，完成HTML頁面中的二級菜單制作（見圖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"，表示鼠標劃過得到的對象為sub1，并且顯示為塊級元素。

onmouseover="document.getElementById（sub1）. style.display=block"onmouseout="document. getElementById（ sub1）.style.display=none"表示鼠標離開，sub1元素隱藏。

最后完成導航欄所有二級菜單的制作（見圖6）。

3 網頁兼容性測試

網頁開發完成后，往往會遇到瀏覽器兼容性問題。瀏覽器兼容性問題又稱網頁兼容性問題，是指網頁在不同的瀏覽器上的效果可能會顯示的不一致，會導致出現頁面混亂、效果在某些瀏覽器中無法正常使用等，嚴重影響瀏覽者的用戶體驗。因此，完成網頁開發后必須進行瀏覽器的兼容性測試，保證網頁效果在不同的瀏覽器中顯示正常。

經過測試，使用CSS技術的導航欄能夠在Firefox，Google Chrome，IE11以及IETester上的各個版本兼容，因此滿足網頁開發兼容性的要求（見圖7-10）。

4 結語

CSS技術對網頁中的對象的位置排版進行像素級的精確控制，成為現如今網頁開發的主流趨勢，本文介紹了使用CSS技術制作導航欄的過程以及方法。在實際操作中可按照該方法靈活運用，根據不同的風格制作出不同的、具有良好兼容性的網站導航欄。

[參考文獻]

[1]支和才，葉賓，吳嶸.網頁制作三合一項目教程[M].上海：上海科學普及出版社，2015.

[2]溫謙.HTML+CSS網頁設計與布局從入門到精通[M].北京：人民郵電出版社，2008.

[3]余躍泓.Web標準下的CSS+DIV布局初探[J].計算機光盤軟件與應用，2012（10）：67-68.

[4]聞立鷗.基于表現與結構分離的網頁布局實踐[J].教育教學論壇，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