时间轴代码

         <ul class="timeline">
                                <li class="first"><p>2015-01-10 08:54:17</p><p>已签收,签收人是前台签收</p><span class="before"></span><span class="after"></span></li>
                                <li><p>2015-01-10 04:30:17</p><p>河南洛阳公司 的派件员 梁勇15637993860 正在派件</p><span class="before"></span><span class="after"></span></li>
                                <li><p>2015-01-09 21:25:02</p><p>快件已到达河南洛阳公司</p><span class="before"></span><span class="after"></span></li>
                                <li><p>2015-01-09 14:31:01</p><p>由河南洛阳中转部 发往 河南洛阳公司</p><span class="before"></span><span class="after"></span></li>
                                <li><p>2015-01-08 19:09:27</p><p>由河南郑州新航空部 发往 河南洛阳中转部</p><span class="before"></span><span class="after"></span></li>
                                <li><p>2015-01-07 20:06:58</p><p>由海南海口航空部 发往 河南郑州新航空部</p><span class="before"></span><span class="after"></span></li>
                                <li><p>2015-01-07 20:06:58</p><p>海南海口航空部 正在进行 装袋 扫描</p><span class="before"></span><span class="after"></span></li>
                                <li><p>2015-01-07 19:51:55</p><p>快件已到达海南海口航空部</p><span class="before"></span><span class="after"></span></li>
                                <li><p>2015-01-07 19:01:51</p><p>由海南海口国贸大厦分部 发往 海南海口航空部</p><span class="before"></span><span class="after"></span></li>
                                <li><p>2015-01-07 19:01:31</p><p>海南海口国贸大厦分部 的收件员 小符已收件</p><span class="before"></span><span class="after"></span></li>
                            </ul>

/* Time line Css */
.timeline {
    max-height: 255px;
    _height: 255px;
    padding-left: 75px;
    padding-right: 20px;
    overflow: auto;
    list-style: none;
}
.timeline li {
    position: relative;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 8px;
    padding-bottom: 8px;
    color: #666;
}
.timeline li.first {
    color: #3eaf0e;
}
.timeline li p {
    margin-bottom: 0;
    line-height: 20px;
}
.timeline .before {
    position: absolute;
    left: -13px;
    top: 2.2em;
    height: 82%;
    width: 0;
    border-left: 2px solid #ddd;
}
.timeline .after {
    position: absolute;
    left: -16px;
    top: 1.2em;
    width: 8px;
    height: 8px;
    background: #ddd;
    border-radius: 6px;
}
.timeline .first .after {
    background: #3eaf0e;