ol是时间轴简历最稳妥的容器，语义明确、兼容ATS与屏幕阅读器；须用li包裹每段经历，内含ISO格式datetime的time标签、h3标题和p描述，禁用div布局，CSS用伪元素绘制连线与圆点，移动端强制单列，动画用IntersectionObserver实现。
ol 是时间轴简历最稳妥的容器选择，不是 div 或 ul。语义上它天然表达“有序事件流”，屏幕阅读器能正确朗读先后顺序，HR 系统（如 Moka、北森）也能据此提取时间维度结构——用错标签会导致经历被切碎、年份错位、甚至整段丢弃。
用 ol + time 搭建可访问的结构
每个经历必须包裹在 li 内，且内部必须含 time 标签（带 datetime 属性），标题用 h3，描述用 p。不要嵌套 div 做布局，那会污染语义层级。
-
datetime必须是 ISO 8601 格式，比如2022-09-01或2022-09-01T09:00；写2022年9月或22.09会让机器无法解析 - 避免把多个经历塞进同一个
li—— 每个时间点只能对应一个li，否则:nth-child(odd)选中逻辑失效 - 如果某段经历横跨多年（如
2022–2024），用两个time：一个标起始，一个标结束，或用datetime="2022-09/2024-06"（W3C 允许的区间写法）
CSS 不靠绝对定位画线，靠伪元素锚定内容
常见错误是给每个 li 加 position: absolute 然后手动算 top 值。一旦某段描述变长、字体缩放或响应式切换，圆点和连线立刻脱节。
- 给
ol.timeline设position: relative，用::before画主轴线：height: 100%; width: 2px; background: #ccc; - 每个
li设position: relative，圆点用::after绘制，并用left: 50%; transform: translateX(-50%)横向居中对齐主轴线 - 垂直位置由
margin-top或top控制（相对自身），而非固定像素值——这样内容伸缩时，圆点自动随文字基线浮动
左右交替布局只在桌面端启用，移动端强制单列
手机上硬撑左右交错，会导致点击区域重叠、文字挤成一团、日期和正文难以区分。这不是“美观问题”，是可读性崩塌。
- 桌面端用
.timeline li:nth-child(odd) .timeline-content { margin-left: 80px; }和even对应右偏 - 小屏下直接清空所有左右偏移：
@media (max-width: 768px) { .timeline li .timeline-content { margin-left: 0; } } - 同时把
time字体加粗、字号调大一点，别隐藏它——移动端用户更依赖时间锚点快速扫读
滚动动画别用 onscroll，用 IntersectionObserver
监听 scroll 事件做淡入效果，在低端安卓机或 Safari 上极易卡顿，且页面一滚动就触发大量重排。
- 初始化一次
new IntersectionObserver，监听所有.timeline-item进入视口 - 只在回调里加 class（如
is-visible），动画全交给 CSS 的transition和transform - 设
threshold: 0.1，让条目刚露头就触发，比等完全出现更自然
真正难的是保持结构干净。很多人花两小时调圆点颜色和连线粗细，却在第一个 li 里塞了三个 div 包裹日期、公司名、职位——这一处语义污染，会让整条时间轴在 ATS 系统里失去时间维度识别能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
