divcss仿京东订单流程图样式代码

效果展示 http://hovertree测试数据/texiao/css/25/

本效果适合PC，也适合移动端

手机扫描二维码查看效果：


效果图：


代码如下：

   DOCTYPE html  > 
   html  > 
   head  > 
   meta   charset  ="utf-8"   />  meta   name  ="viewport"   content  ="width=device-width, initial-scale=1"   /> 
   title  > div css仿京东订单流程图样式代码—何问起   title  > 
   base   target  ="_blank"   /> 
   style  >  
.hovertree-tracklist ul li   {  
list-style  :   none  ; 
 }  

.hovertree-trackrcol   {  
max-width  :   900px  ;  
border  :   1px solid #eee  ; 
 }  

.hovertree-tracklist   {  
margin  :   20px  ;  
padding-left  :   5px  ;  
position  :   relative  ; 
 }  

.hovertree-tracklist li   {  
position  :   relative  ;  
padding  :   9px 0 0 25px  ;  
line-height  :   18px  ;  
border-left  :   1px solid #d9d9d9  ;  
color  :   #999  ; 
 }  

.hovertree-tracklist li.first   {  
color  :   red  ;  
padding-top  :   0  ;  
border-left-color  :   #fff  ; 
 }  

.hovertree-tracklist li .node-icon   {  
position  :   absolute  ;  
left  :   -6px  ;  
top  :   50%  ;  
width  :   11px  ;  
height  :   11px  ;  
background  :   url(http://hovertree测试数据/texiao/css/25/img/order-icons.png) -21px -72px no-repeat  ; 
 }  

.hovertree-tracklist li.first .node-icon   {  
background-position  :   0 -72px  ; 
 }  

.hovertree-tracklist li .time   {  
margin-right  :   20px  ;  
position  :   relative  ;  
top  :   4px  ;  
display  :   inline-block  ;  
vertical-align  :   middle  ; 
 }  

.hovertree-tracklist li .txt   {  
max-width  :   600px  ;  
position  :   relative  ;  
top  :   4px  ;  
display  :   inline-block  ;  
vertical-align  :   middle  ; 
 }  

.hovertree-tracklist li.first .time   {  
margin-right  :   20px  ; 
 }  

.hovertree-tracklist li.first .txt   {  
max-width  :   600px  ; 
 }  
.hovertreeinfo  {  margin-top  :  10px  ;  }  
.hovertreeinfo a  {  color  :  blue  ;  } 
   style  > 
   head  > 
   body  > 
   div   class  ="hovertree-trackrcol"  > 
   div   class  ="hovertree-tracklist"  > 
   ul  > 
   li   class  ="first"  > 
   i   class  ="node-icon"  >  i  > 
   span   class  ="time"  > 2016-06-06 18:07:15   span  > 
   span   class  ="txt"  > 感谢您在何问起购物，欢迎您再次光临！   span  > 
   li  > 
   li  > 
   i   class  ="node-icon"  >  i  > 
   span   class  ="time"  > 2016-06-06 17:57:23   span  > 
   span   class  ="txt"  > 配送员【何问起】已出发，联系信息【微信公众号：何问起，感谢您的耐心等待，参加评价还能赢取何币呦】   span  > 
   li  > 
   li  > 
   i   class  ="node-icon"  >  i  > 
   span   class  ="time"  > 2016-06-06 16:27:05   span  > 
   span   class  ="txt"  > 您的订单在中山分拨中心【何问起】站验货完成，正在分配送员   span  > 
   li  > 
   li  > 
   i   class  ="node-icon"  >  i  > 
   span   class  ="time"  > 2016-06-06 01:07:50   span  > 
   span   class  ="txt"  > 您的订单已在何问起广州分拨中心发货完成，准备发往中山分拨中心   span  > 
   li  > 
   li  > 
   i   class  ="node-icon"  >  i  > 
   span   class  ="time"  > 2016-06-05 10:07:15   span  > 
   span   class  ="txt"  > 您的订单已经进入何问起南京分拨中心，准备发往广州分拨中心   span  > 
   li  > 
   li  > 
   i   class  ="node-icon"  >  i  > 
   span   class  ="time"  > 2016-06-05 8:00:05   span  > 
   span   class  ="txt"  > 您提交了订单，请等待何问起系统的确认   span  > 
   li  > 
   ul  > 
   div  > 
   div  > 
   div   class  ="hovertreeinfo"  > 
   a   href  ="http://hovertree测试数据"  > 首页   a  > 
   a   href  ="http://hovertree测试数据/texiao/"  > 特效   a  > 
   a   href  ="http://hovertree测试数据/h/bjaf/csswuliu.htm"  > 代码说明   a  > 
   div  > 
   body  > 
   html  >  

查看更多关于divcss仿京东订单流程图样式代码的详细内容...