ステップバーCSS-フロントエンドQ&A-php.cn

ステップバーCSS

WBOY

リリース： 2023-05-21 09:50:07

オリジナル

1750 人が閲覧しました

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 サイトの他の関連記事を参照してください。