多步骤进度条的实现原理及代码

很多分步骤的流程都会有一个多步骤进度条,很直观的显示用户每一步的操作状态,像淘宝的购物流程 其实现方法其实很简单,只需要把每一步分隔处的箭头切下来,然后灵活利用background-image和background-color来实现,像这样的多步骤进度条一般有三种状态: 已经完成的状态(done) 当前正在进行的状态(current) 未完成的状态(default) 我们可以针对这三种状态给HTML结构标签加不同的类来定义样式 下面整理了两个demo Demo 1:纯色块式 定义结构代码: 复制代码代码如下: <li