純css寫標題樣式,時間引導圖
阿新 • • 發佈:2018-11-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 方塊 */ .border_tit{ border: 3px solid #2e71f0; height: 80px; margin: 0 auto; margin-top: 60px; width: 60px; position: relative; } .border_tit p{ position: absolute; top:2%; background: #fff; font-size: 24px; width: 120px; left: -10px; text-indent:0; left: 30px; } /* 時間條 */ .timeline { margin: 30px; } .timeline li { position: relative; overflow: hidden; margin: 0; } .timeline li .milestone { width: 200px; float: left; margin-top: 22px; text-align: right; padding-right: 35px; color: #333743; font-size: 16px; font-weight: bold; } .timeline p { line-height: 1.8; letter-spacing: 0.5px; margin: 0 0 10px; text-indent: 0; } .timeline li .timeline-content { width: 75%; float: left; padding-left: 40px; padding-bottom: 30px; position: relative; } .timeline li .timeline-content:before { content: ''; position: absolute; height: 100%; width: 3px; background-color: #ececec; top: 0px; left: 0px; } .timeline li .timeline-content:after { content: ''; width: 25px; height: 25px; background: #fff; position: absolute; top: 22px; left: -15px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; border-radius: 100%; border: 3px solid #333743; } </style> </head> <body> <h4 class="border_tit"> <p>關於我們</p> </h4> <ul class="timeline"> <li> <p class="milestone">2012年</p> <div class="timeline-content"> <p> 統一馭嶽(YYIT)品牌,全面負責大中華區域運營。</p> </div> </li> <li> <p class="milestone">2013年</p> <div class="timeline-content"> <p>升級世貿商擎1.0系統。</p> </div> </li> <li> <p class="milestone">2014年</p> <div class="timeline-content"> <p>推出中國市場分析報告ChinaTSR</p> </div> </li> </ul> </body> </html>
效果如下: