在以往,如果要在网页上,实现时间轴效果,我们需要使用jQuery来实现。虽然jQuery十分的漂亮美观,但使用方法来说,太麻烦了。而我们现在通过css3就可以时间一个简单漂亮的时间轴制作了,我现在将我研究的css时间轴制作的方法放上来,给大家参考一下。
首先,我将CSS代码部分放上来
1
2
3
4
5
6
7
8
|
.times {
display
:
block
;
margin
:
15px
0
;}
/*首先,我们要创建一个容器class*/
.times ul {
margin-left
:
25px
;
border-left
:
2px
solid
#ddd
;}
/*利用ul标签的特性,设置外边框左移25px,左边边框是2px粗的实心线,颜色一般要浅一点*/
.times ul li {
width
:
100%
;
margin-left
:
-12px
;
line-height
:
20px
;
font-weight
:narmal;}
/*一般情况,通过li标签控制圆点回到时间线上,然后控制要出现的文字大小和是否粗体*/
.times ul li b {
width
:
8px
;
height
:
8px
;
background
:
#fff
;
border
:
2px
solid
#555
;
margin
:
5px
;border-radius:
6px
;-webkit-border-radius:
6px
;-moz-border-radius:
6px
;
overflow
:
hidden
;
display
:inline-
block
;
float
:
left
;}
/*利用处理加粗以外没有其它特别属性b标签做时间轴的圆点。*/
.times ul li span {
padding-left
:
7px
;
font-size
:
12px
;
line-height
:
20px
;
color
:
#555
;}
/*设置span标签的属性,让它来做时间显示,加一点边距,使时间显示离时间线远一点*/
.times ul li:hover b {
border
:
2px
solid
#ff6600
;}
/*注意这一行,前面的li标签后面加了一个:hover伪属性,意思是鼠标移上来,激活后面的属性,这样可以设置鼠标移动到整个时间范围的时候,时间点和时间显示会变色*/
.times ul li:hover span {
color
:
#ff6600
;}
/*同上*/
.times ul li p {
padding-left
:
15px
;
font-size
:
14px
;
line-height
:
25px
;}
/*这里利用段落标签p做文字介绍*/
|
每一行我都加了注释,大家可以看看。
现在我们再来看看看html部分怎么做得
1
2
3
4
5
6
7
8
9
10
|
<
div
class
=
"times"
>
<
ul
>
<
li
><
b
></
b
><
span
>2010-01-01</
span
><
p
>这里是2010年哟</
p
></
li
>
<!--b标签不输入内容,span标签内输入时间不限制格式,p标签内输入介绍内容。注意,标签内不能使用div分割-->
<
li
><
b
></
b
><
span
>2011-01-01</
span
><
p
>这里是2011年哟</
p
></
li
>
<
li
><
b
></
b
><
span
>2012-01-01</
span
><
p
>这里是2012年哟</
p
></
li
>
<
li
><
b
></
b
><
span
>2013-01-01</
span
><
p
>这里是2013年哟</
p
></
li
>
<
li
><
b
></
b
><
span
>2014-01-01</
span
><
p
>这里是2014年哟</
p
></
li
>
</
ul
>
</
div
>
|
整个时间轴我就是利用ul li 特性、以及css的基本功能实现的,相对于jQuery来说,少了不少功夫。
我们继续看看预览图吧!
我制作的主题都是有这种css时间轴效果的,使用办法跟这篇博文中的内容是一样的!
除非注明,发表在『橙色阳光』的文章『纯CSS时间轴实现的办法,超简单的!』版权归橙色阳光所有。
转载请注明出处为“本文转载于『橙色阳光』原地址http://oss.so/blog/21.html”