纯css实现步骤条

coldriversnow

已于 2023-08-10 11:08:10 修改

阅读量1.7k

点赞数 2

文章标签： html css css3

于 2020-12-05 09:58:29 首次发布

本文链接：https://blog.csdn.net/coldriversnow/article/details/110677281

版权

纯css写的步骤条直接上代码

  <ul class="steps">
    <li class="active"></li>
    <li ></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  /* 进度条 */
  .steps {position: relative;counter-reset: step; width: 840px; margin: 0 auto;margin-top: 20px;}
  .steps li {list-style-type: none;font-size: 12px;text-align: center;width: 20%;position: relative; color: #999;z-index: 2;float: left;}
  .steps li:before { display: block; content: counter(step);counter-increment: step; width:24px; height: 24px;background-color: #fff;line-height:24px;border-radius:50%;   font-size: 14px;color: #999;text-align: center;font-weight: 700;margin: 0 auto 8px auto; border: 1px #e5e5e5 solid}
  .steps li:after {content: '';width: 100%;height: 1px;background-color: #b3b3b3; position: absolute;left: 0;top: 15px; z-index: -1;}
  .steps li:first-child {z-index: 3;}
  .steps li:last-child { z-index: 1;}
  .steps li:first-child:after {width: 50%;left: 50%;}
  .steps li:last-child:after {width: 50%;}
  .steps li.active:before {color: #fff}
  .steps li.active:before, .steps li.active:after { background-color: #3277df;}

<div class="txcg_steplist">
          <ul>
            <li>
              <i class="node-icon"></i>
              <span class="time">2016-06-06</span>
              <span class="txt">111</span>
            </li>
            <li>
              <i class="node-icon"></i>
              <span class="time">2016-06-06 </span>
              <span class="txt">222</span>
            </li>
            <li>
              <i class="node-icon"></i>
              <span class="time">2016-06-06 </span>
              <span  class="txt">333</span>
            </li>
            <li>
              <i class="node-icon"></i>
              <span class="time">2016-06-06 </span>
              <span class="txt">44</span></li>
            <li>
              <i class="node-icon"></i>
              <span class="time">2016-06-05 </span>
              <span class="txt">5555555555555555555</span>
            </li>
          </ul>
        </div>

/*步骤条*/
.txcg_steplist{position:relative}
.txcg_steplist ul li{list-style:none}
.txcg_steplist li{position:relative;height:70px;color:#999;padding-left:20px;box-sizing:border-box}
.txcg_steplist li:before{z-index:1;content:"";border:2px #06851e solid;width:10px;height:10px;color:#fff;position:absolute;border-radius:50%;left:0;top:10px;transform:translate(-50%,-50%)}
.txcg_steplist li .node-icon{position:absolute;left:0;top:30%;width:2px;height:50%;border-left:1px #06851e dashed}
.txcg_steplist li .time{color:#333;font-size:16px}
.txcg_steplist li .txt{color:#999;font-size:14px}
.txcg_steplist li:last-child .node-icon{border-left:0}