时间轴代码 

 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;

 

posted @ 2015-01-12 10:16  安雅然  阅读(389)  评论(0)    收藏  举报