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

關鍵詞：HTML5;CSS3;氣泡式導航

中圖分類號：TP311 文獻標識碼：A

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

開放科學（資源服務）標識碼（OSID）：

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

1 HTML5概述

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

2 CSS3概述

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

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

3 實現原理

3.1功能描述

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

3.2 關鍵技術

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

第一步：生成三角形。將當前元素顯示為塊狀元素，寬、高設置為0，設置border屬性的大?。ㄒ罁切未笮〈_定）、線型是實線、顏色透明。

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

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

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

4 實現過程

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

4.1設置導航欄目

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

，每一列
• 內添加導航欄目，運用設置超鏈接。參考HTML代碼如下：

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

  4.2 美化導航欄目

  創(chuàng)建