纯CSS时间轴实现的办法，超简单的！

转自：http://oss.so/blog/21.html

在以往，如果要在网页上，实现时间轴效果，我们需要使用jQuery来实现。虽然jQuery十分的漂亮美观，但使用方法来说，太麻烦了。而我们现在通过css3就可以时间一个简单漂亮的时间轴制作了，我现在将我研究的css时间轴制作的方法放上来，给大家参考一下。

首先，我将CSS代码部分放上来

.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部分怎么做得

< 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时间轴效果的，使用办法跟这篇博文中的内容是一样的！

(0)

除非注明，发表在『橙色阳光』的文章『纯CSS时间轴实现的办法，超简单的！』版权归橙色阳光所有。转载请注明出处为“本文转载于『橙色阳光』原地址http://oss.so/blog/21.html”

纯CSS时间轴实现的办法，超简单的！相关推荐

android时间轴左右交叉布局,快速简单的定制一个时间轴布局（LinearLayout）
github: 先上图: 很多情况下,我们都会遇到需要类似于时间轴的一个布局,网上也有很多,但是很多情况下我们其实并不需要那么多库,毕竟64k限制就在那,不管我们用还是不用,它依然在那... 而且更多 ...
【技能】使用纯CSS+html写出方向箭头，简单大方，好看
使用纯CSS+html写出方向箭头,贴出来就可以用,100%原创 <html><head><title></title><meta http-eq ...
迅雷总是提示更新升级的解决办法(超简单) win10
今天突然发现这个升级模块又出来了, 下面的不要看了,这个方法并没有解决问题迅雷每次打开提示更新了, 好恶心终于今天找到这个小B崽子了 %*&#@- (先把迅雷关了)直接删除估计关掉迅雷, ...
vue实现物流时间轴效果
实现效果 html <ul class="time-axis" :class="{ 'is-done': item.state === 1 }" v-fo ...
推荐几款jQuery时间轴插件Timeline
原文地址:http://blog.csdn.net/xiaokui_wingfly/article/details/51907045 查看原文查看在线演示Demo和更多原文内容教程: http:/ ...
【时间轴】推荐几款jQuery时间轴插件Timeline
查看原文查看在线演示Demo和更多原文内容教程: http://www.ibloger.net/article/1185.html 3D效果的响应式CSS3时间轴 CSS时间轴3D效果实例,一套基于 ...
【MarkDown】CSDN Markdown之时间轴图timeline详解
文章目录时间轴图一个关于时间轴图的例子语法分组长`时间段`或`事件文本`换行 `时间段`和`事件文本`样式自定义颜色方案主题基础主题森林主题黑色主题默认主题中性主题与库或网站 ...
如何用Graphpad Prism 9作时间轴图
如下图所示,是奶牛同期发情-定时输精的流程图,也可以称为时间轴图.本期我们简单讲解一下用graphpad如何做个类似这样的时间轴图. 1. 打开graphpad软件,如下图所示,依次选择XY数据类型, ...
android自定义横向时间轴,Android自定义时间轴的实现过程
本文讲述Android自定义时间轴的实现过程,供大家参考,具体内容如下时间轴效果,实际上非常简单,就是listView中一个又一个的条目而已-.大家可以只关注一个条目. 首先展示一个条目的布局效果 ...

纯CSS时间轴实现的办法，超简单的！

纯CSS时间轴实现的办法，超简单的！相关推荐

最新文章

热门文章