CSS3时间轴效果
分类：实例代码
分享一段代码实例，它利用css3实现了时间轴效果。
更多时间轴特效可以查阅特效下载时间轴分类。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
color: #333;
background: #fff;
font-size: 12px;
line-height: 1.785;
}
ul {
list-style: none;
}
i {
display: inline-block;
font-size: 0;
vertical-align: top;
}
.main {
width: 480px;
}
.main div {
font-size: 14px;
}
.main div p {
font-size: 12px;
color: #666;
}
.title {
text-align: center;
margin: 10px auto;
}
/*列表*/
.list {
padding-top: 20px;
padding-left: 30px;
}
.list li {
position: relative;
border-left: 1px solid #b1b1b1;
}
.list li:last-child {
border-left: none;
}
.lefttime {
display: inline-block;
width: 80px;
padding-left: 20px;
font-size: 14px;
float: left;
position: relative;
top: -10px;
}
.lefttime i {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0099ff;
position: absolute;
left: -5px;
top: 7px;
}
.righttext {
margin-left: 110px;
position: relative;
top: -10px;
}
.righttext > div {
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<!--begin: 标题-->
<div class="title">
<div>前端教程网一</div>
<p>2016年11月28日至2016年12月1日</p>
</div>
<!--end: 标题-->
<!--begin: 事件列表-->
<div class="list">
<ul>
<li>
<span class="lefttime"><i></i>11月28日</span>
<div class="righttext">
<div>
<div>前端教程网二<span>09:00-10:15</span></div>
<p>本站的url地址是<a href="http://www.pipipi.net" target="_blank">www.pipipi.net</a></p>
</div>
</div>
</li>
<li>
<span class="lefttime"><i></i>11月28日</span>
<div class="righttext">
<div>
<div>前端教程网三<span>09:00-10:15</span></div>
<p>只有努力奋斗才会有美好的未来</p>
</div>
<div>
<div>前端教程网三<span>09:00-10:15</span></div>
<p>没有人一开始就是高手，必须通过努力奋斗</p>
</div>
</div>
</li>
<li>
<span class="lefttime"><i></i>11月28日</span>
<div class="righttext">
<div>
<div>前端教程网四<span>09:00-10:15</span></div>
<p>分享和互助式进步的源动力</p>
</div>
</div>
</li>
</ul>
</div>
<!--end: 事件列表-->
</div>
</body>
</html>
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu