ホームページ > 記事 > ウェブフロントエンド > CSS3マルチステッププログレスバーの実装原理（コード付き）
CSS3マルチステッププログレスバーの実装原理（コード付き）
- 高洛峰オリジナル
- 2018-05-15 11:30:365956ブラウズ
この記事では主に参考値の高い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>以上がCSS3マルチステッププログレスバーの実装原理（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。