<div class="steps-container">
<div class="step">
<div class="step-line"></div>
<div class="step-circle" >张三</div>
<div>
顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶
</div>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle">李四</div>
<div>
顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶
</div>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle">当地的</div>
<div>
顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶
</div>
</div>
<div class="step">
<div class="step-circle">带大师兄</div>
<div>
顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶顶顶顶顶 顶顶顶顶 顶顶顶顶 顶顶顶顶
</div>
</div>
</div>
<style>
.steps-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.step {
position: relative;
/*width: 100%;*/
padding-bottom: 20px;
padding-left: 70px; /* 圆点左侧的间距 */
}
.step.active .step-circle {
background-color: teal;
color: #fff;
}
.step-line {
position: absolute;
top: 0;
left: 30px; /* 线条左侧的位置 */
width: 2px;
height: 100%;
background-color: #ddd;
z-index: -1; /* 线条位于圆点下方 */
}
.step:last-child .step-line {
display: none; /* 最后一个步骤不需要线条 */
}
.step-circle {
position: absolute;
left: 0;
top: 20px;
transform: translateY(-50%);
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
background-color: #ddd;
text-align: center;
font-size: 14px;
color: #333;
}
.step.active .step-circle {
background-color: teal;
color: #fff;
}
</style>
CSS实现竖向步骤条
最新推荐文章于 2024-08-06 10:52:09 发布