【每日一练】时间轴

效果图：
HTML：

 1 <div class="main_panel">
 2   <div class="timeline_cat head">
 3     <span class="tit">Start</span>
 4     <span class="tit_arr"></span>
 5   </div>
 6   <div class="timeline_cat separate">
 7     <span class="yaer_lable">2013</span>
 8     <span class="inst_arr"></span>
 9   </div>
10   <div class="timeline_cat">
11     <ul class="timeline_main">
12       <li class="side_left clearfix">
13         <span class="s_time">5-3</span>
14         <div class="conent">
15           <div class="leve">
16             <div class="rec_arr"></div>
17             this关键字引用的是包含它的函数作为某个对象的方法被调用时的那个对象。———《JavaScript.Dom高级程序设计》这句话拆开来看this包含this的函数函数被调用时以函数作为方法的对象就是说，当函数被调用时，这个函数属于某个对象的方法，这个对象就是函数内部this关键字所指向的对象。
18             <span class="r_b_ico"></span>
19           </div>
20         </div>
21       </li>
22     </ul>
23     <ul class="timeline_main">
24       <li class="side_left clearfix">
25         <span class="s_time">3-3</span>
26         <div class="conent">
27           <div class="leve">
28             <div class="rec_arr"></div>
29             this关键字引用的是包含它的函数作为某个对象的方法被调用时的那个对象。
30             <span class="r_b_ico"></span>
31           </div>
32         </div>
33       </li>
34     </ul>
35   </div>
36   <div class="timeline_cat separate">
37     <span class="yaer_lable">2012</span>
38     <span class="inst_arr"></span>
39   </div>
40   <div class="timeline_cat">
41     <ul class="timeline_main">
42       <li class="side_left clearfix">
43         <span class="s_time">12-30</span>
44         <div class="conent">
45           <div class="leve">
46             <div class="rec_arr"></div>
47             this关键字引用的是包含它的函数作为某个对象的方法被调用时的那个对象。———《JavaScript.Dom高级程序设计》这句话拆开来看this包含this的函数函数被调用时以函数作为方法的对象就是说，当函数被调用时，这个函数属于某个对象的方法，这个对象就是函数内部this关键字所指向的对象。
48             <span class="r_b_ico"></span>
49           </div>
50         </div>
51       </li>
52     </ul>
53     <ul class="timeline_main">
54       <li class="side_left clearfix">
55         <span class="s_time">9-3</span>
56         <div class="conent">
57           <div class="leve">
58             <div class="rec_arr"></div>
59             this关键字引用的是包含它的函数作为某个对象的方法被调用时的那个对象。
60             <span class="r_b_ico"></span>
61           </div>
62         </div>
63       </li>
64     </ul>
65     <ul class="timeline_main">
66       <li class="side_left clearfix">
67         <span class="s_time">4-3</span>
68         <div class="conent">
69           <div class="leve">
70             <div class="rec_arr"></div>
71             <img src="http://file.gaofen.com/cp/2013/04/20130409114815637.jpg" />
72             <span class="r_b_ico"></span>
73           </div>
74         </div>
75       </li>
76     </ul>
77   </div>
78 </div>

CSS:

 1 .main_panel{width:800px;margin: 0px auto;}
 2 .timeline_cat{background: url(../images/line_y.png) repeat-y 95px 0px;}
 3 .separate{height: 30px;}
 4 .timeline_cat.head .tit{background:#6699C9;width: 130px;height: 30px;line-height: 30px;color: #fff;font-weight: 700;display: inline-block;text-align: center;border-radius: 6px;}
 5 .timeline_cat.head .tit_arr{width: 0px;height: 0px;border-style: solid;border-width: 10px 10px 0px 10px;display:block;margin-left:87px;border-color:#6699C9 transparent;_font-size:0px;_border-color:#6699C9 #fff;}
 6 
 7 .timeline_cat .yaer_lable{width: 70px;line-height: 26px;height: 26px;text-align: center;background: #C4CDD6;float: left;border-radius: 5px 0px  0px 5px;;}
 8 .timeline_cat .inst_arr{height: 2px;width: 0px;border-style: solid;border-width: 12px 0px 12px 12px;float: left;border-color:transparent #C4CDD6;_font-size:0px;_border-color:#fff #C4CDD6; }
 9 .timeline_cat .timeline_main{overflow:hidden;}
10 .timeline_cat .side_left{margin-bottom: 20px;}
11 .timeline_cat .s_time{float: left; font-size: 12px;margin: 10px 0px 0px 51px;display: inline;width: 33px;text-align: right;}
12 .timeline_cat .conent{width:669px;float: left;margin-left: 47px;display: inline;font-size: 12px;font-family: 宋体; line-height: 18px;}
13 .timeline_cat .leve{border:solid 1px #ddd;background: #F5F8FB;padding:10px 20px 18px 20px;border-radius: 6px;position: relative;display: inline-block;}
14 .timeline_cat .leve .rec_arr{position: absolute;background: url(../images/tblue_arr.png) no-repeat;width: 43px;height:32px;left:-43px;}
15 .timeline_cat .leve .r_b_ico{position: absolute;background: url(../images/timeline_special_71b5fd04.gif) white no-repeat; width: 18px;height: 17px;right: -1px;_right:-2px;bottom: -1px;display: inline-block;}