历史详细流程信息框
通过简单的<li>标签构造的一种流程图，适用于大多数的信息流程，上代码，一起看看效果吧！
效果图
Css：
<style>
body{
font-size: 12px;
}
ul li{
list-style: none;
}
.track-rcol{
width: 900px;
border: 1px solid #eee;
}
.track-list{
margin: 20px;
padding-left: 5px;
position: relative;
}
.track-list li{
position: relative;
padding: 9px 0 0 25px;
line-height: 18px;
border-left: 1px solid #d9d9d9;
color: #999;
}
.track-list li.first{
color: red;
padding-top: 0;
border-left-color: #fff;
}
.track-list li .node-icon{
position: absolute;
left: -6px;
top: 50%;
width: 11px;
height: 11px;
background: url(img/order-icons.png) -21px -72px no-repeat;
}
.track-list li.first .node-icon{
background-position:0 -72px;
}
.track-list li .time{
margin-right: 20px;
position: relative;
top: 4px;
display: inline-block;
vertical-align: middle;
}
.track-list li .txt{
max-width: 600px;
position: relative;
top: 4px;
display: inline-block;
vertical-align: middle;
}
.track-list li.first .time{
margin-right: 20px;
}
.track-list li.first .txt{
max-width: 600px;
}
</style>
接下来是HTML代码哦。
<div class="track-rcol">
<div class="track-list">
<ul>
<li class="first">
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">由质检员提交录音</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">质检组长审核成功</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">质检组长提交给团队长</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">团队长提交给部门经理</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">部门经理驳回</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">由部门经理修改后提交给经理室</span>
</li>
</ul>
</div>
</div>
哦，对了，忘记给你们粘贴上精灵图啦，嗖嗖嗖，拿走。
精灵图
