1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>时间线</title>
9 <style>
10 .times {
11 display: block;
12 margin: 15px 0;
13 }
14
15 /*首先,我们要创建一个容器class*/
16 .times ul {
17 margin-left: 25px;
18 border-left: 2px solid #ddd;
19 padding: 0;
20 }
21
22 /*利用ul标签的特性,设置外边框左移25px,左边边框是2px粗的实心线,颜色一般要浅一点*/
23 .times ul li {
24 width: 100%;
25 margin-left: -12px;
26 line-height: 20px;
27 font-weight: narmal;
28 list-style: none;
29 }
30
31 /*一般情况,通过li标签控制圆点回到时间线上,然后控制要出现的文字大小和是否粗体*/
32 .times ul li b {
33 width: 8px;
34 height: 8px;
35 background: #fff;
36 border: 2px solid #555;
37 margin: 5px;
38 border-radius: 6px;
39 -webkit-border-radius: 6px;
40 -moz-border-radius: 6px;
41 overflow: hidden;
42 display: inline-block;
43 float: left;
44 }
45
46 /*利用处理加粗以外没有其它特别属性b标签做时间轴的圆点。*/
47 .times ul li span {
48 padding-left: 7px;
49 font-size: 12px;
50 line-height: 20px;
51 color: #555;
52 }
53
54 /*设置span标签的属性,让它来做时间显示,加一点边距,使时间显示离时间线远一点*/
55 .times ul li:hover b {
56 border: 2px solid #ff6600;
57 }
58
59 /*注意这一行,前面的li标签后面加了一个:hover伪属性,意思是鼠标移上来,激活后面的属性,这样可以设置鼠标移动到整个时间范围的时候,时间点和时间显示会变色*/
60 .times ul li:hover span {
61 color: #ff6600;
62 }
63
64 /*同上*/
65 .times ul li p {
66 padding-left: 15px;
67 font-size: 14px;
68 line-height: 25px;
69 }
70
71 /*这里利用段落标签p做文字介绍*/
72 </style>
73 </head>
74
75 <body>
76 <div class="times">
77 <ul>
78 <li><b></b><span>2010-01-01</span>
79 <p>这里是2010年哟</p>
80 </li>
81 <!--b标签不输入内容,span标签内输入时间不限制格式,p标签内输入介绍内容。注意,标签内不能使用div分割-->
82 <li><b></b><span>2011-01-01</span>
83 <p>这里是2011年哟</p>
84 </li>
85 <li><b></b><span>2012-01-01</span>
86 <p>这里是2012年哟</p>
87 </li>
88 <li><b></b><span>2013-01-01</span>
89 <p>这里是2013年哟</p>
90 </li>
91 <li><b></b><span>2014-01-01</span>
92 <p>这里是2014年哟</p>
93 </li>
94 </ul>
95 </div>
96 </body>
97
98 </html>
效果图:http://h5.jerrychee.cn/time-line.html