cari

Rumah  >  Artikel  >  hujung hadapan web  >  css+div多步骤进度条的实现代码

css+div多步骤进度条的实现代码

不言
不言asal
2018-06-28 13:58:061682semak imbas

本篇文章主要介绍了多步骤进度条的实现原理及代码，具有很好的参考价值。下面一起来看下吧

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

效果图：

代码展示： 

<!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>
<p 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>
</p>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

Atas ialah kandungan terperinci css+div多步骤进度条的实现代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php css
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：用js实现的抽象的CSS圆角效果Artikel seterusnya：CSS实现网页背景渐变的四种代码设置

Artikel berkaitan

Lihat lagi