CSS时光轴
CSS时光轴
这个效果大家估计比较熟悉吧,一个简单的时间线的功能,用CSS实现时光轴,可用于记录企业大事记、重要事件的显示,复制本代码到你的网页上,然后修改大事件内容和时间就可以用了,在移动手机端兼容良好。
<!DOCTYPE html PUBLIC -//WC//DTD XHTML 1.0
CSS时光轴
这个效果大家估计比较熟悉吧,一个简单的时间线的功能,用CSS实现时光轴,可用于记录企业大事记、重要事件的显示,复制本代码到你的网页上,然后修改大事件内容和时间就可以用了,在移动手机端兼容良好。<!DOCTYPE html PUBLIC -//WC//DTD XHTML 1.0 Transitional//E .dtd>
<html xmlns=>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>HTML5实现的一款漂亮时间轴展示历程功能</title>
<style>
* {margin: 0;padding: 0;
}
article,section,time,aside{display:block;}
body {color: #9f9f9f;background: #fff;font-size: 1.16em;font-family: Lato , Calibri, Arial, sans-serif;
}
.point-time {content: ;position: absolute;width: 1px;height: 1px;top: 17px;left: 20%;background: #1c87bf;margin-left: -4px;border-radius: 50%;box-shadow: 0 0 0 5px #fff;
}
.text-red {color: #f69f;
}
.text-blue {color: #1c87bf;
}
.text-green {color: #95c91e;
}
.text-yellow {color: #ffb902;
}
.text-purple {color: #d2d9;
}
.point-red {background-color: #f69f;
}
.point-blue {background-color: #1c87bf;
}
.point-green {background-color: #95c91e;
}
.point-yellow {background-color: #ffb902;
}
.point-purple {background-color: #d2d9;
}
.content {width: 970px;margin: 0px auto;
}
.content article {position: relative;
}
.content article > h {width: 15%;height: 20px;line-height: 20px;text-align: right;font-size: 1.4em;color: #1d1d1d;padding: 10px 0 20px;
}
.content article section {padding: 0 0 17px;position: relative;
}
.content article section:before {content: ;width: 5px;top: 17px;bottom: -17px;left: 20%;background: #e6e6e6;position: absolute;
}
.content article section:last-child:before {display: none;
}
.content article section time {width: 15%;display: block;position: absolute;
}
.content article section time > span {display: block;text-align: right;
}
.content article section aside {color: #aa8;margin-left: 25%;padding-bottom: 15px;
}
.content article section .brief {color: #9f9f9f;
}
</style>
</head>
<body>
<div class=content><article><h>201</h><section><span class=point-time point-yellow></span><time datetime=201-0><span>March</span><span>201</span></time><aside><p class=things>The FAW</p><p class=brief><span class=text-yellow>Award</span> (Miami. FL)</p></aside></section><section><span class=point-time point-red></span><time datetime=201-0><span>March</span><span>201</span></time><aside><p class=things>You reached 500 followers on Twitter</p><p class=brief><span class=text-red>Social Appearance</span></p></aside></section></article><article><h>2012</h><section><span class=point-time point-green></span><time datetime=201-0><span>December</span><span>2012</span></time><aside><p class=things>Visitor at Maketing Live 2012</p><p class=brief><span class=text-green>Conference</span></p></aside></section><section><span class=point-time point-green></span><time datetime=2012-11><span>ovember</span><span>2012</span></time><aside><p class=things>Visitor at www.srcfans</p><p class=brief><span class=text-green>Conference</span></p></aside></section><section><span class=point-time point-red></span><time datetime=2012-09><span>September</span><span>2012</span></time><aside><p class=things>You reached 500 followers on Dribbble</p><p class=brief><span class=text-red>Social Appearance</span></p></aside></section><section><span class=point-time point-blue></span><time datetime=2012-08><span>August</span><span>2012</span></time><aside><p class=things>ew job position as Senior Designer at Fantasy Interactive</p><p class=brief><span class=text-blue>Working Experience</span></p></aside></section><section><span class=point-time point-red></span><time datetime=2012-0><span>March</span><span>2012</span></time><aside><p class=things>Speaker at ASMO conference</p><p class=brief><span class=text-red>Conference</span></p></aside></section><section><span class=point-time point-blue></span><time datetime=2012-02><span>February</span><span>2012</span></time><aside><p class=things>You added new skills to job position Junior Designer at Fantasy Interactive</p><p class=brief><span class=text-blue>Working Experience</span></p></aside></section></article>
</div>
</body>
</html>
引用自:
CSS时光轴 -时间线 特效 #感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可,转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间: 2024-01-21 04:44:51
上一篇:VR/AR与二次元,不要露水缘
推荐阅读
留言与评论(共有 9 条评论) |
本站网友 安胎丸 | 2分钟前 发表 |
block;} body {color | |
本站网友 dnf附魔卷轴 | 16分钟前 发表 |
relative; } .content article > h {width | |
本站网友 solomon | 4分钟前 发表 |
#d2d9; } .content {width | |
本站网友 科学的减肥方法 | 30分钟前 发表 |
#1c87bf;margin-left | |
本站网友 php虚拟空间 | 16分钟前 发表 |
#ffb902; } .text-purple {color | |
本站网友 南昌房屋出租 | 8分钟前 发表 |
重要事件的显示,复制本代码到你的网页上,然后修改大事件内容和时间就可以用了,在移动手机端兼容良好 | |
本站网友 色迷迷 | 1分钟前 发表 |
#f69f; } .point-blue {background-color | |
本站网友 香港楼价 | 18分钟前 发表 |
relative; } .content article section |