ステップバーCSS

Web デザイン プロセスでは、特に複数ステップのフォームやショッピング プロセスにおいて、ステップ バーがユーザー操作のナビゲーション要素としてよく使用されます。ステップバーを作成するには、通常、CSS テクノロジーを使用する必要があります。この記事では、Web ページでステップ バーの効果を簡単に実現できる、ステップ バーを作成するための CSS 方法をいくつか紹介します。

方法 1: 順序なしリストを使用する

順序なしリスト (<ul>) は、ステップ バーを作成する一般的な方法の 1 つです。コードは次のとおりです:

<ul class="step">
  <li class="active">Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ul>

CSS では、次のコードを使用してステップ バーのスタイルを制御できます:

.step li{
  list-style:none;
  display:inline-block;
  width:30px;
  height:30px;
  background:#fff;
  color:#555;
  text-align:center;
  line-height:30px;
  border-radius:50%;
  margin-right:10px;
  position:relative;
}
.step li.active:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid #3c8dbc;
  position:absolute;
  top:10px;
  left:-10px;
}
.step li.active:after {
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#3c8dbc;
  top:7px;
  left:7px;
}

このコードは、ステップ バーのテキストのスタイルを制御し、選択されていますそれぞれ状態。このうち、.step li 部分は、インラインのブロックレベル要素としての表示、幅と高さ、背景色、テキストの水平方向と垂直方向の中央揃え、角丸と間隔など、順序なしリスト項目のスタイルを定義します。 etc.; .step li.active:before および .step li.active:after は、選択したステップ項目のスタイルを定義します。 :before および :after セレクターを使用すると、選択した項目の左側に矢印と点を追加できます。

方法 2: フレックス レイアウトを使用する

フレックス レイアウトは、Web デザインにおける複雑なレイアウト要件をより適切に実現できる最新の CSS レイアウト テクノロジです。フレックス レイアウトを使用してステップ バーを作成します。コードは次のとおりです:

<div class="step flex">
  <div class="circle active">1</div>
  <div class="circle">2</div>
  <div class="circle">3</div>
</div>

CSS コードは次のとおりです:

.step.flex{
  display:flex;
  justify-content:space-between;
}
.circle{
  width:25px;
  height:25px;
  background:#fff;
  color:#555;
  border:2px solid #ccc;
  border-radius:50%;
  text-align:center;
  line-height:25px;
  position:relative;
}
.circle:after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ccc;
  top:9px;
  left:9px;
  display:none;
}
.circle.active{
  background:#3c8dbc;
  color:#fff;
  border-color:#3c8dbc;
}
.circle.active:after{
  display:block
}

このコードでは、フレックス レイアウトと justify-content# を使用します。 ##space-between に設定します。つまり、各円の間隔がコンテナの残りのスペースに均等に分散されます。 .circle および .circle.active セレクターを使用して円のスタイルを制御し、:after セレクターを使用して選択した円に小さな円を表示します。サークルポイント。

方法 3: ブートストラップ フレームワークを使用する

ブートストラップは、ステップ バーを作成するオプションなど、多くの便利な CSS および JavaScript コンポーネントを提供する人気のあるフロントエンド フレームワークです。 Bootstrap フレームワークを使用してステップ バーを作成するには、コードに Bootstrap CSS ファイルと JS ファイルを含める必要があります。その後、次のコードを使用してステップ バーを作成します。

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-step1-tab" data-toggle="pill" href="#pills-step1" role="tab" aria-controls="pills-step1" aria-selected="true">Step 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-step2-tab" data-toggle="pill" href="#pills-step2" role="tab" aria-controls="pills-step2" aria-selected="false">Step 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-step3-tab" data-toggle="pill" href="#pills-step3" role="tab" aria-controls="pills-step3" aria-selected="false">Step 3</a>
  </li>
</ul>

このコードでは

を使用します。 Bootstrap フレームワークの nav-pillsComponent であり、active 属性と data-toggle 属性を使用して選択状態とクリック効果を定義します。必要に応じて、設計ニーズを満たすために nav-pills コンポーネントでスタイル制御を実行できます。

概要:

ステップバーの作成にはさまざまなスタイル効果が必要ですが、CSS テクノロジーを使用してそれらを実現できます。 HTML 構造を定義し、CSS を使用してそのスタイルを制御するだけです。順序なしリスト、フレックス レイアウト、またはブートストラップ フレームワークを使用する場合でも、ステップ バーの作成は簡単かつ効果的です。この記事の紹介を通じて、Web ページに美しいステップ バー要素を簡単に追加できることを願っています。

以上がステップバーCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。