HTML中如何实现纯CSS的时间轴组件-html教程-PHP中文网

必须用+：明确表达事件先后顺序，保障读屏器播报、打印与seo；提供机器可读时间语义，禁用/。

html中如何实现纯css的时间轴组件

必须用 <ol></ol> + <time></time>，否则语义丢失、读屏器失效、打印错乱、SEO 折损——这不是“推荐”，是硬性前提。

为什么不能用 `<div> 或 <code><ul></ul>` 套结构
时间轴描述的是「有明确先后顺序的事件流」，`<ol></ol>` 的语义就是 ordered list，浏览器和读屏器会按序号播报、跳转、导航；`<ul></ul>` 表示无序集合，`<div> 完全无语义。常见错误是直接抄框架组件代码，里面全是嵌套 <code><div class="timeline-item">，结果：屏幕阅读器读成“一个容器、一个容器、一个容器”，用户根本无法感知顺序；打印时列表项堆叠或换行异常；搜索引擎也抓不到时间逻辑。<p>正确做法是每个节点用 <code><li>` 包裹，日期必须用 `<time datetime="2024-03-15">2024年3月</time>`，`datetime` 属性必须是 ISO 8601 格式（如 `2024-03-15` 或 `2024-03-15T14:30`），否则浏览器无法识别为时间点。

`::before` 和 `::after` 怎么画线与圆点才不抖动

核心是让竖线和圆点脱离文档流，避免影响文字排版或触发重排。典型错误是给 <ol></ol> 加 border-left: 2px solid #ccc，结果每项左侧多出 2px，悬停时内容左右晃动；或者用 position: absolute 硬写 top: 40px，一改字体大小或缩放就偏移。

应这样写：

.timeline {
  position: relative;
  padding-left: 40px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ddd;
}
.timeline li {
  position: relative;
  padding: 16px 0;
}
.timeline li::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #333;
}

关键点：

::before 画主线，position: absolute + top/bottom: 0 确保撑满高度，不随内容伸缩错位
::after 画圆点，用 transform: translateY(-50%) 居中，比固定 top: Xpx 更健壮
所有定位值（left: 20px, left: 16px）用固定像素，避免用 em 或 rem 导致缩放时错位

左右交替布局在小屏下怎么不崩

PC 端常用 :nth-child(odd) 左对齐、:nth-child(even) 右对齐来提升可读性，但小屏强行维持会导致内容被挤出视口或重叠。不要用媒体查询去“覆盖”左右 margin，那只是掩盖问题。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

更稳妥的做法是：小屏下统一改为单侧布局，并重置伪元素位置：

@media (max-width: 768px) {
  .timeline {
    padding-left: 0;
  }
  .timeline::before {
    left: 12px;
  }
  .timeline li::after {
    left: 8px;
  }
  .timeline li {
    padding-left: 32px;
  }
  /* 彻底放弃左右交替，全部靠左 */
  .timeline li:nth-child(even),
  .timeline li:nth-child(odd) {
    text-align: left;
  }
}

注意：@media 里不要只改 margin，要同步调整 ::before 和 ::after 的 left 值，否则圆点会漂移到文字外边。