您的位置：首页 > Web前端 > CSS

时间轴

2015-11-12 17:08 996 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Swiper</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
#timeline{
position: relative;
width:400px;
margin:20px auto;
border:1px solid #f0f0f0;
background: #fff;
}
#timeline::before{
content: '';
position: absolute;
margin-left:1px;
top: 0;
left: 50%;
height: 100%;
width: 2px;
background: #ccc;
}
#timeline::after{
content:"";
position: absolute;
bottom: 0;
left: 50%;
background: #fff;
margin-left:-7px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 14px solid #ccc;
}
li{
list-style: none;
height:24px;
margin:30px auto;
position: relative;
line-height: 24px;
}
li div.left{
position: absolute;
right:50%;
margin-right:20px;
text-align:right;
}
li span.note{
position: absolute;
left:50%;
margin-left:-2px;
height:8px;
width:8px;
border-radius: 50%;
background: #ccc;
top:8px;
}
li div.right{
position: absolute;
left:50%;
margin-left:20px;
text-align:left;
}
</style>
</head>
<body>
<section id="timeline">
<ul>
<li>
<div>6月21日</div>
<span></span>
<div>接受报名</div>
</li>
<li>
<div>7月6日</div>
<span></span>
<div>报名结束</div>
</li>
<li>
<div></div>
<span></span>
<div>审核用户信息</div>
</li>
<li>
<div>7月8日</div>
<span></span>
<div>比赛开始</div>
</li>
<li>
<div>7月10日 24:00</div>
<span></span>
<div>比赛结束</div>
</li>
<li>
<div>7月15日</div>
<span></span>
<div>公布结果，颁发奖品</div>
</li>
</ul>
</section>
</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css ::after ::before 时间轴

相关文章推荐

新的分享

章节导航