使用纯css制作简易步骤流程_html/css_WEB-ITnose-HTML Tutorial-php.cn

使用纯css制作简易步骤流程_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:54:19

Original

1729 people have browsed it

步骤进度条的使用场景很多，比如说购物流程、订单流程、面试流程等都要用到它。网上常见的做法是使用CSS图片精灵，该做法的优点是兼容性强，但缺点也很明显：难以自适应设备，而且会加载额外的图片资源。有没有更好一点的办法呢？下面实例将使用纯CSS来制作面试步骤进度条。

先点击此处查看效果。

其实现方法很简单，只需使用:before选择器在每一步对应li元素添加圆形步骤数字，使用:after选择器在其后面添加连接线。步骤进度条一般有三种状态：

已经完成的状态
当前正在进行的状态
未完成的状态

本实例中我们简单将已经完成的状态和正在进行的状态设置成同样的样式：数字及连接线变绿，将对于未完成的状态数字及连接线变灰。当前步骤对应steps li.active，那么已经完成的步骤则对应steps li.active ~ li。此处用到CSS3中的~选择器来匹配当前元素之后的所有li兄弟元素。如下面CSS代码：

.steps {  position: relative;  margin-bottom: 30px;  counter-reset: step;  /*创建步骤数字计数器*/}/*步骤描述*/.steps li {  list-style-type: none;  font-size: 12px;  text-align: center;  width: 25%;  position: relative;  float: left;}/*步骤数字*/.steps li:before {  display: block;  content: counter(step); /*设定计数器内容*/  counter-increment: step;  /*计数器值递增*/  width: 32px;  height: 32px;  background-color: #019875;  line-height: 32px;  border-radius: 32px;  font-size: 16px;  color: #fff;  text-align: center;  font-weight: 700;  margin: 0 auto 8px auto;}/*连接线*/.steps li ~ li:after {  content: '';  width: 100%;  height: 2px;  background-color: #019875;  position: absolute;  left: -50%;  top: 15px;  z-index: -1; /*放置在数字后面*/}/*将当前/完成步骤之前的数字及连接线变绿*/.steps li.active:before,.steps li.active:after {  background-color: #019875;}/*将当前/完成步骤之后的数字及连接线变灰*/.steps li.active ~ li:before,.steps li.active ~ li:after {  background-color: #777;}

Copy after login

相应的HTML代码：

<ul class="steps">  <li>投递成功</li>  <li class="active">简历被查看</li>  <li>待沟通</li>  <li>面试</li></ul>

Copy after login