时间轴应使用语义化 而非 ，确保有序事件流、无障碍访问与SEO；用 标记日期，伪元素绘制主线与圆点并锚定在相对定位容器上，避免绝对定位错位；左右交错通过 CSS align-self 实现，保持DOM顺序一致；移动端改用垂直堆叠与加大圆点，杜绝缩放。

用

而不是

套卡片

时间轴本质是有序事件流，

天然带语义、支持屏幕阅读器识别先后关系、默认序号逻辑可被 CSS 关掉但结构不丢。用一堆

拼卡片，机器读不出“2023年在前、2024年在后”，SEO 和无障碍都受损。

常见错误：为“省事”直接写

2023

...

堆叠——后续加打印样式、键盘导航、语义化导出（比如转 PDF 或 PPTX）时全得返工。

• 每个时间节点必须用
• ，包裹在
  里
• 日期必须用 2023年1月，不能只写纯文本
• 卡片内容区域统一用
  或
  ，别混用标签

  ::before 画主线，::after 画圆点，别用 position: absolute 算 top

  靠给每个

• 加 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 控制每张卡片的排列方向：

  • .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 都不受损。

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  移动端不是“缩放”，而是重排卡片流和圆点位置

  很多时间轴在手机上直接 transform: scale(0.8) 整体缩小，后果是点击区域变小、文字模糊、圆点边缘发虚。这不是响应式，是偷懒。

  真正适配移动端的关键动作是切换布局模型和视觉权重：

  • 小屏下把 .timeline 改为 flex-direction: column，取消左右交错，所有卡片左对齐堆叠
  • 圆点从居中纵线移到左侧，用 .timeline-item::after { left: 0; } 并加大尺寸（如 16px）增强可触性
  • 标签加 font-weight: bold; font-size: 0.9rem;，确保日期比正文更醒目
  • 避免隐藏日期或摘要——移动端更需要快速扫描关键信息

  最常被忽略的一点：时间轴的“高度弹性”来自内容本身，而不是靠 JS 计算高度或监听 resize。只要伪元素锚定在相对定位的

• 上，卡片内容伸缩时，圆点和连线会自动跟随——这正是纯 CSS 实现可靠性的核心所在。