自定义步骤条 , 纯原生html + css

本文主要是介绍自定义步骤条 , 纯原生html + css，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

只需要给所在步骤加current-n 类名 就行

html

 <div class="progress-x">
      <div class="zb-div">
        <span class="zb-number number1"></span>
         <span class="zb-line"></span>

      </div>

      <div class="zb-div current-n">
        <span class="zb-number number2"></span>
      <span class="zb-line"></span>

      </div>

      <div class="zb-div">
        <span class="zb-number number3"></span>
        <span class="zb-line"></span>

      </div>

      <div class="zb-div">
        <span class="zb-number number4"></span>
      </div>
    </div>
    <div class="step">
        <span class="zb-title" >身份验证</span>
        <span class="zb-title current-n">资料验证</span>
        <span class="zb-title">资料补充</span>
        <span class="zb-title">实人认证</span>
      </div>

css样式

在这里插入代码片
```<style>
      .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;

      }
    </style>

这篇关于自定义步骤条 , 纯原生html + css的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！