摘要：導(dǎo)航是網(wǎng)頁設(shè)計中的重要組成內(nèi)容之一。應(yīng)用HTML5設(shè)計網(wǎng)頁過程中，恰當(dāng)設(shè)置css屬性可以實現(xiàn)特殊效果的導(dǎo)航菜單。該文在分析HTML5和CSS3技術(shù)優(yōu)勢特點上，以某一注冊頁面氣泡式導(dǎo)航為例分析其實現(xiàn)原理，闡述其實現(xiàn)過程的關(guān)鍵代碼，為其他技術(shù)人員提供參考。

關(guān)鍵詞：HTML5;CSS3;氣泡式導(dǎo)航

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2020）33-0220-02

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

導(dǎo)航菜單是網(wǎng)頁設(shè)計中的重要組成內(nèi)容之一。通過導(dǎo)航，用戶可以快速瀏覽訪問到所需要的內(nèi)容[1]。在HTML5中恰當(dāng)設(shè)置css屬性可以實現(xiàn)各種效果的導(dǎo)航菜單。在瀏覽網(wǎng)頁（例如一些注冊頁面）時，我們經(jīng)常會看到把鼠標(biāo)放到導(dǎo)航上時，下面會出現(xiàn)小三角，當(dāng)鼠標(biāo)離開時，小三角隨之消失，這一類的導(dǎo)航稱為氣泡式導(dǎo)航。本文在分析HTML5和CSS3技術(shù)優(yōu)勢特點上，以某一注冊頁面氣泡式導(dǎo)航為例分析其實現(xiàn)原理，闡述了實現(xiàn)過程的關(guān)鍵代碼，為其他網(wǎng)頁設(shè)計人員提供參考。

1 HTML5概述

作為當(dāng)前主流的Web前端開發(fā)技術(shù)，與HTMLI相比，HT-ML5的功能更加強(qiáng)大，對網(wǎng)頁設(shè)計開發(fā)支持的力度更加強(qiáng)大，支持網(wǎng)頁的功能更加全面[2]，主要體現(xiàn)在統(tǒng)一規(guī)范處理語義，新增等語義化標(biāo)簽和屬性，如、和的autofocus屬性等，降低代碼編寫難度，簡化開發(fā)程序，提高工作效率;提供強(qiáng)大而全面的API支持，來實現(xiàn)更加復(fù)雜多變的網(wǎng)頁功能;無須任何特定工具和插件，HTML5通過設(shè)置自帶的audio標(biāo)簽和video標(biāo)簽，就可以實現(xiàn)網(wǎng)頁中音視頻的順利播放;新增canvas元素可繪制圖像、制作動畫。

2 CSS3概述

css（ Cascading Style Sheets）即層疊樣式表，是用于控制網(wǎng)頁顯示效果的技術(shù)[3]，其可以有效地控制網(wǎng)頁的布局、字體、顏色、背景和其他效果，美化網(wǎng)頁。css3是css規(guī)范的最新版本，在css2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能，如圓角功能、多背景、透明度、陰影等，正是這些新的功能，完美地幫助開發(fā)人員解決一些以前需要用復(fù)雜的JavaScript腳本、非語義標(biāo)簽才能完成的功能[4];其優(yōu)勢主要體現(xiàn)在增加邊框?qū)傩?，用border-color設(shè)置邊框顏色，border-image設(shè)置邊框圖像，border-radius設(shè)置邊框圓角，可以分別設(shè)置邊框上、下、左、右四個方向不同屬性，實現(xiàn)網(wǎng)頁邊框的線條感和立體感;設(shè)置CSS3屬性實現(xiàn)漸變，讓網(wǎng)頁效果絢麗多變;運(yùn)用CSS3強(qiáng)大的Animation屬性設(shè)置圖像的縮放、旋轉(zhuǎn)等，實現(xiàn)網(wǎng)頁中的動畫效果;借助CSS3中的RGBA命令能夠更改或重設(shè)元素的色彩與透明度，更易實現(xiàn)網(wǎng)頁元素色彩等等。此外，在CSS3中給出偽元素的概念，是用來創(chuàng)建一些文檔語言無法生成的虛擬元素[5]。比如運(yùn)用：：before描述在特定元素之前添加內(nèi)容，運(yùn)用：：first-line描述特定元素的第一行文本等。

