基于HTML5的Web站點(diǎn)設(shè)計(jì)與實(shí)現(xiàn)

摘? 要：HTML5是最新一代的超文本標(biāo)記語(yǔ)言，新增了許多功能強(qiáng)大的組件元素，大大降低了開發(fā)人員的勞動(dòng)強(qiáng)度，提高了開發(fā)效率，HTML5結(jié)合CSS 3.0和JavaScript，能夠設(shè)計(jì)出美觀實(shí)用且功能強(qiáng)大的網(wǎng)站。文章基于HTML5設(shè)計(jì)開發(fā)了一個(gè)Web站點(diǎn)首頁(yè)，頁(yè)面由標(biāo)題導(dǎo)航欄、主體和頁(yè)腳三部分組成，標(biāo)題部分實(shí)現(xiàn)了功能強(qiáng)大的輪播圖，主體部分左側(cè)是純CSS可折疊菜單，右側(cè)實(shí)現(xiàn)了鼠標(biāo)移動(dòng)可自動(dòng)切換選項(xiàng)卡。

關(guān)鍵詞：HTML5；輪播圖；可折疊菜單；自動(dòng)切換選項(xiàng)卡

中圖分類號(hào)：TP393? 文獻(xiàn)標(biāo)識(shí)碼：A? ? 文章編號(hào)：2096-4706（2023）06-0069-04

Design and Implementation of Web Site Based on HTML5

CHEN Zhaoyun

（School of Electronics and Information Engineering， Heyuan Polytechnic， Heyuan? 517000， China）

Abstract： HTML5 is the latest generation of hypertext markup language， adding many powerful component elements， greatly reducing the labor intensity of developers， improving the development efficiency. HTML5 combines CSS 3.0 and JavaScript to design beautiful， practical and powerful websites. This paper designs and develops a Web site homepage based on HTML5. The page is composed of three parts： title navigation bar， body and footer. The title part realizes a powerful Carousel figure， the left side of the body is a pure CSS collapsible menu， and the right side realizes automatic switching tab by moving the mouse.

Keywords： HTML5; carousel figure; collapsible menu; automatic switching tab

0? 引? 言

Web站點(diǎn)是音視頻等各種資源的載體，HTML5橫空出世完美契合了移動(dòng)互聯(lián)時(shí)代Web站點(diǎn)須兼容PC端和移動(dòng)端的要求，所以被稱為互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)。目前主流的門戶網(wǎng)站或者電商網(wǎng)站都具有輪播圖、可折疊導(dǎo)航菜單、自動(dòng)切換選項(xiàng)卡等功能，綜合運(yùn)用HTML5新增的控件元素、CSS 3.0和JavaScript，可以幫助開發(fā)人員快速高效的實(shí)現(xiàn)上述功能，設(shè)計(jì)出功能強(qiáng)大、新穎獨(dú)特的站點(diǎn)。本文可作為HTML5初學(xué)者的入門參考資料，也可為進(jìn)階學(xué)員提供功能點(diǎn)技術(shù)支持。

1? 功能概述

本文以設(shè)計(jì)一個(gè)門戶網(wǎng)站首頁(yè)為例，介紹HTML5、CSS 3.0和JavaScript的綜合使用。站點(diǎn)首頁(yè)由導(dǎo)航欄、輪播圖、主體和頁(yè)腳四部分組成，主要功能如下：

（1）導(dǎo)航欄：導(dǎo)航欄由div+ul+css 3.0實(shí)現(xiàn)，鼠標(biāo)移到對(duì)應(yīng)欄則該欄目突出顯示。

（2）輪播圖：輪播圖實(shí)現(xiàn)了圖片的自動(dòng)切換、左右按鍵切換和下方列表切換等多種切換效果。

（3）主體部分：主體部分左側(cè)是純div+css 3.0實(shí)現(xiàn)的可折疊菜單欄；右側(cè)是自動(dòng)切換選項(xiàng)卡面板，鼠標(biāo)移動(dòng)可實(shí)現(xiàn)選項(xiàng)卡的自動(dòng)切換功能。

2? 案例實(shí)現(xiàn)

2.1? 創(chuàng)建名為WebArticle的站點(diǎn)

在站點(diǎn)根目錄下新建名為index.html的HTML5文件和名為img的文件夾，index.html是Web站點(diǎn)頁(yè)面，img是站點(diǎn)圖片素材的存放目錄，如圖1所示。

2.2? 導(dǎo)航欄實(shí)現(xiàn)

站點(diǎn)導(dǎo)航欄由div+ul+css 3.0實(shí)現(xiàn)，鼠標(biāo)移到對(duì)應(yīng)欄則該欄目突出顯示，效果如圖2所示。

