ステップ進捗バーは、ショッピングプロセス、注文プロセス、面接プロセスなど、多くのシナリオで使用されます。インターネットでは CSS 画像スプライトを使用するのが一般的ですが、このアプローチの利点は互換性が高いことですが、デバイスに適応するのが難しく、追加の画像リソースが読み込まれるという欠点も明らかです。もっと良い方法はありますか？次の例では、純粋な CSS を使用して、インタビュー ステップの進行状況バーを作成します。
まずはここをクリックして効果を確認してください。
実装方法は非常に簡単で、:before セレクターを使用して各ステップの li 要素に対応する円形のステップ番号を追加し、:after セレクターを使用してその後ろに接続線を追加するだけです。ステップ進行状況バーには通常、次の 3 つの状態があります。
この例では、完了ステータスと進行ステータスを同じスタイルに設定するだけです。番号と接続線が緑色に変わり、未完了ステータスの番号と接続線が灰色に変わります。現在のステップはステップ li.active に対応し、完了したステップはステップ li.active ～ li に対応します。 CSS3 の ~ セレクターは、現在の要素の後のすべての兄弟要素と一致するために使用されます。たとえば、次の CSS コード:
.steps { position: relative; margin-bottom: 30px; counter-reset: step; /*创建步骤数字计数器*/}/*步骤描述*/.steps li { list-style-type: none; font-size: 12px; text-align: center; width: 25%; position: relative; float: left;}/*步骤数字*/.steps li:before { display: block; content: counter(step); /*设定计数器内容*/ counter-increment: step; /*计数器值递增*/ width: 32px; height: 32px; background-color: #019875; line-height: 32px; border-radius: 32px; font-size: 16px; color: #fff; text-align: center; font-weight: 700; margin: 0 auto 8px auto;}/*连接线*/.steps li ~ li:after { content: ''; width: 100%; height: 2px; background-color: #019875; position: absolute; left: -50%; top: 15px; z-index: -1; /*放置在数字后面*/}/*将当前/完成步骤之前的数字及连接线变绿*/.steps li.active:before,.steps li.active:after { background-color: #019875;}/*将当前/完成步骤之后的数字及连接线变灰*/.steps li.active ~ li:before,.steps li.active ~ li:after { background-color: #777;}対応する HTML コード:
<ul class="steps"> <li>投递成功</li> <li class="active">简历被查看</li> <li>待沟通</li> <li>面试</li></ul>
ステップとアクティブなスタイル クラスを設定するだけです。非常に簡単ではないでしょうか。モバイルデバイスにも対応しており、非常に強力ですよね?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
