今天在工作的时候写了一个多步骤 进度 条的代码，在此跟大家分享一下！
效果图：
代码展示：
<!DOCTY PE ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<t IT le>step</title>
</head>
<style>
ul,li{list -s tyle:none;}
.flow_steps{h ei ght:55px;width:1000px;m arg in:100px auto;}
.flow_steps .steps{padding-left:0;}
.flow_steps ul li { float:left; height:55px; padding:0 70px 0 50px; line-height:55px; text-align: center ; background:url(http://7xnlea .COM 2.z0.glb.qiniucdn测试数据/stepbg.png) no-repeat 100% 0 # E4E4E4;font-f ami ly: "microsoft yahei";color:#6C6C6C;}
.flow_steps ul li.done { background-position:100% 0px; background-color:#E1E1E1;}
.flow_steps ul li. current _p rev { background-position:100% -55px; background-color:#E1E1E1;}
.flow_steps ul li.current { color:#fff; background-color:#DD4D3C;}
.flow_steps ul li.last { background -i mage:none;}
.flow_steps ul li. First { border-radius:10px 0 0 10px; }
.flow_steps ul li.last { border-radius:0 10px 10px 0; }
</style>
<body>
<div class="flow_steps clearfix">
<ul class="clearfix steps">
<li class=" done first current_ PR ev ">
第一步
</li>
<li class=" current">
第二步
</li>
<li class=" ">
第三步
</li>
<li class=" last">
第四步
</li>
</ul>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习 或者 工作能带来一定的帮助，同时也希望多多支持！
总结
以上是 为你收集整理的 多步骤进度条的实现原理及代码 全部内容，希望文章能够帮你解决 多步骤进度条的实现原理及代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did204497