CSS3箭头步骤条可以使我们的网页看起来更加美观,它能够帮助我们有效地组织内容,帮助用户更好地完成一些操作。下面我们来看看如何使用CSS3来制作箭头步骤条:
<ul class="step"> <li class="active">第一步</li> <li>第二步</li> <li>第三步</li> <li>完成</li> </ul> <style> .step { display: flex; justify-content: space-between; align-items: center; list-style-type: none; margin: 0; padding: 0; width: 100%; position: relative; } .step:before,.step:after { content: ""; display: block; position: absolute; top: 50%; border-top: 2px solid #ccc; width: 50%; z-index: -1; } .step:before { left: 0; } .step:after { right: 0; } .step li { text-align: center; flex-basis: 20%; font-size: 16px; position: relative; z-index: 1; } .step li:after { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: #ccc; margin: 0 auto; position: absolute; bottom: -20px; left: 0; right: 0; z-index: 1; } .step li.active:after { background: #ff6f61; } .step li:first-child:before { display: none; } .step li:last-child:after { display: none; } </style>
我们使用了一个无序列表来表示步骤条,每个步骤都用一个li标签表示。在CSS样式中,我们给ul元素设置了一些flex布局属性,让li元素排列在一条直线上,然后使用:before和:after伪元素来创建了两条竖线,这两条竖线利用绝对布局定位在列表的两端。
每个li元素的宽度是20%,这样可以让四个步骤占据整个容器的宽度。我们给每个li元素设置了一个圆点,这个圆点使用了after伪元素来实现。第一个步骤和最后一个步骤的竖线和圆点通过:first-child和:last-child选择器来分别设置了不同的样式。
最后,我们通过给当前步骤添加一个.active类来改变它的样式,让它的圆点变成了红色,让用户更加清晰地知道当前所在的步骤。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。