基于HTML5的Web站点设计与实现
2023-06-25陈赵云
摘 要：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