隨著網(wǎng)絡(luò)技術(shù)的深入發(fā)展，網(wǎng)頁設(shè)計與制作人員會綜合HTML5和CSS3技術(shù)優(yōu)勢，以實現(xiàn)豐富多彩的網(wǎng)頁效果。常見的有利用HTML5+CSS3技術(shù)進(jìn)行響應(yīng)式頁面布局，讓不同終端設(shè)備的用戶獲得更舒適的界面、更友好的體驗;在HTML5+CSS3技術(shù)基礎(chǔ)上結(jié)合Jsp腳本語言實現(xiàn)頁面跨瀏覽器設(shè)計等。

3 實現(xiàn)原理

3.1功能描述

氣泡式導(dǎo)航具有一定的指示性，表現(xiàn)為當(dāng)鼠標(biāo)移動到導(dǎo)航某一欄目上時，相應(yīng)欄目下面會有一個突起的小三角，指向特定的內(nèi)容;鼠標(biāo)離開后，該欄目還原為初始的狀態(tài)。常用在一些注冊頁面、電商頁面某一頻道欄目等。本文設(shè)計的是某一注冊頁面的氣泡式導(dǎo)航，其在谷歌瀏覽器下預(yù)覽效果，如圖所示。

3.2 關(guān)鍵技術(shù)

實現(xiàn)該氣泡式導(dǎo)航關(guān)鍵之處有兩點：一是導(dǎo)航下方突起的小三角，二是鼠標(biāo)滑到導(dǎo)航欄目時，出現(xiàn)小三角;鼠標(biāo)離開后，恢復(fù)原始狀態(tài)。本文運(yùn)用CSS3設(shè)置邊框制作小三角，結(jié)合偽元素來實現(xiàn)，可分解為以下四步：

第一步：生成三角形。將當(dāng)前元素顯示為塊狀元素，寬、高設(shè)置為0，設(shè)置border屬性的大?。ㄒ罁?jù)三角形大小確定）、線型是實線、顏色透明。

第二步：顯示指定方向的三角形。該氣泡式導(dǎo)航需要取出下方的三角形，只需設(shè)置上邊框的顏色，顯示指向下方的三角形。在網(wǎng)頁設(shè)計過程，根據(jù)實際需要設(shè)置上、下、左、右不同方向的三角形，設(shè)置下邊框顏色顯示指向上方的三角形，設(shè)置左邊框顏色顯示指向右方的三角形，設(shè)置右邊框顏色顯示指向左方的三角形。

第三步，確定小三角位置。將position屬性設(shè)為relative，left屬性中間偏左一些，相對當(dāng)前元素位置居中顯示。

第四步，鼠標(biāo)滑過出現(xiàn)三角形，鼠標(biāo)移開，小三角消失。當(dāng)鼠標(biāo)滑到導(dǎo)航欄目時，在a：hover后添加：：after偽元素，在其后插入小三角。偽元素是虛擬元素，在文檔中不存在，當(dāng)鼠標(biāo)移開導(dǎo)航后，小三角就自動消失了。

4 實現(xiàn)過程

在HTML5頁面中應(yīng)用氣泡式導(dǎo)航時，先確定設(shè)置氣泡式導(dǎo)航的版塊，在其中插入無序列表制作導(dǎo)航欄，然后創(chuàng)建樣式，定義合適的選擇器美化列表，最后對于實現(xiàn)特定效果，設(shè)置合適屬性。

4.1設(shè)置導(dǎo)航欄目

在HTML5頁面的內(nèi)的某一欄目或版塊內(nèi)，插入無序列表

，每一列
• 內(nèi)添加導(dǎo)航欄目，運(yùn)用設(shè)置超鏈接。參考HTML代碼如下：

  • 1驗證身份信息<，a>
  • 2設(shè)置用戶信息
  • 3完成

  4.2 美化導(dǎo)航欄目

  創(chuàng)建