純CSS豎向步驟條可以用來展示流程、步驟和進度。下面我們介紹一下如何實現。

html:
<div class="step-bar">
<div class="step">
<span class="step-num">1</span>
<span class="step-text">步驟1</span>
</div>
<div class="step">
<span class="step-num">2</span>
<span class="step-text">步驟2</span>
</div>
<div class="step">
<span class="step-num">3</span>
<span class="step-text">步驟3</span>
</div>
<div class="step">
<span class="step-num">4</span>
<span class="step-text">步驟4</span>
</div>
</div>
css:
.step-bar {
position: relative;
margin: 0 auto;
width: 30px;
height: 200px;
border-right: 1px solid #ccc;
}
.step {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 50px;
text-align: center;
}
.step:nth-child(1) {
top: 0;
}
.step:nth-child(2) {
top: 50px;
}
.step:nth-child(3) {
top: 100px;
}
.step:nth-child(4) {
top: 150px;
}
.step-num {
display: block;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 50%;
background-color: #ccc;
width: 20px;
height: 20px;
line-height: 20px;
color: #fff;
font-size: 14px;
}
.step-text {
display: block;
margin-bottom: 10px;
font-size: 12px;
}
.step-num.active {
background-color: #f00;
}
.step-num.done {
background-color: #00f;
}

上面的代碼演示了一個4步的豎向步驟條，可以通過調整.step的數量來控制步驟數。通過給每一個步驟的.step-num加上不同的class來控制不同的狀態，active表示當前步驟，done表示已完成步驟。

希望大家可以利用這個簡單的代碼段自定義自己的豎向步驟條。