本篇文章，主要讲解一下如何创建一个精美的时间轴日志页面，其中代码里具体的日志内容部分需要自行更改哦！
页面效果图
HTML+CSS部分
<!DOCTYPE html> <html lang="en"> <title>芒果更新日志</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="http://175.178.184.206/usr/uploads/2022/05/2356336909.png" mce_href="favicon.ico" rel="icon" type="image/x-icon"/> </head> <style> body * { box-sizing: border-box; } .timeline{ width:100%; max-width:800px; background: #fffde4; padding: 100px 50px; position: relative; box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0,0,0,0.3); } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(45deg,#005aa7, #fffde4); background-attachment: fixed; } .timeline:before{ content:""; position:absolute; top:0px; left:calc(33%+15px); bottom:0px; width:4px; background:#ddd; } .timeline:after{ content:""; display:table; clear:both; } .content{ clear:both; text-align:left; position:relative; } .content .title{ marign-bottom:0.5em; float:left; width:33%; padding-right:30px; text-align:right; position:relative; } .content .title:before{ content:""; position:absolute; width:8px; height:8px; border:4px solid salmon; background-color:#fff; border-radius:100%; top:15%; right:-8px; z-index:9999; } .content .title h3{ margin:0; font-size:120%; } .content .title p{ margin:0; font-size:100%; } .content .fishc{ margin:0 0 3em; float:right; width:66%; padding-left:30px; } .content .fishc p:first-child{ margin-top:0; font-weight:400; } .content .fishc ul{ color:#aaa; padding-left:0; list-style-type:none; } .content .fishc ul li:before{ content:"-"; margin-right:00.5em; } </style> <body> <div class="timeline"> <div class="content"> <div class="title"> <h3>2022年3月10日    </h3> <p>网站初搭建           </p> </div> <div class="fishc"> <p>利用typecho平台强力推动建站，宝塔平台一键式搭站！</p> <ul> <li>腾讯云租用服务器</li> <li>腾讯云租用网站域名</li> <li>进行网站首次备案</li> </ul> </div> </div> <div class="content"> <div class="title"> <h3>2022年3月11日    </h3> <p>网站首次内容更新     <br>迎接1.0版本！       </p> </div> <div class="fishc"> <p>利用模板更新网站外观,并且进行文章发表</p> <ul> <li>更换主题模板Kratos</li> <li>发表微积分下册全套习题</li> <li>发表Python课后习题源代码</li> </ul> </div> </div> <div class="content"> <div class="title"> <h3>2022年3月21日   </h3> <p>   网站迎来首次重大更新！<br>迎接2.0版本           </p> </div> <div class="fishc"> <p>网站UI的重新更换,采用强力JOE模板,进行多功能扩展！</p> <ul> <li>采用Joe模板，进行了网站外观的重新设计</li> <li>新的独立页面！包括网站作者简介，休闲空间，灵动空间</li> <li>新的首页轮播图！可以快速到达常用站点</li> <li>新的拓展小功能！包括人生倒计时，标签云</li> </ul> </div> </div> </div> </body> </html>
