时间线应使用语义化<ol>标签并配合data-year属性实现响应式布局，确保无障碍访问与多端视觉连贯：年份用CSS伪元素插入、固定宽度右对齐，移动端改为块级垂直堆叠以适配阅读习惯。
工作经历用垂直时间线排版最清晰，但直接套用 CSS Flex 或 Grid 容易在响应式下错位、年份对不齐、移动端堆叠混乱——关键不是“怎么画线”，而是“怎么让时间轴在不同设备上都保持语义正确和视觉连贯”。
用 <ol> 而不是 <div> 包裹时间线
时间线本质是有序事件序列，<ol> 提供原生语义、默认序号、可访问性支持（屏幕阅读器能读出“第1项、第2项”），且比手动写 counter-reset 更可靠。别为了“去掉默认序号”就弃用它——用 CSS 隐藏即可：
ol.timeline {
list-style: none;
padding: 0;
}
ol.timeline li {
position: relative;
padding-left: 2rem;
}
ol.timeline li::before {
content: "";
position: absolute;
left: 0;
top: 0.75rem;
width: 2px;
height: calc(100% - 1.5rem);
background: #333;
}这样既保留语义，又完全控制样式。用 <div> 套 <ul> 或纯 <section> 会丢失顺序信息，打印或无障碍模式下容易乱序。
data-year 属性替代纯文本年份 + 绝对定位陷阱
把年份写死在 HTML 里（如 <span>2022–2024</span>）会导致两个问题：一是无法统一格式化（比如想全站转为「2022.03–2024.08」）；二是用 position: absolute 把年份拽到左边，容易在缩放或高 DPI 屏幕上偏移。更稳的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
data-year="2022–2024"存年份，HTML 里只留结构 - 用 CSS 的
::before结合attr(data-year)插入，保证内容与样式分离 - 年份容器设固定宽（如
width: 6em）、text-align: right，避免文字长度差异导致左边界晃动
示例：
<li data-year="2022–2024"> <h3>前端工程师</h3> <p>XX科技有限公司</p> </li>
ol.timeline li::before {
content: attr(data-year);
position: absolute;
left: 0;
width: 6em;
text-align: right;
font-size: 0.875em;
color: #666;
}移动端断点要重排结构，不能只靠 flex-direction: column
很多教程在小屏时只改 flex-direction，结果年份、标题、描述全挤成一列，视觉权重全乱。真实可用的方案是：
- 在
@media (max-width: 768px)下，把li设为display: block，取消所有绝对定位 - 年份用
display: block放在顶部，加font-weight: bold强化层级 - 用
margin-bottom: 1.25rem明确分隔每段经历，比“画线”更适应窄屏阅读节奏 - 避免在移动端还强行维持“左侧竖线+右侧内容”的布局，人眼在手机上习惯自上而下扫视，不是左右对比
时间线真正的难点不在怎么画那条线，而在于让每个 <li> 在任意宽度下都能独立表达“一段完整经历”——年份可读、公司名可辨、角色不被截断。样式可以简化，但结构语义和响应逻辑一旦松动，简历在 HR 快速滑动时就容易被跳过。
