历史详细流程信息框

通过简单的<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>

哦，对了，忘记给你们粘贴上精灵图啦，嗖嗖嗖，拿走。

精灵图