from:https://freefrontend.com/css-timelines/
https://bootstrapthemes.co/items/resources/timeline/
https://github.com/twbs/bootstrap/releas
css:
.demo{ background: #25303b;padding: 100px 0;}.heading-title{margin-bottom: 100px;color: #fff;}.main-timeline{ width: 80%; margin: 20px auto; position: relative;}.main-timeline:before{ content: ""; display: block; width: 2px; height: 100%; background: rgba(255,255,255,0.2); margin: 0 0 0 -1px; position: absolute; top: 0; left: 50%;}.main-timeline .timeline{ width: 100%; margin-bottom: 20px; position: relative;}.main-timeline .timeline:after{ content: ""; display: block; clear: both;}.main-timeline .timeline-content{ width: 40%; float: left; margin: 5px 0 0 0; border-radius: 6px;}.main-timeline .date{ display: block; width: 70px; height: 70px; border-radius: 50%; background: #25303b; padding: 5px 0; margin: 0 0 0 -36px; position: absolute; top: 0; left: 50%; font-size: 12px; font-weight: 900; text-transform: upperca; color: rgba(255,255,255,0.5); border: 2px solid rgba(255,255,255,0.2); box-shadow: 0 0 0 7px #25303b;}.main-timeline .date span{ display: block; text-align: center;}.main-timeline .day,.main-timeline .year{ font-size: 10px;}.main-timeline .month{ font-size: 18px;}.main-timeline .title{ padding: 15px; margin: 0; font-size: 20px; color: #fff; text-transform: upperca; letter-spacing: -1px; border-radius: 6px 6px 0 0; position: relative;}.main-timeline .title:after{ content: ""; width: 10px; height: 10px; position: absolute; top: 20px; right: -5px; transform: rotate(-45deg);}.main-timeline .description{ padding: 15px; margin: 0; font-size: 14px; color: #656565; background: #fff; border-radius: 0 0 6px 6px;}.main-timeline .timeline:nth-child(2n+2) .timeline-content{ float: right;}.main-timeline .timeline:nth-child(2n+2) .title:after{ left: -5px;}/*有多少条要设置其量*/.main-timeline .timeline:nth-child(1) .title,.main-timeline .timeline:nth-child(1) .title:after{ background: #9f84c4;}.main-timeline .timeline:nth-child(2) .title,.main-timeline .timeline:nth-child(2) .title:after{ background: #02a2dd;}.main-timeline .timeline:nth-child(3) .title,.main-timeline .timeline:nth-child(3) .title:after{ background: #58b25e;}.main-timeline .timeline:nth-child(4) .title,.main-timeline .timeline:nth-child(4) .title:after{ background: #efb715;}.main-timeline .timeline:nth-child(5) .title,.main-timeline .timeline:nth-child(5) .title:after{ background: #ffe218;}.main-timeline .timeline:nth-child(6) .title,.main-timeline .timeline:nth-child(6) .title:after{ background: #eab788;}@media only screen and (max-width: 990px){ .main-timeline{ width: 100%; }}@media only screen and (max-width: 767px){ .main-timeline:before, .main-timeline .date{ left: 6%; } .main-timeline .timeline-content{ width: 85%; float: right; } .main-timeline .title:after{ left: -5px; }}@media only screen and (max-width: 480px){ .main-timeline:before, .main-timeline .date{ left: 12%; } .main-timeline .timeline-content{ width: 75%; } .main-timeline .date{ width: 60px; height: 60px; margin-left: -30px; } .main-timeline .month{ font-size: 14px; }}@chart "utf-8";/* css document */
html5:
<!doctype html><html lang="en"> <head> <meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/d/file/titlepic/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><!-- optional theme --><link rel="stylesheet" href="/d/file/titlepic/bootstrap-theme.min.css" integrity="sha384-rhyon1irsvxv4nd0jutlngaslcjuc7uwjduw9svrlvryoopp2bwygmgjqixwl/sp" crossorigin="anonymous"><link rel="stylesheet" href="style/style.css"><title>timeline style</title></head><body> <div class="demo"> <div class="container"> <div class="row text-center"> <h1 class="heading-title">timeline style</h1> </div> <div class="row"> <div class="col-md-12"> <div class="main-timeline"> <div class="timeline"> <div class="timeline-content"> <span class="date"> <span class="day">10<sup>th</sup></span> <span class="month">apr</span> <span class="year">2017</span> </span> <h2 class="title">web design</h2> <p class="description">lorem ipsum dolor sit amet, conctetur adipiscing elit. nulla dapibus, quam non pellentesque conquat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p> </div> </div> <div class="timeline"> <div class="timeline-content"> <span class="date"> <span class="day">12<sup>th</sup></span> <span class="month">apr</span> <span class="year">2017</span> </span> 人定胜天 <h2 class="title"&g关于范成大的资料t;web development</h2> <p class="description">lorem ipsum dolor sit amet, conctetur adipiscing elit. nulla dapibus, quam non pellentesque conquat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p> </div> </div> <div class="timeline"> <div class="timeline-content"> <spa图书情报专业n class="date小学教育平台"> <span class="day">14<sup>th</sup></span> <span class="month">apr</span> <span class="year">2017</span> </span> <h2 class="title">brand building</h2> <p class="description">lorem ipsum dolor sit amet, conctetur adipiscing elit. nulla dapibus, quam non pellentesque conquat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p> </div> </div> <div class="timeline"> <div class="timeline-content"> <span class="date"> <span class="day">16<sup>th</sup></span> <span class="month">apr</span> <span class="year">2017</span> </span> <h2 class="title">responsive design</h2> <p class="description">lorem ipsum dolor sit amet, conctetur adipiscing elit. nulla dapibus, quam non pellentesque conquat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p> </div> </div> <div class="timeline"> <div class="timeline-content"> <span class="date"> <span class="day">28<sup>th</sup></span> <span class="m学党章党规 学系列讲话 做合格党员onth">aug</span> <span class="year">2017</span> </span> <h2 class="title">中国人民解放军</h2> <p class="description">生中朝右发的凯撒奖地板革最悲歌罗东进榴莲味觉得撒开了房间.</p> </div> </div> <div class="timeline"> <div class="timeline-content"> <span class="date"> <span class="day">26<sup>th</sup></span> <span class="month">jun</span> <span class="year">2018</span> </span> <h2 class="title">深圳市罗湖区布心路3008号</h2> <p class="description">涂聚文，昵称：geovin du.繁體：塗聚文，生命在于运动。营养膳食养生。</p> </div> </div> </div> </div> </div> </div> </div></body></html>
效果：
本文发布于:2023-04-03 13:38:37，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/160ada1962eb80f1b4e2f1fd39d476d8.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：Timeline Style.doc
本文 PDF 下载地址：Timeline Style.pdf
| 留言与评论（共有 0 条评论） |
