基于HTML5+CSS3的气泡式导航的实现
2020-12-28杨梅
摘要：导航是网页设计中的重要组成内容之一。应用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页面的，每一列
4.2 美化導航栏目
创建