标签：flex center 自定义 align zb width html progress 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>

标签：flex,center,自定义,align,zb,width,html,progress,css
来源： https://blog.csdn.net/luoman612/article/details/115898545

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。