纯HTML+CSS可构建真正可用的响应式时间轴，关键在于语义化结构：必须用<ol>而非<div>或<ul>，因其天然支持有序事件流、屏幕阅读器播报、SEO抓取及缩放稳定；每个事件用<li>包裹，内嵌<time datetime="ISO8601">确保机器可读；竖线用<ol>::before实现，圆点用<li>::after定位，移动端应降级为卡片流而非缩放。
纯 HTML + CSS 就能做出真正可用的响应式时间线，不需要 JS 渲染或框架——关键不是“怎么画线”，而是结构语义是否扛得住缩放、内容增减和屏幕阅读器。
用 <ol> 而不是 <div> 套列表
时间轴本质是有序事件流，<ol> 天然带序号逻辑、无障碍支持、SEO 友好。用一堆 <div class="timeline-item"> 会导致屏幕阅读器读不出先后关系，后期加 ARIA 或改版成本翻倍。
- 每个事件必须用
<li>包裹，内部嵌套<time datetime="2024-03-15">2024年3月15日</time>——机器可读性靠这个，不是靠 class 名 - 避免
list-style: none后再用伪元素重画圆点；保留默认序号或用counter-reset自定义更稳 - IE11 下
<time>标签不被识别，必须提前执行document.createElement("time")，否则日期样式全丢
<ol>::before 画竖线，别用绝对定位“蒙”位置
常见错误是给每个 <li> 加 position: absolute 再手动算 top 值——一旦某条内容多两行，整条线就错位。正确做法是让主轴线由容器控制，节点只负责锚定。
-
<ol>设position: relative和padding-left: 2rem（留出圆点空间） -
<ol>::before：用content: ""+position: absolute+left: .75rem+top: 0+bottom: 0+width: 2px+background: #ccc - 每个
<li>的圆点用::after，position: absolute+left: .65rem+top: .5rem，垂直位置靠margin-top或top微调，而非固定像素坐标
移动端不是“缩小”，而是“降级为卡片流”
很多时间线在手机上用 transform: scale(0.8) 整体缩放，结果文字糊、点击区域小、日期和标题挤成一团。这不是响应式，是偷懒。
立即学习“前端免费学习笔记（深入）”；
- 在
@media (max-width: 768px)中：<ol>::before { display: none }，去掉竖线 -
<li>改为display: block+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，确保日期独立成行、可读
左右交替布局慎用 :nth-child 控制对齐
想让内容分列时间线两侧？用 :nth-child(odd) 和 :nth-child(even) 看似简单，但一旦中间插入新条目或后端动态渲染顺序变化，视觉就全乱。更可靠的是靠结构本身区分。
- 如果真要交替，把左右逻辑写进 HTML：
<li class="timeline-item timeline-left">和<li class="timeline-item timeline-right"> - CSS 里用
.timeline-left .timeline-content { text-align: right; }+margin-right: 3rem，避免依赖序号 - Flexbox 布局时，
flex-direction: column是安全选择；gap属性 IE11 不支持，得用margin替代
最易被忽略的点：时间线不是“做完就完”，而是“内容一变就崩”。圆点是否随内容高度自动居中、小屏下日期是否仍可点击、IE11 是否还能读出时间——这些才是决定它能不能上线的关键。
