原生HTML，纯CSS的时间线、大事记Demo代码分享。无任何js库，css库，简单的时间线demo。代码已被压缩，请复制后使用美化工具，转移工具进行重新排版。本站有空再引入美化库。
<!DOCTYPE html><html lang="zh-CN"><!-- 云U盘原创Demo www.yunupan.cn --><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时间线Demo</title> <style> .timeline { position: relative; max-width: 600px; margin: 0 auto; } .timeline-event { background: #fff; padding: 20px; border-radius: 8px; margin: 20px 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: relative; } .timeline-dot { position: absolute; left: -36px; /* 点的水平位置 */ top: 30px; /* 点的垂直位置 */ width: 20px; /* 点的宽 */ height: 20px; /* 点的高 */ background: #be2600; border-radius: 50%; /* 圆形 */ border: 3px solid white; /* 白色边框 */ } .timeline-year { font-weight: 500; font-size: 1.6em; color: #878787; } .timeline-content h2 { margin: 0; font-size: 1.2em; } .timeline-content p { margin: 5px 0 0; } /* 在时间线的左边添加一条线 */ .timeline-event::before { content: ''; position: absolute; left: -25px; top: -20px; width: 3px; background: #be2600; border-radius: 5px; height: 130%; } </style></head><body> <div class="timeline"> <div class="timeline-event"> <div class="timeline-dot"></div> <div class="timeline-year">2024</div> <div class="timeline-content"> <h2>云U盘</h2> <p>云U盘官网上线试运营，YunUPan.cn</p> </div> </div> <div class="timeline-event"> <div class="timeline-dot"></div> <div class="timeline-year">2020</div> <div class="timeline-content"> <h2>网站开发</h2> <p>对网站进行设计，开发</p> </div> </div> <div class="timeline-event"> <div class="timeline-dot"></div> <div class="timeline-year">2015</div> <div class="timeline-content"> <h2>域名注册</h2> <p>注册购买了网站域名</p> </div> </div> </div></body></html>
