Timeline Style
2019-01-21 02:38:03来源:博客园 阅读 ()
from: https://freefrontend.com/css-timelines/
https://bootstrapthemes.co/items/resources/timeline/
https://github.com/twbs/bootstrap/releases
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: uppercase; 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: uppercase; 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; } }@charset "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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/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, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, 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">Web Development</h2> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, 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">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, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, 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, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, 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="month">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>
效果:
原文链接:https://www.cnblogs.com/geovindu/p/10287986.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- head头部包裹title,base,link,meta,script,style 2020-03-26
- 深入理解 CSS(Cascading Style Sheets)中的层叠(Cascadin 2020-01-16
- css的三种导入方式 2020-01-11
- 如何使用CSS border-style属性 2019-12-26
- injected stylesheet 谷歌扩展插件,造成样式异常 2019-12-19
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash