纯HTML+CSS可构建清晰可维护物流时间线：用语义化<ol>替代<div>，伪元素绘制竖线与圆点，分离时间与状态标签，移动端横排采用inline-flex布局。
直接用纯 HTML + CSS 就能做出清晰、可维护的物流时间线，根本不需要框架或 JS 渲染——关键在于语义化结构和伪元素控制节点对齐。
用 <ol> 而不是 <div> 套列表
物流节点本质是有序事件流，<ol> 天然语义正确，支持屏幕阅读器顺序播报，也方便后续用 CSS 计数器自动编号。
常见错误是全用 <div> + 手动写“1.”“2.”，结果缩放时字号错位、打印时序号消失、无障碍测试失败。
-
<ol>的reversed属性可倒序显示（如最新节点在最上），但多数场景正序更符合阅读习惯 - 避免给
<li>设固定高度，用 padding 控制行距更安全 - 若需兼容 IE11，
counter-reset需配合counter-increment显式重置，不能只靠<ol>
::before 画时间轴线和圆点，别用图片或额外标签
时间轴的竖线和节点圆点完全可用 CSS 伪元素实现，减少 DOM 节点、避免图片加载失败导致布局塌陷。
立即学习“前端免费学习笔记（深入）”；
典型翻车点：用绝对定位把圆点压在文字左边，结果文字换行后圆点悬空；或用 border-left 画竖线，但首尾节点多出多余线条。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给
<ol>设position: relative，再用::before画贯穿竖线（height: 100%+top: 0） - 每个
<li>的::before画圆点，用transform: translate(-50%, -50%)居中对齐，不依赖固定 margin - 首项
::before加content: ""防止伪元素失效；末项竖线用height: calc(100% - 1em)截断
时间与状态分离写，别塞进同一 <span>
物流节点里“2024-04-05 14:22”和“已签收”语义不同，混写会导致响应式断行错乱、翻译替换困难、SEO 识别率低。
见过最头疼的改需求：运营突然要求所有“已签收”加图标，结果全页面 <span class="status"> 里还裹着时间，改起来像考古。
- 结构推荐：
<time datetime="2024-04-05T14:22">2024-04-05 14:22</time><span class="status">已签收</span> -
<time>标签自带机器可读时间戳，datetime属性值必须是 ISO 8601 格式（如2024-04-05T14:22），否则搜索引擎可能忽略 - 状态文案用独立 class，方便 CSS 控制颜色/图标，也便于 i18n 替换
移动端竖排变横排？先禁掉 flex 横向拉伸
很多教程教用 flex-direction: column 做竖排时间线，结果一加媒体查询切横排，节点宽度撑满屏幕，文字全折行——因为没管 flex-shrink。
真正要的是：竖排时节点自适应宽度，横排时节点紧凑排列不换行，且时间戳右对齐不溢出。
- 横排方案：用
display: inline-flex替代flex，避免父容器强制换行 - 时间戳加
white-space: nowrap+margin-left: auto推到最右，比 text-align 更可靠 - 横排下圆点用
align-self: center垂直居中，别依赖 line-height
最易被忽略的是时间格式一致性：后端返回的 "2024/04/05 14:22:03" 和前端 new Date().toISOString() 差三个字符，<time> 的 datetime 属性就校验失败——得统一转成 YYYY-MM-DDTHH:mm 再塞进去。
