基于HTML5+CSS3的气泡式导航的实现
作者：杨梅
来源：《电脑知识与技术》2020年第33期
作者：杨梅
来源：《电脑知识与技术》2020年第33期
摘要：导航是网页设计中的重要组成内容之一。应用HTML5设计网页过程中，恰当设置css属性可以实现特殊效果的导航菜单。该文在分析HTML5和CSS3技术优势特点上，以某一注册页面气泡式导航为例分析其实现原理，阐述其实现过程的关键代码，为其他技术人员提供参考。
关键词：HTML5;CSS3;气泡式导航
中图分类号：TP311 文献标识碼：A
文章编号：1009-3044（2020）33-0220-02
开放科学（资源服务）标识码（OSID）：
导航菜单是网页设计中的重要组成内容之一。通过导航，用户可以快速浏览访问到所需要
的内容[1]。在HTML5中恰当设置css属性可以实现各种效果的导航菜单。在浏览网页（例如一些注册页面）时，我们经常会看到把鼠标放到导航上时，下面会出现小三角，当鼠标离开时，小三角随之消失，这一类的导航称为气泡式导航。本文在分析HTML5和CSS3技术优势特点上，以某一注册页面气泡式导航为例分析其实现原理，阐述了实现过程的关键代码，为其他网页设计人员提供参考。
1 HTML5概述
作为当前主流的Web前端开发技术，与HTMLI相比，HT-ML5的功能更加强大，对网页设计开发支持的力度更加强大，支持网页的功能更加全面[2]，主要体现在统一规范处理语义，新增等语义化标签和属性，如、和的autofocus属性等，降低代码编写难度，简化开发程序，提高工作效率;提供强大而全面的API支持，来实现更加复杂多变的网页功能;无须任何特定工具和插件，HTML5通过设置自带的audio标签和video标签，就可以实现网页中音视频的顺利播放;新增canvas元素可绘制图像、制作动画。
2 CSS3概述
css（ Cascading Style Sheets）即层叠样式表，是用于控制网页显示效果的技术[3]，其可以有效地控制网页的布局、字体、颜、背景和其他效果，美化网页。css3是css规范的最新版本，在css2.1的基础上增加了很多强大的新功能，如圆角功能、多背景、透明度、阴影等，正是这些新的功能，完美地帮助开发人员解决一些以前需要用复杂的JavaScript脚本、非语义标签才能完成的功能[4];其优势主要体现在增加边框属性，用border-color设置边框颜，border-image设置边框图像，border-radius设置边框圆角，可以分别设置边框上、下、左、右四个方向不同属性，实现网页边框的线条感和立体感;设置CSS3属性实现渐变，让网页效果绚丽多变;运用CSS3强大的Animation属性设置图像的缩放、旋转等，实现网页中的动画效果;借助CSS3中的RGBA命令能够更改或重设元素的彩与透明度，更易实现网页元素彩等等。此外，在CSS3中给出伪元素的概念，是用来创建一些文档语言无法生成的虚拟元素[5]。比如运用：：before描述在特定元素之前添加内容，运用：：first-line描述特定元素的第一行文本等。
随着网络技术的深入发展，网页设计与制作人员会综合HTML5和CSS3技术优势，以实现丰富多彩的网页效果。常见的有利用HTML5+CSS3技术进行响应式页面布局，让不同终端设备的用户获得更舒适的界面、更友好的体验;在HTML5+CSS3技术基础上结合Jsp脚本语
言实现页面跨浏览器设计等。
3 实现原理
3.1功能描述
气泡式导航具有一定的指示性，表现为当鼠标移动到导航某一栏目上时，相应栏目下面会有一个突起的小三角，指向特定的内容;鼠标离开后，该栏目还原为初始的状态。常用在一些注册页面、电商页面某一频道栏目等。本文设计的是某一注册页面的气泡式导航，其在谷歌浏览器下预览效果，如图所示。
3.2 关键技术
实现该气泡式导航关键之处有两点：一是导航下方突起的小三角，二是鼠标滑到导航栏目时，出现小三角;鼠标离开后，恢复原始状态。本文运用CSS3设置边框制作小三角，结合伪元素来实现，可分解为以下四步：
第一步：生成三角形。将当前元素显示为块状元素，宽、高设置为0，设置border属性的大小（依据三角形大小确定）、线型是实线、颜透明。
第二步：显示指定方向的三角形。该气泡式导航需要取出下方的三角形，只需设置上边框的颜，显示指向下方的三角形。在网页设计过程，根据实际需要设置上、下、左、右不同方向的三角形，设置下边框颜显示指向上方的三角形，设置左边框颜显示指向右方的三角形，设置右边框颜显示指向左方的三角形。
第三步，确定小三角位置。将position属性设为relative，left属性中间偏左一些，相对当前元素位置居中显示。
第四步，鼠标滑过出现三角形，鼠标移开，小三角消失。当鼠标滑到导航栏目时，在a：hover后添加：：after伪元素，在其后插入小三角。伪元素是虚拟元素，在文档中不存在，当鼠标移开导航后，小三角就自动消失了。
4 实现过程
在HTML5页面中应用气泡式导航时，先确定设置气泡式导航的版块，在其中插入无序列表制作导航栏，然后创建样式，定义合适的选择器美化列表，最后对于实现特定效果，设置合适属性。
4.1设置导航栏目
在HTML5页面的<cke：body>内的某一栏目或版块内，插入无序列表<ul>，每一列<li>内添加导航栏目，运用<a>设置超链接。参考HTML代码如下：
<ul>
<li><a data-cke-saved-href=”#” href=”#”>1验证身份信息<，a></li>
<li><a data-cke-saved-href=”#” href=”#”>2设置用户信息</a></li>
<li><a data-cke-saved-href=’’#” href=’’#”>3完成</a></li>
</ul>
4.2 美化導航栏目
创建<style>，在其内定义合适的选择器，如标签选择器或类选择器，美化列表：设置css属性清除列表默认样式，居中等;美化列表项：设置CSS属性向左浮动，让列表项水平呈
css实现三列布局现，宽度（所有列表项宽度和小于列表总宽度），背景，文本颜，文本居中，列表项居中等。参考HTML代码定义的标签选择器，如下：
ul{
/*无序列表样式*/
list-style： none;/$清除默认样式*/
margin：0 auto;/*居中*/
width： 6lOpx;}/*列表宽*/
ul lif
/*每一列样式*/
float： left;/*左浮动*/
width： 200px;/*宽度*/
height： 30px;/*高度* /
background-color：#C7C3C3：/*背景*/
color： #000;/*文本颜*/
text-align： center;/*文本居中*/
margin：0 lpx;/*居中*/
line-height： 30px;】/*行高*/
4.3 创建导航超链接样式
在上面的<style>标签内，运用CSS3美化超链接：显示为块状，宽度和高度（与列表项宽高一样），清除超链接默认样式等;设置鼠标移动到超链接上背景和文本颜，并添加：：after伪元素，在列表项中间生成指向下方的小三角。参考HTML代码如下：
ulli a{
display： block;/*显示为块状元素*/
width： 200px; /*宽度*/
height： 30px; / *高度*/
text-decoration： none;/*去除下划线*/
color： #000;1/*文本颜*/
ul li a：hoverf
background-color： #0195d3;/*背景*/
color： #fff;】/*文本颜*/
ul li a：hover：：after{/*鼠标滑到导航栏目，出现小三角*/
display：block;/*显示为块状元素*/
content：…’;/* 添加元素*/
width：0：
height：0;
border： 8px solid transparent;
border-top-color： #0195d3;/*生成下方小三角*/
position：relative;
left： 46%;1/*小三角居中*/
5 结束语
本文应用HTML5+CSS3技术所设计的气泡式导航代码简单，扩展性好，在实际工作中，网页制作人员可以根据实际情况调整、完善相关语句，以实现适合自身网页的导航效果。当前，HT-ML5与CSS3的有机结合在网页设计与制作领域占据着重要的位置，为广大网页设计人员拓展了网页设计视觉处理空间，提升了网页制作效率。同时，面对互联网技术的迅速发展，广大网页设计入员也要从浏览网页用户体验出发，巧妙运用HTML5+CSS3设计
出界面更加友好、交互性更强的网页作品。
参考文献：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论