ステップバーCSS

Web デザインでは、ステップ バーは一般的なナビゲーション要素であり、ユーザーが現在の場所と次のステップをよりよく理解するのに役立ちます。この記事ではCSSを使って簡単なステップバーを作成する方法を紹介します。

まず、次のようなステップを含むリストが必要です:

<ul>
  <li>步骤一</li>
  <li>步骤二</li>
  <li>步骤三</li>
  <li>步骤四</li>
</ul>

次に、ステップ バーにスタイルを追加する必要があります。まず、次の基本スタイルをリストに追加します。

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

この CSS コードは、リストのデフォルト スタイルを削除し、フレックス レイアウトに設定します。同時に、リスト項目がコンテナー内に均等に分散されるように、justify-content プロパティを space-between に設定します。

次に、リスト項目のスタイルを設定し、円と数字を追加する必要があります。以下はスタイル コードです:

li {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #fff;
  position: relative;
}
li:before {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  height: 1px;
  width: 50%;
  background-color: #ccc;
}
li:first-child:before {
  display: none;
}
li.active {
  background-color: #f00;
}
li.active:before {
  background-color: #f00;
}

その中で、リスト項目の幅と高さを設定し、それを円に設定します。また、テキストの配置、フォントの太さ、色、行の高さなどのプロパティも設定します。また、CSS :before 疑似要素を使用して各リスト項目の前に点線を追加し、各ステップを区切りました。

最後に、.active クラスを使用して現在のステップのリスト項目をマークし、特定のスタイルを通じて赤い背景と前面のアイコンを追加します。

最終的なステップ バー スタイルは次のとおりです。

#ステップ バーを使用する場合、対応するリストに .active クラスを追加するだけです。アイテムです。たとえば、現在 2 番目のステップにいる場合は、コードを次のように変更できます。

<ul>
  <li>步骤一</li>
  <li class="active">步骤二</li>
  <li>步骤三</li>
  <li>步骤四</li>
</ul>

上記の CSS スタイル設定を使用すると、カスタム スタイルのステップ バーを簡単に作成して、ユーザーがどこにあるのかをよりよく理解できるようになります。現在の状況と、次に実行する必要がある手順。

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