1 <ul class="timeline">
2 <li class="first"><p>2015-01-10 08:54:17</p><p>已签收,签收人是前台签收</p><span class="before"></span><span class="after"></span></li>
3 <li><p>2015-01-10 04:30:17</p><p>河南洛阳公司 的派件员 梁勇15637993860 正在派件</p><span class="before"></span><span class="after"></span></li>
4 <li><p>2015-01-09 21:25:02</p><p>快件已到达河南洛阳公司</p><span class="before"></span><span class="after"></span></li>
5 <li><p>2015-01-09 14:31:01</p><p>由河南洛阳中转部 发往 河南洛阳公司</p><span class="before"></span><span class="after"></span></li>
6 <li><p>2015-01-08 19:09:27</p><p>由河南郑州新航空部 发往 河南洛阳中转部</p><span class="before"></span><span class="after"></span></li>
7 <li><p>2015-01-07 20:06:58</p><p>由海南海口航空部 发往 河南郑州新航空部</p><span class="before"></span><span class="after"></span></li>
8 <li><p>2015-01-07 20:06:58</p><p>海南海口航空部 正在进行 装袋 扫描</p><span class="before"></span><span class="after"></span></li>
9 <li><p>2015-01-07 19:51:55</p><p>快件已到达海南海口航空部</p><span class="before"></span><span class="after"></span></li>
10 <li><p>2015-01-07 19:01:51</p><p>由海南海口国贸大厦分部 发往 海南海口航空部</p><span class="before"></span><span class="after"></span></li>
11 <li><p>2015-01-07 19:01:31</p><p>海南海口国贸大厦分部 的收件员 小符已收件</p><span class="before"></span><span class="after"></span></li>
12 </ul>
1 /* Time line Css */
2 .timeline {
3 max-height: 255px;
4 _height: 255px;
5 padding-left: 75px;
6 padding-right: 20px;
7 overflow: auto;
8 list-style: none;
9 }
10 .timeline li {
11 position: relative;
12 border-bottom: 1px solid #f5f5f5;
13 margin-bottom: 8px;
14 padding-bottom: 8px;
15 color: #666;
16 }
17 .timeline li.first {
18 color: #3eaf0e;
19 }
20 .timeline li p {
21 margin-bottom: 0;
22 line-height: 20px;
23 }
24 .timeline .before {
25 position: absolute;
26 left: -13px;
27 top: 2.2em;
28 height: 82%;
29 width: 0;
30 border-left: 2px solid #ddd;
31 }
32 .timeline .after {
33 position: absolute;
34 left: -16px;
35 top: 1.2em;
36 width: 8px;
37 height: 8px;
38 background: #ddd;
39 border-radius: 6px;
40 }
41 .timeline .first .after {
42 background: #3eaf0e;
