第使用css實現(xiàn)物流進度的樣式的實例代碼效果：

css樣式：

styletype=text/css

ulli{

list-style:none;

.package-status{

padding:18px000

.package-status.status-list{

margin:0;

padding:0;

margin-top:-5px;

padding-left:8px;

list-style:none;

.package-status.status-listli{

border-left:2pxsolid#0278D8;

text-align:left;

.package-status.status-listli:before{

/*流程點的樣式*/

content:'';

border:3pxsolid#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-listli{

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-listli: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:1pxsolid#ccc;

margin-left:25px;

margin-top:10px;

.list{

padding:020px;

background-color:#F8F8F8;

margin:10px0025px;

border:1pxsolid#EBEBEB;

.listli{

line-height:30px;

color:#616161;

/style

HTML：

body

di