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

效果展示 http://hovertree.com/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.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

觉得夏天不好，太热了