纯 HTML + CSS 可实现静态物流时间轴：用语义化 + + 结构，伪元素 ::before 绘制垂直线与圆点，position: relative 防止定位偏移，响应式需处理窄屏断行与 IE/Safari 兼容性。
怎么用纯 HTML + CSS 实现物流时间轴（不依赖 JS）
能，但仅限静态展示。HTML 本身不处理数据或动态更新，所谓“时间轴”本质是结构化标记 + CSS 排版。关键在语义化标签选择和伪元素控制连线与节点。
-
<ol></ol>比<div> 更合适：物流节点天然有序，用有序列表语义准确，屏幕阅读器可识别顺序 <li>每个物流项用 <code><li>，时间用<time></time>标签包裹（如<time datetime="2024-05-20T14:30">2024-05-20 14:30</time>），利于 SEO 和辅助工具解析 - 连线别用图片或 JS 绘制——用
::before或::after伪元素 +border-left做垂直线，节点用border-radius+background圆点 - 注意移动端断行：
<time></time>内容建议拆成两行（如用<br>或 flex 布局），否则窄屏下时间/状态挤成一团 - 每个
<li>必须加position: relative，否则::before的绝对定位会相对于<ol></ol>顶部计算 - Safari 对
flex+align-items: center下的伪元素支持不稳定，改用display: grid或显式设置top: 50%+transform: translateY(-50%) - IE11 不支持
gap，用margin-bottom控制<li>间距，同时给最后一个<li>margin-bottom: 0避免多余空白 - 圆点大小统一用
em或rem，别用px——字体缩放时，px圆点会和文字失配 - 后端返回的标准物流数组（如
traces字段）里，确保每项含time（ISO 格式）、ftime（格式化后时间）、context（描述） - JS 只负责遍历生成
<li>字符串，插入<ol id="logistics-timeline"></ol>，不操作样式类名或 DOM 属性 - 避免在 JS 里拼接完整 HTML 字符串（易 XSS），用
document.createElement+textContent更安全 - 如果后端不能返回 ISO 时间，前端用
new Date().toISOString()转一次再塞进<time datetime="..."></time>，否则datetime属性失效 - Ant Design 的
<timeline></timeline>依赖 React 运行时，纯静态 HTML 页面根本跑不起来 - 类似
vue-timeline也需 Vue 环境，且默认样式难覆盖，微调一个圆点颜色可能要写三层!important - 真实物流页常嵌在 H5 或邮件模板中，JS 执行环境受限（如微信内核禁用某些 API），CSS-only 方案更稳
- 唯一真需求是「按时间倒序」——后端返回时就
ORDER BY time DESC，前端别自己 reverse，避免时区转换出错
CSS 时间轴常见错位问题（特别是 IE 和 Safari）
伪元素定位偏移、圆点不对齐、连线断开，八成是因为父容器没设 position: relative 或 line-height 干扰了基线对齐。
从 JSON 物流接口渲染到 HTML 时间轴的最小可行链路
纯 HTML 无法发请求，必须借助 JS。但逻辑可以极简：只做数据映射，样式仍由 CSS 控制。
为什么不用第三方时间轴组件（比如 Ant Design Timeline）
除非项目已用对应 UI 库，否则为物流页单独引入几十 KB 的组件库，得不偿失。原生方案体积小、加载快、定制自由度高。
立即学习“前端免费学习笔记（深入）”；
time 字段有时是字符串有时是时间戳，有时还带时区偏移），这种细节比 CSS 排版更容易卡住上线。
