本效果适合PC，也适合移动端
手机扫描二维码查看效果：
效果图：
代码如下：
div css仿京东订单流程图样式代码—何问起 .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;} 2016-06-06 18:07:15 感谢您在何问起购物，欢迎您再次光临！ 2016-06-06 17:57:23 配送员【何问起】已出发，联系信息【微信公众号：何问起，感谢您的耐心等待，参加评价还能赢取何币呦】 2016-06-06 16:27:05 您的订单在中山分拨中心【何问起】站验货完成，正在分配送员 2016-06-06 01:07:50 您的订单已在何问起广州分拨中心发货完成，准备发往中山分拨中心 2016-06-05 10:07:15 您的订单已经进入何问起南京分拨中心，准备发往广州分拨中心 2016-06-05 8:00:05 您提交了订单，请等待何问起系统的确认
查看更多关于divcss仿京东订单流程图样式代码_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112469