HTML5+CSS3氣泡式導(dǎo)航探討范文
本站小編為你精心準(zhǔn)備了HTML5+CSS3氣泡式導(dǎo)航探討參考范文，愿這些范文能點(diǎn)燃您思維的火花，激發(fā)您的寫作靈感。歡迎深入閱讀并收藏。
摘要：導(dǎo)航是網(wǎng)頁設(shè)計(jì)中的重要組成內(nèi)容之一。應(yīng)用HTML5設(shè)計(jì)網(wǎng)頁過程中，恰當(dāng)設(shè)置CSS屬性可以實(shí)現(xiàn)特殊效果的導(dǎo)航菜單。該文在分析HTML5和CSS3技術(shù)優(yōu)勢特點(diǎn)上，以某一注冊頁面氣泡式導(dǎo)航為例分析其實(shí)現(xiàn)原理，闡述其實(shí)現(xiàn)過程的關(guān)鍵代碼，為其他技術(shù)人員提供參考。
關(guān)鍵詞：HTML5；CSS3；氣泡式導(dǎo)航
導(dǎo)航菜單是網(wǎng)頁設(shè)計(jì)中的重要組成內(nèi)容之一。通過導(dǎo)航，用戶可以快速瀏覽訪問到所需要的內(nèi)容[1]。在HTML5中恰當(dāng)設(shè)置CSS屬性可以實(shí)現(xiàn)各種效果的導(dǎo)航菜單。在瀏覽網(wǎng)頁（例如一些注冊頁面）時(shí)，我們經(jīng)常會(huì)看到把鼠標(biāo)放到導(dǎo)航上時(shí)，下面會(huì)出現(xiàn)小三角，當(dāng)鼠標(biāo)離開時(shí)，小三角隨之消失，這一類的導(dǎo)航稱為氣泡式導(dǎo)航。本文在分析HTML5和CSS3技術(shù)優(yōu)勢特點(diǎn)上，以某一注冊頁面氣泡式導(dǎo)航為例分析其實(shí)現(xiàn)原理，闡述了實(shí)現(xiàn)過程的關(guān)鍵代碼，為其他網(wǎng)頁設(shè)計(jì)人員提供參考。
1、HTML5概述
作為當(dāng)前主流的Web前端開發(fā)技術(shù)，與HTML4相比，HT⁃ML5的功能更加強(qiáng)大，對網(wǎng)頁設(shè)計(jì)開發(fā)支持的力度更加強(qiáng)大，支持網(wǎng)頁的功能更加全面[2]，主要體現(xiàn)在統(tǒng)一規(guī)范處理語義，新增<header>、<header>等語義化標(biāo)簽和屬性，如<input>、<button>和<textarea>的autofocus屬性等，降低代碼編寫難度，簡化開發(fā)程序，提高工作效率；提供強(qiáng)大而全面的API支持，來實(shí)現(xiàn)更加復(fù)雜多變的網(wǎng)頁功能；無須任何特定工具和插件，HTML5通過設(shè)置自帶的audio標(biāo)簽和video標(biāo)簽，就可以實(shí)現(xiàn)網(wǎng)頁中音視頻的順利播放；新增canvas元素可繪制圖像、制作動(dòng)畫。
2、CSS3概述
CSS（CascadingStyleSheets）即層疊樣式表，是用于控制網(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ū)傩裕胋order-color設(shè)置邊框顏色，border-image設(shè)置邊框圖像，border-radius設(shè)置邊框圓角，可以分別設(shè)置邊框上、下、左、右四個(gè)方向不同屬性，實(shí)現(xiàn)網(wǎng)頁邊框的線條感和立體感；設(shè)置CSS3屬性實(shí)現(xiàn)漸變，讓網(wǎng)頁效果絢麗多變；運(yùn)用CSS3強(qiáng)大的Animation屬性設(shè)置圖像的縮放、旋轉(zhuǎn)等，實(shí)現(xiàn)網(wǎng)頁中的動(dòng)畫效果；借助CSS3中的RGBA命令能夠更改或重設(shè)元素的色彩與透明度，更易實(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è)計(jì)與制作人員會(huì)綜合HTML5和CSS3技術(shù)優(yōu)勢，以實(shí)現(xiàn)豐富多彩的網(wǎng)頁效果。常見的有利用html5+css3技術(shù)進(jìn)行響應(yīng)式頁面布局，讓不同終端設(shè)備的用戶獲得更舒適的界面、更友好的體驗(yàn)；在HTML5+CSS3技術(shù)基礎(chǔ)上結(jié)合Jsp腳本語言實(shí)現(xiàn)頁面跨瀏覽器設(shè)計(jì)等。
3、實(shí)現(xiàn)原理
3.1功能描述氣泡式導(dǎo)航具有一定的指示性，表現(xiàn)為當(dāng)鼠標(biāo)移動(dòng)到導(dǎo)航某一欄目上時(shí)，相應(yīng)欄目下面會(huì)有一個(gè)突起的小三角，指向特定的內(nèi)容；鼠標(biāo)離開后，該欄目還原為初始的狀態(tài)。常用在一些注冊頁面、電商頁面某一頻道欄目等。本文設(shè)計(jì)的是某一注冊頁面的氣泡式導(dǎo)航，其在谷歌瀏覽器下預(yù)覽效果，如圖所示.3.2關(guān)鍵技術(shù)實(shí)現(xiàn)該氣泡式導(dǎo)航關(guān)鍵之處有兩點(diǎn)：一是導(dǎo)航下方突起的小三角，二是鼠標(biāo)滑到導(dǎo)航欄目時(shí)，出現(xiàn)小三角；鼠標(biāo)離開后，恢復(fù)原始狀態(tài)。本文運(yùn)用CSS3設(shè)置邊框制作小三角，結(jié)合偽元素來實(shí)現(xiàn)，可分解為以下四步：第一步：生成三角形。將當(dāng)前元素顯示為塊狀元素，寬、高設(shè)置為0，設(shè)置border屬性的大小（依據(jù)三角形大小確定）、線型是實(shí)線、顏色透明。第二步：顯示指定方向的三角形。該氣泡式導(dǎo)航需要取出下方的三角形，只需設(shè)置上邊框的顏色，顯示指向下方的三角形。在網(wǎng)頁設(shè)計(jì)過程，根據(jù)實(shí)際需要設(shè)置上、下、左、右不同方向的三角形，設(shè)置下邊框顏色顯示指向上方的三角形，設(shè)置左邊框顏色顯示指向右方的三角形，設(shè)置右邊框顏色顯示指向左方的三角形。第三步，確定小三角位置。將position屬性設(shè)為relative，left屬性中間偏左一些，相對當(dāng)前元素位置居中顯示。第四步，鼠標(biāo)滑過出現(xiàn)三角形，鼠標(biāo)移開，小三角消失。當(dāng)鼠標(biāo)滑到導(dǎo)航欄目時(shí)，在a:hover后添加::after偽元素，在其后插入小三角。偽元素是虛擬元素，在文檔中不存在，當(dāng)鼠標(biāo)移開導(dǎo)航后，小三角就自動(dòng)消失了。
4、實(shí)現(xiàn)過程
在HTML5頁面中應(yīng)用氣泡式導(dǎo)航時(shí)，先確定設(shè)置氣泡式導(dǎo)航的版塊，在其中插入無序列表制作導(dǎo)航欄，然后創(chuàng)建樣式，定義合適的選擇器美化列表，最后對于實(shí)現(xiàn)特定效果，設(shè)置合適屬性。4.1設(shè)置導(dǎo)航欄目在HTML5頁面的<body>內(nèi)的某一欄目或版塊內(nèi)，插入無序列表<ul>，每一列<li>內(nèi)添加導(dǎo)航欄目，運(yùn)用<a>設(shè)置超鏈接。參考HTML代碼如下：</ul>4.2美化導(dǎo)航欄目創(chuàng)建<style>,在其內(nèi)定義合適的選擇器，如標(biāo)簽選擇器或類選擇器，美化列表：設(shè)置CSS屬性清除列表默認(rèn)樣式，居中等.美化列表項(xiàng)：設(shè)置CSS屬性向左浮動(dòng)，讓列表項(xiàng)水平呈現(xiàn)，寬度（所有列表項(xiàng)寬度和小于列表總寬度），背景色，文本顏色，文本居中，列表項(xiàng)居中等。參考HTML代碼定義的標(biāo)簽選擇器，如下：4.3創(chuàng)建導(dǎo)航超鏈接樣式在上面的<style>標(biāo)簽內(nèi)，運(yùn)用CSS3美化超鏈接：顯示為塊狀，寬度和高度（與列表項(xiàng)寬高一樣），清除超鏈接默認(rèn)樣式等；設(shè)置鼠標(biāo)移動(dòng)到超鏈接上背景色和文本顏色，并添加::after偽元素，在列表項(xiàng)中間生成指向下方的小三角。參考HTML代碼如下：
5、結(jié)束語
本文應(yīng)用HTML5+CSS3技術(shù)所設(shè)計(jì)的氣泡式導(dǎo)航代碼簡單，擴(kuò)展性好，在實(shí)際工作中，網(wǎng)頁制作人員可以根據(jù)實(shí)際情況調(diào)整、完善相關(guān)語句，以實(shí)現(xiàn)適合自身網(wǎng)頁的導(dǎo)航效果。當(dāng)前，HT⁃ML5與CSS3的有機(jī)結(jié)合在網(wǎng)頁設(shè)計(jì)與制作領(lǐng)域占據(jù)著重要的位置，為廣大網(wǎng)頁設(shè)計(jì)人員拓展了網(wǎng)頁設(shè)計(jì)視覺處理空間，提升了網(wǎng)頁制作效率。同時(shí)，面對互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展，廣大網(wǎng)頁設(shè)計(jì)人員也要從瀏覽網(wǎng)頁用戶體驗(yàn)出發(fā)，巧妙運(yùn)用HTML5+CSS3設(shè)計(jì)出界面更加友好、交互性更強(qiáng)的網(wǎng)頁作品。
參考文獻(xiàn):
[1]楊花雨,郝勝華.DIV+CSS在實(shí)現(xiàn)導(dǎo)航下拉子菜單效果中的應(yīng)用[J].電腦與電信,2019(7):43-45.
[2]李微.HTML5+CSS3在網(wǎng)頁設(shè)計(jì)中的特性及優(yōu)勢[J].信息與電腦(理論版),2018(22):13-15.
[3]黃志剛.CSS3漸變教學(xué)難點(diǎn)深度解析[J].課程教育研究,2019(47):242-243.
[4]李雅萍.淺淡css3的新特性[J].電腦迷,2018(9):48.
[5]趙文艷.深入挖掘CSS偽元素[J].信息通信,2019,32(10):281,283.
作者：楊梅 單位：泰州機(jī)電高等職業(yè)技術(shù)學(xué)校