基于HTML5的Web站點設計與實現

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

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

中圖分類號：TP393? 文獻標識碼：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橫空出世完美契合了移動互聯時代Web站點須兼容PC端和移動端的要求，所以被稱為互聯網的下一代標準。目前主流的門戶網站或者電商網站都具有輪播圖、可折疊導航菜單、自動切換選項卡等功能，綜合運用HTML5新增的控件元素、CSS 3.0和JavaScript，可以幫助開發人員快速高效的實現上述功能，設計出功能強大、新穎獨特的站點。本文可作為HTML5初學者的入門參考資料，也可為進階學員提供功能點技術支持。

1? 功能概述

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

（1）導航欄：導航欄由div+ul+css 3.0實現，鼠標移到對應欄則該欄目突出顯示。

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

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

2? 案例實現

2.1? 創建名為WebArticle的站點

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

2.2? 導航欄實現

站點導航欄由div+ul+css 3.0實現，鼠標移到對應欄則該欄目突出顯示，效果如圖2所示。

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

第二步：在標簽之間插入樣式代碼，樣式代碼寫在之間，導航標簽樣式代碼如下：

*{padding： 0; margin： 0;}/*網頁標簽統一初始化*/

#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? 輪播圖功能實現

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

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

第二步：在之間寫入輪播圖的樣式代碼，初始狀態時第一張圖不透明而其他圖都是透明狀態，所有圖都是絕對地址且堆疊在一起，輪播圖標簽樣式代碼如下：

#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;}

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

2.4? 主體部分功能實現

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

2.4.1? 左側可折疊菜單功能實現

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

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

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

#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? 右側選項卡面板功能實現

主體右側是div+css+JavaScript實現的自動切換選項卡內容展示區域，鼠標移到對應的選項卡則顯示該選項卡下的內容，效果如圖5所示。

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

第二步：針對布局標簽編寫樣式，具體樣式代碼如下：

#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腳本以實現選項卡切換功能，代碼如下：

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? 頁腳部分功能實現

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

3? 程序說明

關于程序的說明如下：

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

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

（3）在選項卡切換菜單中，代表標題的tabList下的項和代表內容的tabCon下的項數目務必保持相等才能一一對應，通過設置標題項一般狀態和鼠標移入時的不同樣式達到區分活動選項卡的目的，再通過JavaScript腳本實現標題項與標題內容的對應關系實現切換功能。

4? 結? 論

作為互聯網的下一代標準，HTML5能幫助程序員快速開發功能強大、用戶體驗良好的系統，由于篇幅限制，本文只介紹了常用輪播圖、可折疊菜單、自動切換選項卡等功能實現，input新增元素的使用、兼容移動端程序設計等內容以后再介紹。

參考文獻：

[1] 莫小梅，毛衛英.網頁設計與Web前端開發案例教程——HTML5、CSS3、JavaScript [M].北京：清華大學出版社，2019.

[2] 馬科.HTML5 App商業開發實戰教程 [M].北京：高等教育出版社，2016.

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

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

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

作者簡介：陳趙云（1982.05—），男，漢族，江西豐城人，講師，碩士研究生，研究方向：物聯網技術應用、Web系統開發。

收稿日期：2022-10-13