纯css实现步骤条

纯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}

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值