星空网 > 软件开发 > 网页设计

使用css完成物流进度的样式

使用css完成物流进度的样式

效果:

使用css完成物流进度的样式

 

css样式:

<style type="text/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;  } </style>

  

HTML:

<body> <div >  <div >   <ul >    <li>     <div >您的订单开始处理</div>     <div >2017-08-17 23:31 周四</div>     <div ></div>>    </li>    <li>     <div >卖家发货</div>     <div >2017-08-18 09:11 周五</div>     <div ></div>    </li>    <li>     <div >发往深圳中转站</div>     <div >2017-08-19 01:21 周六</div>     <div ></div>    </li>    <li>     <div >到达深圳</div>     <div >2017-08-19 06:21 周六</div>     <div ></div>    </li>    <li>     <div >发往潮汕中心</div>     <div >2017-08-19 09:21 周六</div>     <div ></div>    </li>    <li >     <div >快件到达 潮汕中心</div>     <div >2017-08-20 14:16 周日</div>     <div ></div>    </li>   </ul>  </div> </div></body>

  

原标题:使用css完成物流进度的样式

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流