拔高、提升、创新！

效果查看：一、搭建好html页面结构先在html页面中创建出一个盒子用于存放按钮和文字光一个大盒子还不够，用span标签来说明文字，i标签来表示单选框中间的那坨圆点，这些都用一个小盒子套住，这个小盒子用于勾勒单选框的边框。如图。这样html页面结构就完成了二、规划样式将小盒子的边框勾勒出来，再将各个元素的样式都做出来后初始状态如下，对了，千万别忘了给小盒子一个过渡效果的样式，否则后续的操作会没有动态效果哦~！三、移入效果纯css怎么达到一个拟点击效果，我这里选择是hover伪类，虽然

成品动态展示：想要达到这种效果，实际上非常简单！只需要有一点html跟css的基础即可！1、 页面布局页面的布局通常用一个div嵌套住里面显示线条的元素线条的显示使用什么标签都行（推荐用li标签）；这样页面上的布局也就完成了接下来着重说明css部分2、css样式编写首先给这些标签一些基础样式其中比较重要的一个属性是text-align，我们需要将内容显示的线条元素居中在后续的操作中先写上，以免写到后面倒回来写这串代码上图作用：主要是将ul标签跟li标签自带的属性清除一下，再者就是将大

开发工具与关键技术：开发工具DW、vs code,关键技术html、css。实现的效果：鼠标移入按钮时按钮中的内容就会出现，分别展示不同的出现效果。效果难点：不使用JavaScript，那这个效果的难点就是在于:hover伪类的掌控，以及考验对html的结构掌握。1、 html布局在你想要的位置制作出5个导航栏按钮，或者更多。这就是html结构中的样子，下面来分析这种结构的意义；·整个导航栏就是一个菜单，表面上的就是一级菜单。·一级菜单里的内容就是二级菜单；·一级菜单复制了多个之后就是导