css3时间轴订单状态展示

上周项目版本更新， 订单状态页面UI更换了，所以前端需要配合原生开发人员一起更新， 本来以为很快就写出来的， 但是写了一下午废了，主要是思路开始就偏差了， 最后还是求助于群里的  \\*^o^*//【年华】\\*^o^*//  才搞定的。今天正好整理一下吧，免得再忘记了，有需要的小伙伴们也可以学习一下写的方法！

css3时间轴订单状态展示

上面是要实现的页面，下面来一起看一下页面的结构吧！

HTML部分

<div class="wrap">
    <ul class="list">
       <li>
          <div class="content">
             <p class="s_top">
                <span class="orderTitle">服务结束</span>
                <span class="orderTime">2018-1-03 14:14</span>
             </p>
             <div class="orderTxt">砍价师已确定收款，本次服务结束。</div>
             <div class="s_btn">
                <span class="orderOk">立即评价</span>
             </div>
          </div>
          <div class="nav">
             <div class="icon">
                <img src="orderImg/icon_order06.png" />
             </div>
          </div>
       </li>
       <!--  ... ...  -->
       <li>
          <div class="content">
             <div class="s_top01">
                <span class="orderTitle">待支付</span>
                <span class="orderTime">2018-1-03 14:14</span>
            </div>
         </div>
         <div class="nav">
           <div class="icon">
              <img src="orderImg/icon_order05.png" />
           </div>
        </div>
    </li>
 </ul>

CSS部分

li{list-style-type: none;}
.wrap{width: 100%;margin: 40px auto;padding: 0px 15px;overflow: hidden;-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
.list{width: 100%;height: auto;overflow: hidden;}
.list li{width: 85%;padding: 0px 0 15px 0;margin-left: 12.5%;position: relative;}
.list .content{position: relative;height: auto;min-height: 30px;z-index: 999;border: 1px solid #cccccc;
border-radius: 6px;background: #FFFFFF;padding: 15px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
.list .content: after{content: '';position: absolute;top: 55%;margin-top: -5%;bottom: 0;width: 6px;height: 10px;
background: url(https: //cn-qinqimaifang-uat.oss-cn-hangzhou.aliyuncs.com/app/html/img/icon_left.png) no-repeat center center;background-size: 6px 10px;left: -5px;}
.list li .nav{width: 3px;height: 100%;position: absolute;left: -10%;top: 0;}
.list li .nav .icon{width: 24px;height: 24px;position: absolute;left: 50%;margin-left: -16px;top: 50%;
margin-top: -26px;border-radius: 100%;background: #999999;overflow: hidden;z-index: 99;border: 3px solid #F5F5F5;}
.list li .nav .icon img{display: block;width: 24px;height: 24px;}
.list li: first-child .nav .icon{background: red;}/* 上线*/
.list li .nav: : before{content: '';position: absolute;width: 1px;height: 50%;left: 0;top: 0;background: #aaa;}
.list li .nav: : after{content: '';position: absolute;width: 1px;height: 50%;left: 0;bottom: 0;background: #aaa;}
.list li: first-child .nav: : before{display: none;}/* 最后一个没有下线*/
.list li: last-child .nav: : after{display: none;}
.s_top{width: 100%;margin-bottom: 15px;overflow: hidden;}
.s_top01{width: 100%;margin: 12px 0;overflow: hidden;}
.orderTitle{display: inline-block;float: left;font-size: 18px;color: #333333;font-weight: bold;}
.orderTime{display: inline-block;float: right;font-size: 11px;color: #999999;margin-top: 9px;}
.orderTxt{font-size: 12px;color: #999999;margin-bottom: 10px;}
.orderTxt span{display: block;line-height: 22px;}
.s_btn{width: 100%;height: 20px;overflow: hidden;}
.orderCancel{display: inline-block;text-decoration: none;float: right;margin-right: 18px;color: #666666;
line-height: 20px;}
.orderOk{float: right;display: inline-block;text-decoration: none;height: 20px;padding: 0 8px;
text-align: center;line-height: 20px;background: #F42C28;border-radius: 3px;font-size: 12px;color: #FFFFFF;}

以上是全部的代码， 需要案例源码的可以加下面的QQ群索要！