图片.png
所谓时间轴布局，就是 ul li 列表
li为内容 轴 为ul的边框 时间 相对于父级li
绝对定位。left：-30%；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>time line</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #fff;
font-family: "Helvetica Neue", sans-serif;
margin: 50px;
}
#timeline{
margin-left: 30%;
border-left: 10px solid #bce1fa;
}
#timeline li{
position: relative;
list-style: none;
display: block;
width: 100%;
clear: both;
}
#timeline li::before{
content: '';
display: block;
width: 30px;
height: 30px;
border: 5px solid #bce1fa;
border-radius: 50%;
background: #3498DB;
position: absolute;
left: -25px;
top: 0;
/*box-sizing: border-box;*/
}
#timeline li time{
position: absolute;
left: -30%;
top: 8px;
width: 25%;
font-size: 21px;
color: #AAA;
text-align: right;
}
.timeline-content{
position: relative;
margin: 0 0 20px 5%;
background: #57b4f6;
color: #fff;
border-radius: 4px;
padding: 30px;
}
.timeline-content h1{
font-size: 32px;
margin-bottom: 20px;
}
.timeline-content::after{
content:'';
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #57b4f6 transparent transparent;
position: absolute;
left: -20px;
top: 12px;
}
</style>
</head>
<body>
<ul id="timeline">
<li>
<time datetime="2015-09-18">2015-9-18</time>
<div class="timeline-content">
<h1>Pablo Groisman</h1>
<p>Ut ut magna ligula. Praesent vitae vestibulum magna. In lobortis metus non consequat vehicula. Fusce massa magna, pretium ut augue non, vehicula egestas leo. Ut lacinia viverra nunc, ut lobortis orci imperdiet id. Fusce dolor nulla, tempus vel dolor vel, accumsan facilisis sem. Curabitur congue odio a sem imperdiet finibus.</p>
</div>
</li>
<li>
<time datetime="2015-09-14">2015-9-14</time>
<div class="timeline-content">
<h1>Elliptic Equation</h1>
<p>Pellentesque sagittis et sapien sit amet bibendum. Vestibulum eu purus quis ipsum sollicitudin ornare. Ut diam justo, lacinia id ante non, hendrerit pharetra felis. Donec dignissim in libero eu imperdiet. Nunc magna felis, ultrices eu nunc ac, aliquam imperdiet odio. Integer blandit velit vestibulum ex laoreet placerat. </p>
</div>
</li>
<li>
<time datetime="2015-09-13">2015-9-13</time>
<div class="timeline-content">
<h1>Praesent nulla</h1>
<p>Aenean id nisl vestibulum ex venenatis gravida vel ac neque. Nulla at lacinia eros. In placerat semper orci, id facilisis risus interdum nec. Fusce velit dui, aliquam egestas aliquet vulputate, imperdiet sed ante. Proin pretium arcu ac augue varius consequat.</p>
</div>
</li>
<li>
<time datetime="2015-09-12">2015-9-12</time>
<div class="timeline-content">
<h1>Aenean mauris</h1>
<p>Duis vehicula semper velit quis semper. Integer placerat tincidunt ipsum. Nulla facilisi. Aenean ut sapien varius, tincidunt justo nec, dictum orci. Donec fringilla nibh et felis eleifend porttitor. Etiam in molestie dui. Praesent nec neque id lectus egestas luctus nec eget tellus.</p>
</div>
</li>
<li>
<time datetime="2015-09-10">2015-9-10</time>
<div class="timeline-content">
<h1>Fusce ultrices</h1>
<p>Sed turpis diam, lobortis eget neque sed, mollis egestas massa. Nunc dictum velit a nisl volutpat ullamcorper. Suspendisse vel posuere lacus. Nullam blandit erat ut fermentum facilisis. Nulla porttitor eget magna et finibus. Nullam nec leo tempus, gravida dolor id, dapibus magna. Aliquam erat volutpat.</p>
</div>
</li>
</ul>
</body>
</html>
网友评论