只需要給所在步驟加current-n 類名 就行

html

身份驗證

資料驗證

資料補充

實人認證

css樣式

在這里插入代碼片

```

.progress-x {

width: 100%;

display: flex;

align-items: center;

margin-left: 13%;

}

.progress-x > div.zb-div {

display: flex;

align-items: center;

flex: 25%;

}

.progress-x .zb-line {

text-align: center ;

width: calc(100% - 10px);

height: 1px;

border: 1px solid #ddd;

background: #ccc;

}

.progress-x > div > span.zb-number {

width: 8px;

height: 8px;

text-align: center;

border-radius: 50%;

border: 1px solid #ddd;

color: #ccc;

background: #fff;

}

.progress-x > div.current-n > span.zb-number {

width: 13px;

height: 13px;

border: 1px solid #178cff;

color: #fff;

background: #178cff;

}

.step{

width: 100%;

display: flex;

align-items: center;

text-align: center;

}

.step>span.current-n{

font-size: 16px;

}

.zb-title{

margin-top: 5px;

flex: 25%;

font-size: 14px;

}

標簽：flex,center,自定義,align,zb,width,html,progress,css

來源： https://blog.csdn.net/luoman612/article/details/115898545

總結

以上是生活随笔為你收集整理的html5步骤条,自定义步骤条 , 纯原生html + css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。