html+css :时间轴布局

最新推荐文章于 2024-04-03 04:53:26 发布

chenlaojie7596

最新推荐文章于 2024-04-03 04:53:26 发布

阅读量311

点赞数

文章标签：前端 ViewUI

原文链接：https://my.oschina.net/u/3388416/blog/880813

版权

<!DOCTYPE html>

<html>

<head>

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>

<li>

<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>

<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>

<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>

<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>

<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>

【web前端25群】群号618237474