标签:
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;
标签:
原文地址:http://www.cnblogs.com/anyaran/p/4217794.html