step bar css

In web design, the step bar is a common navigation element, which can help users better understand their current location and the next steps. In this article, we'll show you how to create a simple step bar using CSS.

First, we need a list with steps, like this:

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

Next, we need to add styles to the step bar. First, we add the following basic style to the list:

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

This CSS code will remove the default style of the list and set it to flex layout. At the same time, we set the justify-content property to space-between so that the list items will be evenly distributed in the container.

Next, we need to style the list items and add circles and numbers to them. The following is the styling code:

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;
}

In it, we set the width and height of the list item and set it to a circle. We also set properties such as text alignment, font boldness, color, and line height. We also added a dotted line before each list item through the CSS :before pseudo-element to separate each step.

Finally, we use the .active class to mark the list item of the current step and add a red background and front icon to it through a specific style.

The final step bar style is as follows:

#When using the step bar, we only need to add the .active class to the corresponding list item. Can. For example, if you are currently in the second step, you can modify the code as follows:

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

With the above CSS style settings, we can easily create a custom style step bar to help users better understand Where you are now and what steps you need to take next.

The above is the detailed content of step bar css. For more information, please follow other related articles on the PHP Chinese website!