时间线

 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>
猜你喜欢
