step bar css

In the web design process, step bars are often used as navigation elements for user operations, especially in multi-step forms and shopping processes. Making step bars usually requires the use of CSS technology. This article will introduce several CSS methods for making step bars, allowing you to easily achieve the effect of step bars on web pages.

Method 1: Use an unordered list

Unordered list (<ul>) is one of the common methods of making step bars. The code is as follows:

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

In CSS, we can use the following code to control the style of the step bar:

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

This code controls the style of the step bar text and selected state respectively. Among them, the .step li part defines the style of the unordered list items, including display as inline block-level elements, width and height, background color, text horizontal and vertical centering, rounded corners and spacing, etc.; .step li.active:before and .step li.active:after define the style of the selected step item. With the :before and :after selectors, we can add arrows and dots to the left of the selected item.

Method 2: Use flex layout

Flex layout is a modern CSS layout technology that can better realize complex layout requirements in web design. Use flex layout to make step bars, the code is as follows:

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

CSS code is as follows:

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

In this code, we use Flex layout and justify-contentSet to space-between, that is, the spacing of each circle is evenly distributed in the remaining space of the container. Use the .circle and .circle.active selectors to control the style of the circle, and use the :after selector to display a small circle on the selected circle point.

Method Three: Use the Bootstrap Framework

Bootstrap is a popular front-end framework that provides many useful CSS and JavaScript components, including the option to make step bars. To create a step bar using the Bootstrap framework, you need to include the Bootstrap CSS and JS files in your code, and then use the following code to create the step bar:

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

This code uses the nav-pills## of the Bootstrap framework. #Component, and uses the active and data-toggle attributes to define the selected state and click effect. As needed, style control can be performed on the nav-pills component to meet design needs.

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