第一步：在index.html頁(yè)面的和之間加入一個(gè)id為nav的div，然后在div中加入無(wú)序列表ul，在無(wú)序列表的li標(biāo)簽中加入導(dǎo)航菜單項(xiàng)，導(dǎo)航標(biāo)簽代碼如下：

第二步：在標(biāo)簽之間插入樣式代碼，樣式代碼寫在之間，導(dǎo)航標(biāo)簽樣式代碼如下：

*{padding： 0; margin： 0;}/*網(wǎng)頁(yè)標(biāo)簽統(tǒng)一初始化*/

#nav{width：1200px;height： 45px;margin： 0 auto;background：#000;}

ul{list-style： none;}/*下面幾個(gè)無(wú)序列表一起生效*/

#nav ul li{float：left;line-height： 40px;width： 100px;font-size： 18px;text-align：center;}

#nav ul li a{text-decoration： none;color： white;}

#nav ul li a：hover{color： red;}

2.3? 輪播圖功能實(shí)現(xiàn)

輪播圖實(shí)現(xiàn)了圖片自動(dòng)切換、左右按鍵切換和下方列表切換等多種切換功能，效果如圖3所示。

第一步：在導(dǎo)航欄div的后面插入一個(gè)新的div，id設(shè)為rotation，在新div里面包含存放輪播圖片的ul無(wú)序列表content、向前翻圖的div、向后翻圖的div和與輪播圖片對(duì)應(yīng)的圖標(biāo)列表circle，輪播圖標(biāo)簽具體代碼如下：

第二步：在之間寫入輪播圖的樣式代碼，初始狀態(tài)時(shí)第一張圖不透明而其他圖都是透明狀態(tài)，所有圖都是絕對(duì)地址且堆疊在一起，輪播圖標(biāo)簽樣式代碼如下：

#rotation{width：1200px;height： 300px;margin： 0 auto;position： relative;}

#content li{float： left;position： absolute;opacity： 0;}/*所有圖透明，疊一起*/

#content>li：first-child{opacity： 1;}/*顯示第一張圖*/

#prev{position： absolute;width：30px;height： 60px;background-color： rgba（0，0，0，0.2）;opacity：0;line-height：60px;font-size：30px;color：white;left：0;top：50%;transform：translateY（-50%）;user-select：none;}

#next{position：absolute;width：30px;height：60px;background-color：rgba（0，0，0，0.2）;opacity：0;line-height：60px;font-size：30px;color：white;right：0;top：50%;transform： translateY（-50%）;user-select：none;}

#prev：hover，#next：hover{background-color： rgba（0，0，0，0.5）;cursor： pointer;}

#circle{position：absolute;background-color： rgba（255，255，255，0.5）;padding： 5px;border-radius： 10px; left： 50%;bottom： 20px;transform：translateX（-50%）;}

#circle>li{float： left;background： #fff;width：16px;height：16px;border-radius： 8px;margin-left：5px;}

#circle>li：first-child{background：#f00;}

第三步：在頁(yè)面的最后加入實(shí)現(xiàn)輪播圖的JavaScript代碼，完整代碼如下：

2.4? 主體部分功能實(shí)現(xiàn)

主體部分由左側(cè)可折疊菜單和右側(cè)選項(xiàng)卡面板兩部分組成。

2.4.1? 左側(cè)可折疊菜單功能實(shí)現(xiàn)

使用純div+css實(shí)現(xiàn)可折疊菜單功能，鼠標(biāo)移到主菜單會(huì)自動(dòng)彈出下級(jí)菜單項(xiàng)，鼠標(biāo)移出則自動(dòng)折疊，效果如圖4所示。

第一步：在輪播圖div后面插入一個(gè)新div設(shè)定id為main，在里面插入兩個(gè)div，id分別設(shè)定為mainLeft和mainRight，在mainLeft下面用無(wú)序列表嵌套有序列表的方式設(shè)計(jì)可折疊菜單，具體代碼如下：

第二步：在之間寫入可折疊菜單樣式代碼以實(shí)現(xiàn)功能，具體代碼如下：

#mainLeft{width：250px;height： 100%;background-color： rgba（200，200，200，0.3）;float： left;position： relative;}

#mainLeft ol{list-style： none;}

#mainLeft ul{position： absolute;}

#mainLeft ul li{padding-left： 30px;line-height： 30px;}

#mainLeft ul li ol{width：220px;height：70px;

background-color：rgba（100，255，100，0.3）;display：none;}

#mainLeft ul li：hover ol{display： block;z-index： 99;}

#mainLeft ul li ol li a{text-decoration： none;color： blue;}

#mainLeft ul li ol li a：hover{color： red;}

2.4.2? 右側(cè)選項(xiàng)卡面板功能實(shí)現(xiàn)

