使用css实现物流进度的样式的实例代码

效果：

css样式：

 ul li {
     list-style: none;
 }
 .package-status {
     padding: 18px 0 0 0
 }
 .package-status .status-list {
     margin: 0;
     padding: 0;
     margin-top: -5px;
     padding-left: 8px;
     list-style: none;
 }
 .package-status .status-list>li {
     border-left: 2px solid #0278D8;
     text-align: left;
 }
 .package-status .status-list>li:before {
     
     content: '';
     border: 3px solid #0278D8;
     background-color: #0278D8;
     display: inline-block;
     width: 6px;
     height: 6px;
     border-radius: 10px;
     margin-left: -7px;
     margin-right: 10px
 }
 .package-status .status-box {
     overflow: hidden
 }
 .package-status .status-list>li {
     height: auto;
     width: 95%;
 }
 .package-status .status-list {
     margin-top: -8px
 }
 .package-status .status-box {
     position: relative
 }
 .package-status .status-box:before {
     content: " ";
     background-color: #f3f3f3;
     display: block;
     position: absolute;
     top: -8px;
     left: 20px;
     width: 10px;
     height: 4px
 }
 .package-status .status-list {
     margin-top: 0px;
 }
 .status-list>li:not(:first-child) {
     padding-top: 10px;
 }
 .status-content-before {
     text-align: left;
     margin-left: 25px;
     margin-top: -20px;
 }
 .status-content-latest {
     text-align: left;
     margin-left: 25px;
     color: #0278D8;
     margin-top: -20px;
 }
 .status-time-before {
     text-align: left;
     margin-left: 25px;
     font-size: 10px;
     margin-top: 5px;
 }
 .status-time-latest {
     text-align: left;
     margin-left: 25px;
     color: #0278D8;
     font-size: 10px;
     margin-top: 5px;
 }
 .status-line {
     border-bottom: 1px solid #ccc;
     margin-left: 25px;
     margin-top: 10px;
 }
 .list {
     padding: 0 20px;
     background-color: #F8F8F8;
     margin: 10px 0 0 25px;
     border: 1px solid #EBEBEB;
 }
 .list li {
     line-height: 30px;
     color: #616161;
 }
     

　　HTML：

    
 
     

  

      您的订单开始处理
      2017-08-17 23:31 周四
      >
  
  

      卖家发货
      2017-08-18 09:11 周五
      
  
  

      发往深圳中转站
      2017-08-19 01:21 周六
      
  
  

      到达深圳
      2017-08-19 06:21 周六
      
  
  

      发往潮汕中心
      2017-08-19 09:21 周六
      
  
  

      快件到达 潮汕中心
      2017-08-20 14:16 周日
      
  
     
 
    
 

总结

以上所述是小编给大家介绍的使用css完成物流进度的样式的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！