语义清晰的时间轴应使用ul+li结构，配合time标签和纯css伪元素实现，避免绝对定位与复杂框架；响应式下移除竖线、调整布局，并注重文字可读性与信息密度。

用 ul + li 实现语义清晰的时间轴结构

时间轴本质是带顺序的事件列表，ul 天然适合——不用 div 堆砌，屏幕阅读器能识别序号，后期加 JS 交互也方便。关键不是“炫酷”，而是结构不垮、文字不叠、时间不跑偏。

必须避免直接套用 CSS 框架的「timeline」组件：它们常依赖复杂嵌套或 JS 初始化，新手改起来容易断样式。下面这个结构只用原生 HTML + 纯 CSS，所有层级控制在 3 层以内：

• 2024-03-15

  新闻标题一

  这是第一条新闻的简要内容……

• 2024-03-18

  新闻标题二

  这是第二条新闻的简要内容……

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

用 ::before 画竖线和圆点，避开定位陷阱

新手最容易卡在“怎么让圆点居中对齐”——别用 position: absolute 去硬调，它依赖父容器 position: relative，稍一改结构就错位。用伪元素更稳：

• ul.timeline 设为 position: relative，只设一次
• 每个 li 的左侧用 li::before 画圆点，li::after 画竖线（或反过来）
• 圆点用 border-radius: 50% + background，别用图片或字体图标——加载快、缩放不变形
• 竖线高度靠 height: 100% 自适应，但必须确保 li 有明确高度（比如 min-height: 80px），否则竖线会塌

响应式断点只设一个：768px 下取消竖线，改用间距分隔

手机屏上竖线挤占空间、圆点偏移、文字换行错乱——这不是代码写错了，是强行保留桌面端布局。真实做法是果断放弃竖线：

• 在 @media (max-width: 768px) 里，把 li::after（竖线）设为 display: none
• 给 li 加 padding-top: 24px 和 border-top: 1px solid #eee，模拟“分隔感”
• time 标签从左侧移到顶部，display: block，字体加粗，比悬在左边更易读
• 别碰 transform: scale() 或 zoom——移动端缩放会触发双击放大，破坏体验

字体、颜色、行高这些细节决定是否“像新闻”

时间轴不像新闻，往往是因为文字太轻、时间太小、段落太密。新手可直接抄这几条：

• time 用 font-size: 0.85em + color: #666，别用灰色过深（如 #999），手机上看不清
• h3 用 margin: 0.5em 0 0.4em，留出呼吸感；加 line-height: 1.3 防止标题字挨太近
• p 用 margin: 0 0 1em + font-size: 0.95em，比正文略小但不能小太多，否则像摘要而非新闻
• 整条 li 的左右 padding 控制在 1.2em 以内，太宽在手机上会触发横向滚动

真正难的不是写出第一版，而是删掉那些“看起来高级但实际没用”的动画、渐变、阴影——新闻列表的核心是信息密度和可扫读性，不是视觉特效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！