主體右側(cè)是div+css+JavaScript實(shí)現(xiàn)的自動(dòng)切換選項(xiàng)卡內(nèi)容展示區(qū)域，鼠標(biāo)移到對(duì)應(yīng)的選項(xiàng)卡則顯示該選項(xiàng)卡下的內(nèi)容，效果如圖5所示。

第一步：在mainRight div里面插入id為tabList和id為tabCon的兩個(gè)div，在tabList中插入無(wú)序列表ul，在無(wú)序列表的li標(biāo)簽中加入選項(xiàng)卡的切換項(xiàng)；在tabCon中插入5個(gè)div（tabCon中的div務(wù)必于li標(biāo)簽切換項(xiàng)保持對(duì)應(yīng)），具體代碼如下：

第二步：針對(duì)布局標(biāo)簽編寫樣式，具體樣式代碼如下：

#mainRight{margin-left： 10px;width： 940px;height： 100%;float： left;}

#tabList{width：100%;height： 35px;background：lightgray;}

#tabList ul li{float： left;line-height： 33px;width：130px;text-align： center;

border-bottom： 2px solid red;font-size： 16px;font-weight：bold;cursor： pointer;}

#tabList ul li.select{background：#fff;border-bottom：2px solid #fff;}

#tabContent{width：100%;height：415px;}

第三步：在之間插入JavaScript腳本以實(shí)現(xiàn)選項(xiàng)卡切換功能，代碼如下：

function $（id）{

return typeof id=="string"？document.getElementById（id）：id;

}

window.onload=function（）{

var taList=$（"tabList"）.getElementsByTagName（"li"）;

var taContent=$（"tabCon"）.getElementsByTagName（"div"）;

if（taList.length！=taContent.length）{

return;

}

for（var i=0;i

taList[i].id=i;

taList[i].onmouseover=function（）{

for（var j=0;j

taList[j].className="";

taContent[j].style.display="none";

}

this.className="select";

taContent[this.id].style.display="block";

}

}

}

2.5? 頁(yè)腳部分功能實(shí)現(xiàn)

頁(yè)腳部分功能簡(jiǎn)單，實(shí)現(xiàn)起來(lái)比較容易，此處省略。

3? 程序說(shuō)明

關(guān)于程序的說(shuō)明如下：

（1）圖片輪播功能的圖片無(wú)序列表項(xiàng)和圖片切換的無(wú)序列表項(xiàng)要保持一致，且在動(dòng)態(tài)站點(diǎn)中，圖片地址可以從數(shù)據(jù)庫(kù)中動(dòng)態(tài)獲取。

（2）可折疊菜單功能中，外層div的position一定要設(shè)置成relative，且外層無(wú)需列表ul的position設(shè)置成absolute。

（3）在選項(xiàng)卡切換菜單中，代表標(biāo)題的tabList下的項(xiàng)和代表內(nèi)容的tabCon下的項(xiàng)數(shù)目務(wù)必保持相等才能一一對(duì)應(yīng)，通過(guò)設(shè)置標(biāo)題項(xiàng)一般狀態(tài)和鼠標(biāo)移入時(shí)的不同樣式達(dá)到區(qū)分活動(dòng)選項(xiàng)卡的目的，再通過(guò)JavaScript腳本實(shí)現(xiàn)標(biāo)題項(xiàng)與標(biāo)題內(nèi)容的對(duì)應(yīng)關(guān)系實(shí)現(xiàn)切換功能。

4? 結(jié)? 論

作為互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，HTML5能幫助程序員快速開發(fā)功能強(qiáng)大、用戶體驗(yàn)良好的系統(tǒng)，由于篇幅限制，本文只介紹了常用輪播圖、可折疊菜單、自動(dòng)切換選項(xiàng)卡等功能實(shí)現(xiàn)，input新增元素的使用、兼容移動(dòng)端程序設(shè)計(jì)等內(nèi)容以后再介紹。

參考文獻(xiàn)：

[1] 莫小梅，毛衛(wèi)英.網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)案例教程——HTML5、CSS3、JavaScript [M].北京：清華大學(xué)出版社，2019.

[2] 馬科.HTML5 App商業(yè)開發(fā)實(shí)戰(zhàn)教程 [M].北京：高等教育出版社，2016.

[3] 黑馬程序員.HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作 [M].北京：人民郵電出版社，2020.

[4] 黑馬程序員.網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程 [M].北京：人民郵電出版社，2017.

[5] 閆睿.DIV+CSS網(wǎng)站布局案例精粹：第2版 [M].北京：清華大學(xué)出版社，2015.

作者簡(jiǎn)介：陳趙云（1982.05—），男，漢族，江西豐城人，講師，碩士研究生，研究方向：物聯(lián)網(wǎng)技術(shù)應(yīng)用、Web系統(tǒng)開發(fā)。

收稿日期：2022-10-13