本效果适合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.com/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:15span>span class=txt>感谢您在何问起购物，欢迎您再次光临！span>li>li>i class=node-icon>i>span class=time>2016-06-06 17:57:23span>span class=txt>配送员【何问起】已出发，联系信息【微信公众号：何问起，感谢您的耐心等待，参加评价还能赢取何币呦】span>li>li>i class=node-icon>i>span class=time>2016-06-06 16:27:05span>span class=txt>您的订单在中山分拨中心【何问起】站验货完成，正在分配送员span>li>li>i class=node-icon>i>span class=time>2016-06-06 01:07:50span>span class=txt>您的订单已在何问起广州分拨中心发货完成，准备发往中山分拨中心span>li>li>i class=node-icon>i>span class=time>2016-06-05 10:07:15span>span class=txt>您的订单已经进入何问起南京分拨中心，准备发往广州分拨中心span>li>li>i class=node-icon>i>span class=time>2016-06-05 8:00:05span>span class=txt>您提交了订单，请等待何问起系统的确认span>li>ul>div>div>div class=hovertreeinfo>a href=http://hovertree.com>首页a>a href=http://hovertree.com/texiao/>特效a>a href=http://hovertree.com/h/bjaf/csswuliu.htm>代码说明a>div>body>html>
转自：http://hovertree.com/h/bjaf/csswuliu.htm
特效汇总：http://www.cnblogs.com/roucheng/p/texiao.html
觉得夏天不好，太热了