时间轴应使用语义化 而非 ，确保有序事件流、无障碍访问与SEO；用 标记日期，伪元素绘制主线与圆点并锚定在相对定位容器上，避免绝对定位错位；左右交错通过 CSS align-self 实现，保持DOM顺序一致；移动端改用垂直堆叠与加大圆点，杜绝缩放。
用 <ol></ol> 而不是 <div> 套卡片
<p>时间轴本质是有序事件流，<code><ol></ol> 天然带语义、支持屏幕阅读器识别先后关系、默认序号逻辑可被 CSS 关掉但结构不丢。用一堆 <div> 拼卡片，机器读不出“2023年在前、2024年在后”，SEO 和无障碍都受损。
<p>常见错误：为“省事”直接写 <code><div class="card">
<h3>2023</h3>...</div> 堆叠——后续加打印样式、键盘导航、语义化导出（比如转 PDF 或 PPTX）时全得返工。
- 每个时间节点必须用
<li>，包裹在 <ol class="timeline"></ol> 里
- 日期必须用
<time datetime="2023-01">2023年1月</time>，不能只写纯文本
- 卡片内容区域统一用
<section class="timeline-card"></section> 或 <div class="timeline-content">，别混用标签
<h3>
<code>::before 画主线，::after 画圆点，别用 position: absolute 算 top
<li>，包裹在 <ol class="timeline"></ol> 里<time datetime="2023-01">2023年1月</time>，不能只写纯文本<section class="timeline-card"></section> 或 <div class="timeline-content">，别混用标签
<h3>
<code>::before 画主线，::after 画圆点，别用 position: absolute 算 top靠给每个 <li> 加 position: absolute + 手动设 top: 120px 来对齐圆点，是最容易崩的写法。一旦某张卡片内容变高（比如加了图片或展开详情），连线立刻错位、圆点悬空。
正确做法是让主轴线和圆点都“锚定”在相对定位的容器上：
立即学习“前端免费学习笔记（深入）”；
-
.timeline { position: relative; padding-left: 60px; }—— 主容器留出圆点空间 -
.timeline::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: #ccc; }—— 一条贯穿的纵线 -
.timeline-item::after { content: ""; position: absolute; left: 23px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: #4a90e2; }—— 圆点横坐标固定，纵坐标由top或margin-top控制，随卡片自然上下浮动
左右交替卡片布局用 flex-direction: row + order，但慎用 order
左右交错卡片（左-右-左…）视觉层次强，但很多人滥用 order 属性强行翻转顺序，结果导致 DOM 顺序和视觉顺序不一致——键盘 tab 流、屏幕阅读器播报、打印样式全乱套。
更稳妥的做法是：HTML 保持自然顺序（从上到下），CSS 用 flex 控制每张卡片的排列方向：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.timeline-item:nth-child(odd) .timeline-content { align-self: flex-start; }.timeline-item:nth-child(even) .timeline-content { align-self: flex-end; }- 再配合
.timeline-content { max-width: 60%; }防止文字撑宽
这样 DOM 顺序、视觉顺序、tab 顺序三者完全一致，无障碍和 SEO 都不受损。
移动端不是“缩放”，而是重排卡片流和圆点位置
很多时间轴在手机上直接 transform: scale(0.8) 整体缩小，后果是点击区域变小、文字模糊、圆点边缘发虚。这不是响应式，是偷懒。
真正适配移动端的关键动作是切换布局模型和视觉权重：
- 小屏下把
.timeline改为flex-direction: column，取消左右交错，所有卡片左对齐堆叠 - 圆点从居中纵线移到左侧，用
.timeline-item::after { left: 0; }并加大尺寸（如 16px）增强可触性 -
<time></time>标签加font-weight: bold; font-size: 0.9rem;，确保日期比正文更醒目 - 避免隐藏日期或摘要——移动端更需要快速扫描关键信息
最常被忽略的一点：时间轴的“高度弹性”来自内容本身，而不是靠 JS 计算高度或监听 resize。只要伪元素锚定在相对定位的 <li> 上，卡片内容伸缩时，圆点和连线会自动跟随——这正是纯 CSS 实现可靠性的核心所在。
