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

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

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

1? 功能概述

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

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

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

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

2? 案例實現(xiàn)

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

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

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

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

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

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

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

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

ul{list-style： none;}/*下面幾個無序列表一起生效*/

#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? 輪播圖功能實現(xiàn)

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

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

第二步：在之間寫入輪播圖的樣式代碼，初始狀態(tài)時第一張圖不透明而其他圖都是透明狀態(tài)，所有圖都是絕對地址且堆疊在一起，輪播圖標(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;}

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

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

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

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

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

第一步：在輪播圖div后面插入一個新div設(shè)定id為main，在里面插入兩個div，id分別設(shè)定為mainLeft和mainRight，在mainLeft下面用無序列表嵌套有序列表的方式設(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àn)

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

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

第二步：針對布局標(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腳本以實現(xiàn)選項卡切換功能，代碼如下：

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? 頁腳部分功能實現(xiàn)

頁腳部分功能簡單，實現(xiàn)起來比較容易，此處省略。

3? 程序說明

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

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

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

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

4? 結(jié)? 論

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

參考文獻(xiàn)：

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

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

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

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

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

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

收稿日期：2022-10-13