CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip オンライン プロセス ナビゲーション効果には純粋な CSS を使用します。 この記事では、フレックスレイアウトを統一的に採用していますが、他のレイアウトを使用しても実現できます。コア原則は変わりません::: ## 方法 1: 切り取り この方法は IE ではサポートされていません clip-path: polygon() を使用して三角形を直接描画します。計算する必要があるのは、おおよそのパーセンテージだけです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <meta name="ビューポート" content="width=デバイス幅"> <スタイル> .nav-box { ディスプレイ: フレックス; リストスタイル: なし; フォントサイズ: 14px; } .nav-box li { 空白: ラップなし; 色: #019fe9; 背景: #edf9ff; カウンター増分: listCounter; クリップパス: ポリゴン(87% 0, 100% 50%, 87% 100%, 0 100%, 13% 50%, 0 0); 行の高さ: 40px; パディング: 0 25px; 右マージン: -10px; } .nav-box li::before { コンテンツ: counter(listCounter) "-"; } .nav-box .active { 色: #fcfefe; 背景: #009fe9; } .nav-box .active ~ li { 色: #8e8e8e; 背景: #ebedf0; } </スタイル> </head> <本文> <!-- コンテナ --> <ol class="nav-box"> <li><a href="">ルールの説明</a></li> <li><a href="">イベントに参加する</a></li> <li class="active" aria-current="true"><a href="">抽選に参加する</a></li> <li><a href="">賞品の配布</a></li> <li><a href="">結果を表示</a></li> </ol> </本文> </html> ## 方法 2: 転位を使用する flex + transform : skewX(); は ie9+ でプレフィックス -ms- を実装します + このメソッドは before と after も完全に活用します。 + 原則 1 --- before + after を使用して上半分と下半分に分割します <Badge text="[このメソッドには、最初の末尾を別々に完了する必要があるという欠陥があります]" type="warn"/> + 原則 2 --- before + after を使用して左半分と右半分に分割します <Badge text="[このメソッドは、最初の before または after のみを処理して、最初の問題を回避する]" type="success"/> <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <meta name="ビューポート" content="width=デバイス幅"> <スタイルスコープ> .nav-box { ディスプレイ: フレックス; リストスタイル: なし; フォントサイズ: 14px; } .nav-box li { 空白: ラップなし; 色: #019fe9; パディング: 0 15px 0 25px; 行の高さ: 40px; 左マージン: 3px; 位置: 相対的; zインデックス: 99; } .nav-box li:最初の子{ 背景: #edf9ff; 右マージン: 7px; } .nav-box .active:first-child{ 背景: #019fe9; } .nav-box li:first-child::before, .nav-box li:first-child::after{ 左: 7px; } .nav-box li::before, .nav-box li::after { コンテンツ: ""; 位置: 絶対; 左: 0; 高さ: 50%; 幅: 100%; 背景: #edf9ff; Zインデックス: -1; } .nav-box li::before { 上: 0; 変換: skew(30deg); } .nav-box li::after { 下部: 0; 変換: skew(-30deg); } .nav-box .active { 色: #d7effb; } .nav-box .active::before, .nav-box .active::after { 背景: #009fe9; } .active ~ li { 色: #909091; } .active ~ li::before、 .active ~ li::after { 背景: #ebedf0; } </スタイル> </head> <本文> <!-- コンテナ --> <ol class="nav-box"> <li class="active">1-ルールの説明</li> <li>2- 活動に参加する</li> <li>3- 抽選に参加する</li> <li>4- 賞品の配布</li> <li>5-参加結果</li> </ol> </本文> </html> ## 方法 3: 境界線の三角形 前面と背面の三角形を生成するには、border を使用します。欠点は、インデックスを自分で定義する必要があることです。CSS カウンターはラベルなしでは使用できません。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <meta name="ビューポート" content="width=デバイス幅"> <スタイル> .nav-box{ 高さ:40px; 行の高さ:40px; リストスタイル: なし; パディング:0; ディスプレイ:フレックス; フォントサイズ:14px; オーバーフロー: 非表示; } .nav-box li{ パディング:0 10px 0 10px; 右マージン: 18px; 空白: ラップなし; 位置:相対; 色:#019fe9; 背景:#edf9ff; } /* 三角形 */ .nav-box li:before、.nav-box li:after{ コンテンツ:''; 位置:絶対; 幅: 0; 高さ: 0; } .nav-box li:before{ 右: -16px; 境界線: 透明な実線; 境界線の幅: 20px 0 20px 16px; 左境界線の色:#edf9ff; zインデックス:2; } /* 白線 */ .nav-box li:after{ 上: -3px; 左: -18px; 境界線: 実線 #edf9ff; 境界線の幅: 23px 0 23px 18px; 左境界線の色: 透明; zインデックス: 1; } .nav-box .active{ 色: #fff; 背景:#009fe9; } .nav-box .active ~ li{ 色:#8e8e8e; 背景:#ebedf0; } .nav-box .active:before{ 左境界線の色:#009fe9; } .nav-box .active:after{ 境界線の色: #009fe9; 左境界線の色: 透明; } .nav-box .active ~ li:before{ 左境界線の色:#ebedf0; } .nav-box .active ~ li:after{ 境界線の色: #ebedf0; 左境界線の色: 透明; } </スタイル> </head> <本文> <ol class="nav-box"> <li>1-ルールの説明</li> <li>2- 活動に参加する</li> <li class="active">3- 抽選に参加する</li> <li>4- 賞品の配布</li> <li>5-参加結果</li> </ol> </本文> </html> 要約する 上記は、エディターが紹介したプロセスナビゲーション効果(3つの方法)のCSS実装です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます! |
<<: MySQL 分離列とプレフィックスインデックスの使用の概要
>>: Docker ベースの ELK ログ システムを構築する方法
FTP は主にファイル転送に使用され、Linux では vsftpd で実装されるのが一般的です。F...
サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...
目次1. ハッシュテーブルの原理2. ハッシュテーブルの概念3. ハッシュ競合問題1. チェーンアド...
mysql-5.7.20-winx64.zipインストール手順のないインストール パッケージ: ht...
Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...
1. 改行を強制せず、省略記号で終了します。コードをコピーコードは次のとおりです。 <div ...
まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...
replace ステートメントは、一般的に insert ステートメントに似ています。ただし、テーブ...
mysqladmin ツールの使用形式は次のとおりです。 mysqladmin [オプション] コ...
ドロップダウン メニューやスライド メニューを使用している Web サイトをたくさん見つけたので、私...
ページの公開名: #wrapper - ページの外側の端が全体のレイアウト幅を制御します#conta...
序文開発中は、インターフェース要求の繰り返しによってさまざまな問題が発生することがよくあります。ネッ...
Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...
目次1. シーンレイアウト2. ハンドルリスナーを追加する1. イベントの変更を監視する2. 座標設...
序文この記事では、MySQL 5.7 グリーン バージョンのインストール チュートリアルを紹介します...