当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5时间轴制作与布局技巧

HTML5时间轴制作与布局技巧

2026-01-06 21:32:55 0浏览收藏

使用HTML5结构搭建时间线基础

时间轴的核心是清晰的结构。使用

、

或等语义化标签有助于提升可访问性和代码可读性。

示例结构：


  
    2023年1月
    
      项目启动
      完成项目立项与团队组建
    
  
  
    2023年6月
    
      功能上线
      核心功能正式发布

利用CSS3实现左右交替时间线布局

常见的时间轴样式是左右交替排列，视觉上更富动感。可通过Flexbox或Grid布局结合伪类选择器实现。

关键CSS技巧：

使用display: flex配合flex-direction: column垂直排列条目
通过:nth-child(odd)和:nth-child(even)控制奇偶项内容对齐方向
添加时间轴中线：用::before在容器上绘制垂直线条
为每个条目添加小圆点作为时间标记，使用::after伪元素

示例样式片段：

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}
.timeline::before {
  content: '';
  position: absolute;
  width: 2px;
  background: #ddd;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.timeline-item {
  display: flex;
  margin-bottom: 30px;
  position: relative;
}
.timeline-time {
  width: 45%;
  text-align: right;
  padding-right: 20px;
}
.timeline-content {
  width: 45%;
  padding-left: 20px;
  position: relative;
}
.timeline-item:nth-child(even) .timeline-time {
  text-align: left;
  padding-right: 0;
  padding-left: 20px;
}
.timeline-item:nth-child(even) .timeline-content {
  text-align: left;
  padding-left: 0;
  padding-right: 20px;
}
.timeline-item::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #007cba;
  border-radius: 50%;
  top: calc(50% - 6px);
  left: 50%;
  transform: translateX(-50%);
}