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

今天在工作的时候写了一个多步骤进度条的代码，在此跟大家分享一下！

效果图：

代码展示：

!DOCTYPE htML>
    html lang="en">
    head>
        meta charset="UTF-8">
        tITle>
    step/title>
    /head>
    style>
    ul,li{
    list-style:none;
}
    .flow_steps{
    height:55px;
    width:1000px;
    margin: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.COM2.z0.glb.qiniucdn.com/stepbg.png) no-repeat 100% 0 #E4E4E4;
    font-family: "microsoft yahei";
    color:#6C6C6C;
}
    .flow_steps ul li.done {
     background-position:100% 0px;
     background-color:#E1E1E1;
}
    .flow_steps ul li.current_prev {
     background-position:100% -55px;
     background-color:#E1E1E1;
}
    .flow_steps ul li.current {
     color:#fff;
     background-color:#DD4D3C;
}
    .flow_steps ul li.last {
     background-image: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_PRev ">
                第一步        /li>
            li class=" current">
                第二步        /li>
            li class=" ">
                第三步        /li>
            li class=" last">
                第四步        /li>
        /ul>
    /div>
    /body>
    /html>
    

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！