纯CSS垂直时间轴应使用语义化结构，通过position: relative配合::before（主线）和::after（圆点）实现，用:nth-child(odd/even)控制左右交替，CSS变量管理颜色与尺寸，并通过@media (prefers-color-scheme: dark)和(forced-colors: active)保障深色模式与高对比度可访问性。
怎么用纯 CSS 实现垂直时间轴（Timeline）
不用 JS、不依赖框架，纯 HTML + CSS 就能做出响应式垂直时间轴。关键在 position: relative 和 ::before/::after 的组合使用，而不是靠 flex 或 grid 堆砌结构。
常见错误是直接给每个时间项加 margin-top 模拟间距，结果一改字体或屏幕尺寸就错位；或者用绝对定位硬写 top 值，导致内容无法流式伸缩。
- 时间轴主线用伪元素
::before绘制，绑定在父容器上，避免每个子项重复渲染 - 每个时间点用
position: relative定位，再用::after画圆点，确保圆点始终居中于文字左侧 - 左右交替布局？别用 class 切换 left/right，改用
:nth-child(odd)和:nth-child(even)控制text-align和padding-left/padding-right - 移动端建议把垂直轴转为水平滚动（
overflow-x: auto+white-space: nowrap），比强行折叠更易读
HTML 结构怎么组织才利于维护
结构越扁平，CSS 越好控制。不要嵌套多层 div，也不要为了“语义化”硬套 article 或 section —— 时间轴本质是有序列表，用 ol 最合适。
错误结构：
- 推荐用
- ...
reversed属性倒序 - 时间点日期建议单独包裹在
中，便于无障碍访问和 SEO - 避免在 HTML 里写内联样式（如
style="left: 20px;"），所有偏移、颜色、间距全走 CSS 变量，比如--timeline-dot-size: 12px
CSS 里哪些属性最容易引发布局断裂
transform: translateX(-50%) 是最常被滥用的“居中技巧”，但它会让元素脱离文档流，如果父容器没设 min-height 或 overflow: hidden，可能导致时间轴线被截断。
另一个坑是 line-height 和 font-size 不匹配：当文字换行时，::after 圆点会卡在第一行末尾，而不是整体内容左侧中间。
- 圆点垂直居中用
top: 50%; transform: translateY(-50%)，不是translateX(-50%) - 主线高度用
height: 100%+ 父容器min-height: 100vh保底，防止内容少时轴线过短 - 文字块用
display: inline-block包裹，再配vertical-align: middle，比浮动或 flex 更可控 - IE11 不支持
::marker，若需兼容，ol的序号必须用counter-reset+counter-increment手动实现
如何让时间轴适配深色模式和高对比度
很多人只写一套颜色，等用户开系统深色模式才发现时间轴线变成黑底黑线，直接消失。这不是“加个 @media (prefers-color-scheme: dark)”就能解决的 —— 关键是把颜色抽成 CSS 变量，并在根节点初始化。
更隐蔽的问题是：高对比度模式下，border 和 background 可能被系统强制重置，仅靠颜色变量不够，得补一层 outline 或 box-shadow 作后备。
- 定义变量如
--timeline-line-color: #e0e0e0，并在:root和@media (prefers-color-scheme: dark)里分别赋值 - 圆点用
border: 2px solid var(--timeline-dot-color)+background: var(--timeline-dot-bg)双保险 - 对高对比度用户，加
@media (forced-colors: active)，把border改为outline: 2px solid ButtonText - 禁用
transition: all，深色模式切换时颜色跳变明显；只对background-color和color做过渡
时间轴看着简单，但真正要兼顾可访问性、主题切换、缩放、打印样式，光靠复制粘贴代码很容易漏掉 forced-colors 或 reduced-motion 这类媒体查询。动手前先想清楚：这个时间轴最终会在哪几种上下文中被阅读？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
