在前端网看到个时间轴的效果，故简单模范了个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{margin: 50px;}
.container{margin-left: 30%;list-style: none;border-left: 10px solid #405665;}
.container li{position: relative;display: block;}
.container li:before{position: absolute;left: -60px;top: -1px;content: ‘‘;width: 30px;height: 30px;border-radius: 100%;background-color: #405665;}
.container time{position: absolute;left: -21%;top: 14px;color: #aaa;font-weight: bold;}
.content{padding: 30px;margin-bottom: 20px;color: #fff;background-color: #405665;border-radius: 10px;}
.content:before{position: absolute;top: 20px;left: -3%;content:‘‘;width: 0;height: 0;border: 15px solid transparent;border-right-color: #405665;}
</style>
</head>
<body>
<ul class="container">
<li>
<time>2016-04-14</time>
<div class="content">
<h4>Strong survive!</h4>
<p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p>
</div>
</li>
<li>
<time>2016-04-14</time>
<div class="content">
<h4>Strong survive!</h4>
<p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p>
</div>
</li>
<li>
<time>2016-04-14</time>
<div class="content">
<h4>Strong survive!</h4>
<p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p>
</div>
</li>
<li>
<time>2016-04-14</time>
<div class="content">
<h4>Strong survive!</h4>
<p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p>
</div>
</li>
</ul>
</body>
</html>
时间： 2024-10-20 03:22:25