使用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 class="package-status"> ???????<div class="status-box"> ???????????<ul class="status-list"> ???????????????<li> ???????????????????<div class="status-content-before">您的订单开始处理</div> ???????????????????<div class="status-time-before">2017-08-17 23:31 周四</div> ???????????????????<div class="status-line"></div>> ???????????????</li> ???????????????<li> ???????????????????<div class="status-content-before">卖家发货</div> ???????????????????<div class="status-time-before">2017-08-18 09:11 周五</div> ???????????????????<div class="status-line"></div> ???????????????</li> ???????????????<li> ???????????????????<div class="status-content-before">发往深圳中转站</div> ???????????????????<div class="status-time-before">2017-08-19 01:21 周六</div> ???????????????????<div class="status-line"></div> ???????????????</li> ???????????????<li> ???????????????????<div class="status-content-before">到达深圳</div> ???????????????????<div class="status-time-before">2017-08-19 06:21 周六</div> ???????????????????<div class="status-line"></div> ???????????????</li> ???????????????<li> ???????????????????<div class="status-content-before">发往潮汕中心</div> ???????????????????<div class="status-time-before">2017-08-19 09:21 周六</div> ???????????????????<div class="status-line"></div> ???????????????</li> ???????????????<li class="latest"> ???????????????????<div class="status-content-latest">快件到达 潮汕中心</div> ???????????????????<div class="status-time-latest">2017-08-20 14:16 周日</div> ???????????????????<div class="status-line"></div> ???????????????</li> ???????????</ul> ???????</div> ???</div></body>
使用css完成物流进度的样式
原文地址：https://www.cnblogs.com/qianxuebing/p/9835502.html