HTML简历制作怎么排版工作经历？时间线设计指南-html教程-PHP中文网

时间线应使用语义化标签并配合data-year属性实现响应式布局，确保无障碍访问与多端视觉连贯：年份用css伪元素插入、固定宽度右对齐，移动端改为块级垂直堆叠以适配阅读习惯。

html简历制作怎么排版工作经历？时间线设计指南

工作经历用垂直时间线排版最清晰，但直接套用 CSS Flex 或 Grid 容易在响应式下错位、年份对不齐、移动端堆叠混乱——关键不是“怎么画线”，而是“怎么让时间轴在不同设备上都保持语义正确和视觉连贯”。

用 <ol></ol> 而不是 <div> 包裹时间线<p>时间线本质是有序事件序列，<code><ol></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> 套 <code><ul></ul> 或纯 <section></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，避免文字长度差异导致左边界晃动

示例：

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

前端工程师

XX科技有限公司

ol.timeline li::before {
  content: attr(data-year);
  position: absolute;
  left: 0;
  width: 6em;
  text-align: right;
  font-size: 0.875em;
  color: #666;
}