Rumah > Artikel > hujung hadapan web > CSS3多步骤进度条的实现原理(附代码）

CSS3多步骤进度条的实现原理(附代码）

高洛峰asal: 2018-05-15 11:30:365996semak imbas

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

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

效果图：

CSS3多步骤进度条的实现原理(附代码）

代码展示：

<!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://www.php.cn/) 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>

Atas ialah kandungan terperinci CSS3多步骤进度条的实现原理(附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css3

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：分享CSS3的perspective属性设置3D变换距离的示例方法Artikel seterusnya：使用CSS3实现Material Design效果的方法

Artikel berkaitan

Lihat lagi