作者:zccst
[size=large][b]一、静态时间轴,仅css即可[/b][/size]
HTML结构使用:ul,li。
原理结构如下:
1,竖轴
竖轴如果使用图片,则在ul用背景
竖轴如果使用css,则用ul:before写样式
2,左侧时间
绝对定位 left: 0
3,中间圆球
绝对定位 left: 20%
4,右侧文字
不浮动 margin-left: 25%
参考:
[url]http://tympanus.net/Blueprints/VerticalTimeline/[/url]
[size=large][b]二、动态时间轴,css + js [/b][/size]
[size=large][b]一、静态时间轴,仅css即可[/b][/size]
HTML结构使用:ul,li。
原理结构如下:
1,竖轴
竖轴如果使用图片,则在ul用背景
竖轴如果使用css,则用ul:before写样式
2,左侧时间
绝对定位 left: 0
3,中间圆球
绝对定位 left: 20%
4,右侧文字
不浮动 margin-left: 25%
参考:
[url]http://tympanus.net/Blueprints/VerticalTimeline/[/url]
[size=large][b]二、动态时间轴,css + js [/b][/size]