用语义化 或 搭建时间线结构， 包裹含 、、 的卡片，伪元素 ::before 绘制连线与圆点，统一用 margin-block-start 控制间距，确保可访问性与响应式。
怎么用纯 HTML + CSS 实现响应式时间线卡片
不用框架也能做清晰、可读、能适配手机的时间线，关键是把语义结构搭对，再用 CSS 控制视觉流向。核心不是“画线”，而是让 <ol></ol> 或 <ul></ul> 的序号承担时间顺序逻辑，用 ::before 和定位补连线和圆点。
常见错误是直接用一堆 <div> 堆叠绝对定位，结果一换屏幕就错位、无法键盘导航、打印时空白——时间线本质是**有序事件流**，该用 <code><ol></ol> 就别绕开。
- 用
<ol reversed></ol>可快速倒序（比如展示“最近 5 次更新”），但注意 Safari 对reversed的start属性支持不一致 - 每张卡片用
<li>包裹，内部结构保持一致：<time></time>标记日期、<h3></h3>作标题、<p></p>放正文 - 连线不要用图片或 border 模拟：用伪元素
::before绘制垂直线，配合transform: scaleY()避免重绘开销
CSS 时间线样式里最易翻车的三个地方
视觉上“竖着排”不难，难在横屏、小屏、高对比度模式下仍可用。下面三点改完就能避开 80% 的线上问题：
-
line-height和padding混用导致卡片间距忽大忽小：统一用margin-block-start控制<li>间距，避免继承干扰 - 时间点圆点用
border-radius: 50%但没设flex-shrink: 0：在窄屏下被压缩变形，加min-width: 1.2em和min-height: 1.2em更稳 - 垂直线用
height: 100%却没给父容器设position: relative：结果线只撑开第一项高度，必须确保<ol></ol>或包裹<li>的容器有定位上下文
如何让时间线支持键盘焦点与屏幕阅读器
很多团队上线后才发现时间线在 VoiceOver 或 NVDA 下读不出顺序，甚至跳过全部内容——问题往往出在 ARIA 和原生语义没对齐。
- 别给
<li>加role="listitem"：它本来就是，多余 role 会覆盖原生语义 - 时间字段必须用
<time datetime="2024-06-12">2024年6月</time>，不能只写文字，否则屏幕阅读器读不出具体日期 - 如果某张卡片含操作按钮（如“查看详情”），确保
<li>本身不设tabindex="-1"，否则键盘用户无法按顺序进入 - 避免用
aria-hidden="true"隐藏装饰性圆点或连线：它们本就不该被读取，CSS 的visibility: hidden或width: 0; height: 0更安全
要不要用 JavaScript 动态加载时间线？
绝大多数静态时间线完全不需要 JS。只有两个真实场景值得加脚本：
- 需要按年份折叠/展开（比如点击“2023”才拉出当年全部条目）：用
details/summary原生标签就能实现，无需 JS - 从 API 拉取数据且条目数不确定（>50 条）：这时用
IntersectionObserver做懒加载比一次性渲染更稳，但注意 fallback——JS 关闭时仍要保证<ol></ol>内容可见 - 千万别为“滚动时高亮当前项”加监听：浏览器原生
:target或 URL hash（如#event-3）配合<li id="event-3">就够用，更轻、更可靠
真正容易被忽略的是时间格式本地化：服务端返回 ISO 8601（2024-06-12T09:30:00Z），前端用 new Date().toLocaleDateString() 渲染，但别在 HTML 里硬编码中文“2024年6月”，否则搜索引擎和翻译工具会失效。
