步驟條 css

在網頁設計中，步驟條是一種常見的導航元素，它可以幫助使用者更了解目前所處的位置以及接下來要進行的步驟。在本文中，我們將介紹如何使用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程式碼將移除清單的預設樣式，並將其設定為flex佈局。同時，我們將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類別新增到對應的清單項目即可。例如，如果目前處於第二個步驟，則可以將程式碼修改如下：

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

透過以上CSS樣式設置，我們可以輕鬆地建立出一個自訂樣式的步驟條，幫助使用者更了解目前所處的位置和接下來需要進行的步驟。

以上是步驟條 css的詳細內容。更多資訊請關注PHP中文網其他相關文章！