如何在HTML中设计步骤进度条，使⽤纯CSS制作步骤进度条步骤进度条的使⽤场景很多，⽐如说购物流程 、订单流程、⾯试流程等都要⽤到它。⽹上常见的做法是使⽤CSS图⽚精灵，该做法的优点是兼容性强，但缺点也很明显：难以⾃适应设备，⽽且会加载额外的 图⽚资源。有没有更好⼀点的办法呢？下⾯实例将使⽤纯CSS来制作⾯试步骤进度条。
其实现⽅法很简单，只需使⽤:before选择器在每⼀步对应li元素添加圆形步骤数字，使⽤:after选择器在其后⾯添加连接线。步骤进度条⼀般有三种状态：
已经完成的状态
当前正在进⾏的状态
未完成的状态
本实例中我们简单将已经完成的状态和正在进⾏的状态设置成同样的样式：数字及连接线变绿，将对于未完成的状态数字及连接线变灰。当前步骤对应steps li.active，那么已经完成的步骤则对应steps li.active ~ li。此处⽤到CSS3中的~选择器来匹配当前 元素之后的所有li兄弟元素。如下⾯CSS代码：
.steps {
position: relative;
margin-bottom: 100px;
counter-reset: step;/*创建步骤数字计数器*/
}
/*步骤描述*/
.steps li {
list-style-type: none;
font-size: 12px;
text-align: center;
width: 25%;
position: relative;
color: #777;
z-index: 2;
float: left;
}
/*步骤数字*/
.steps li:before {
display: block;
content: counter(step);/*设定计数器内容*/
counter-increment: step;/*计数器值递增*/
width: 32px;
height: 32px;
background-color: #777;
line-height: 32px;
border-radius: 32px;
font-size: 16px;
color: #fff;
text-align: center;
font-weight: 700;
margin: 0 auto 8px auto;
}
/*连接线*/
.steps li:after {
content: '';
width: 100%;
height: 4px;
background-color: #777; position: absolute;
left: 0;
top: 15px;
z-index: -1;/*放置在数字层后⾯*/ }
/*连接线放置在数字层后⾯*/
.steps li:first-child {
z-index: 3;
}
.steps li:last-child {
z-index: 1;
}
/*去掉第⼀步多出的连接线*/
.steps li:first-child:after { width: 50%;
left: 50%;
}
/*去掉最后⼀步多出的连接线*/
.steps li:last-child:after { width: 50%;
}
/*完成步骤变绿*/
.steps li.active:before {
background-color: #019875;
}
.steps li.active {
css去掉滚动条color: #019875;
}
.steps li.active:before,
.steps li.active:after {
background-color: #019875;
}
相应的HTML代码：
投递成功
简历被查看
待沟通
⾯试
设置steps和active样式类就⾏了，是不是很简单？⽽且是适配移动设备的，很强⼤吧？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。