模倣京東携帯電話の充電進捗状況 Navigation_html/css_WEB-ITnose

このプロジェクトにはリチャージ機能が含まれる予定だったので、Jingdong のモバイル リチャージ プログレス バー ナビゲーションがかなり優れていると思いました

それで私も真似して作りましたが、それほど複雑ではなく、機能もありませんでしたたくさんの色。分析すると、この進行状況のナビゲーションの鍵は、CSS の :after セレクターを使用して実行できることがわかります。このメソッドは使用しないでください。書き込みメソッドは IE8 では無効になります。IE 8 以前の IE ブラウザでは、望む効果を正しく復元できません。IE8 より前の :after セレクターの正しい使い方を教えていただけないでしょうか。

最初に ul スタイルの progress-nav を定義します:

その中で、list-style:none は ul の各 li の前にある小さなドットを削除するために使用され、overflow:hidden は、ブラウザの幅が制限されている場合に見た目を美しくするために使用されます。 li にテキストを配置する場合、配置できないテキストを直接非表示にします。次に、各 li のスタイルを定義します。

li は相対位置を採用し、左にフローティングします。このデモでは 3 つの li を使用するため、li の幅は 32% として定義されます。これは li の数に応じて変更できます。テキストが収まる幅を指定することもできます。

次に、疑似要素を定義する重要な時期が来ます:

の後

疑似要素を絶対配置 (親ノード li に相当) に設定し、境界線を実線として定義し、境界線の色を透明として定義します。実際、表示されるのは親ノードの色です。これは、三角形の形状を定義する 15 ピクセルの 2 倍であり、疑似要素です。 12px の 2 倍、これは疑似要素の幅です。border-left-color は境界線の左側の色でもあり、これは表示される三角形の色です。長方形の左側の境界線は、次のように形成されます。三角形の左上隅、左下隅、中心を結びます。三角形が完成したら、それを li の外側に移動する必要があります。そのため、right は疑似要素の長方形の幅だけ右に 24 ピクセルオフセットされます。これを実行すると、現時点ではコンテンツが役に立ちます。これについては、コンテンツが :before および :after 擬似要素と組み合わせて使用​​されていることがわかります。ただし、これを実行しても効果がないことがわかります。疑似要素は次の li によってブロックされるため、z- を追加する必要があります。疑似要素を次の li で上書きするためのインデックス。

ここまで言って唾液も枯れてきたので、まずはレンダリングを見てみましょう

2. 注文情報の確認と確認の間に時間がないので、これでもすぐに動作しないことがわかります。 3. 支払います。はい、心配しないでください。プロセスは実際には非常に簡単で、2 つの li の間に白い線を追加するだけです。この場合、最初の li の後に各 li にスパンを追加する必要があります。次に、これらのスパンのスタイルを定義します。 :

スパンのスタイルは疑似要素と似ています。後は長さが似ていますが、色が異なります。スパンの左の境界線の色は白です。は絶対に母リーの左側に位置し、2 ピクセル右に移動します。これらの 2 ピクセルは、私のリーの間に白いバーが見えるようになります。白いバーを広くしたい場合は、span の左側の値を増やすだけです。

これらが完了したら、残るは現在アクティブな li のスタイルだけです:

同時に li の右側の疑似要素: after も必要です。それに応じて色を変更するには:

やっと完成しました。IE9 以降と他のほとんどのブラウザでは次のようになります

IE8 では次のようになります

見ないでください。 IE7 以下の IE では責任を持ってください 言っておきますが、それは本当に私が望んでいることではありません

最後に、みんなの便宜のためにスタイルクラス progress.css を添付します:

.progress-nav {    height: 30px;    margin-bottom: 10px;    list-style:none;    line-height: 30px;    text-align: center;    color: #7a91b2;    overflow: hidden;}    .progress-nav li.active {        color: #fff;        background: #5495ec;    }    .progress-nav li {        position: relative;        float: left;        width: 32%;        background: #bdcee6;    }        .progress-nav li:after {            content: "";            position: absolute;            border: solid transparent;            border-left-color: #bdcee6;            border-width: 15px 12px;            right: -24px;            z-index: 100;        }        .progress-nav li.active:after {            border-left-color: #5495ec;        }.progress-nav span {    position: absolute;    border: solid transparent;    border-left-color: #fff;    border-width: 15px 12px;    left: 2px;}

Web ページ上では比較的簡単です:

    <ul class="progress-nav">        <li class="active">            1.填写订单信息        </li>        <li>            <span></span>            2.确认订单信息        </li>        <li>            <span></span>            3.支付        </li>    </ul>

最後に拡張パーティにアタッチします サンプルコードに行きましょう: Progress Navigation example