最简时间线用语义化 <ol><li><time><h3><p> 结构，CSS 通过 ::before 伪元素绘制竖线与圆点，响应式下小屏转卡片流，IE11 需兼容 <time> 标签与伪元素定位。
用纯 HTML + CSS 实现最简时间线结构
时间线不需要 JavaScript 就能跑起来，核心是语义化结构 + 垂直流式布局。关键不是“画线”，而是让每个时间节点在视觉上对齐、可读、可维护。
-
<ol>是首选容器——天然有序、语义正确、默认数字序号可直接利用（或用list-style: none关掉） - 每个时间点用
<li>包裹，内部拆分为<time>（日期）、<h3>（标题）、<p>（内容），这样利于 SEO 和屏幕阅读器 - 避免用
<div>堆砌，否则后期加 ARIA 或响应式会多写一倍样式
CSS 控制时间线的垂直对齐与连接线
连接线本质是伪元素 + 绝对定位，不是背景图也不是 border。容易出错的地方是父容器没设 position: relative，导致 ::before 脱离预期位置。
- 给
<ol>设position: relative和padding-left: 2rem（留出时间点图标空间） - 用
<ol>::before画竖线：content: ""+position: absolute+left: .75rem+top: 0+bottom: 0+width: 2px+background: #ccc - 每个
<li>里用::before画圆点：position: absolute+left: .65rem+top: .5rem+width: 12px+height: 12px+border-radius: 50%+background: #fff+border: 2px solid #333
响应式断点下时间线怎么不乱套
小屏时竖排时间线会挤成一团，尤其文字多的条目。不能只靠 flex-wrap，得主动降级为“单列卡片流”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在
@media (max-width: 768px)中，把<ol>的padding-left改成0，隐藏竖线（<ol>::before { display: none }） - 每个
<li>设margin-bottom: 1.5rem，去掉绝对定位的圆点，改用background: url("data:image/svg+xml,...") no-repeat left center / 16px内嵌 SVG 圆点，避免 base64 失真 - 强制
<time>显示为块级：display: block+font-size: .85em+color: #666，避免日期和标题挤在同一行
IE11 兼容要注意的三个硬伤
IE11 不支持 position: sticky、gap、aspect-ratio，但时间线本身不依赖这些。真正卡住的是伪元素层级和 <time> 标签。
立即学习“前端免费学习笔记（深入）”；
-
<time>在 IE11 中无样式且不被识别为有效 HTML5 元素，必须加document.createElement("time")到 JS 初始化里，或直接换用<span class="date"> - IE11 下
::before在<li>里可能错位，解决方法是给<li>加zoom: 1触发 hasLayout - 竖线如果用
linear-gradient实现，在 IE11 会失效，必须退回用background-color+ 固定宽高的 div 模拟（但更推荐直接用纯色background，简单可靠）
时间线看着简单，但动到伪元素、absolute 定位、HTML5 语义标签时，浏览器兼容和响应式切换就是连环扣。别在第一个 <li> 上调半天颜色，先确保结构能撑住 IE11 和 iOS Safari 12。
