html时光轴代码

赵幸婉 3周前 11浏览 0评论

HTML是一种标记语言，用于制作万维网上的网页。一个网页由HTML文档描述，HTML文档由标签组成。时光轴是网页中常用的一种交互式图表，可以很好地呈现时间序列数据。下面是一个HTML时光轴的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的时光轴</title>
  <style>
    .timeline {
      position: relative;
      margin: 50px 0;
    }
    .timeline::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      background-color: #000;
      transform: translateX(-50%);
    }
    .timeline-item {
      position: relative;
      width: 50%;
      margin: 0 0 20px;
    }
    .timeline-item::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -3px;
      width: 6px;
      height: 6px;
      background-color: #000;
      border-radius: 50%;
    }
    .timeline-item::after {
      content: '';
      position: absolute;
      top: 8px;
      left: -20px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-right: 10px solid #000;
      border-bottom: 10px solid transparent;
    }
    .timeline-item:last-child {
      margin-bottom: 0;
    }
    .timeline-item:nth-child(even) {
      float: right;
      text-align: left;
    }
    .timeline-item:nth-child(even)::after {
      left: auto;
      right: -20px;
      border-right: 0;
      border-left: 10px solid #000;
    }
  </style>
</head>
<body>
  <div class="timeline">
    <div class="timeline-item">
      <h3>2010年</h3>
      <p>我开始学习编程。</p>
    </div>
    <div class="timeline-item">
      <h3>2012年</h3>
      <p>我参加了第一次编程比赛。</p>
    </div>
    <div class="timeline-item">
      <h3>2015年</h3>
      <p>我获得了编程比赛一等奖。</p>
    </div>
    <div class="timeline-item">
      <h3>2018年</h3>
      <p>我成为了一名优秀的开发工程师。</p>
    </div>
  </div>
</body>
</html>

这个时光轴由一个外层容器和多个时间轴项目组成。容器使用相对定位，为了将时间轴连接线放在中央对齐。连接线是一个伪元素，在容器的后面使用绝对定位，并设置背景颜色和宽度等属性。时间轴项目使用相对定位和浮动布局。左侧的时间轴项目使用左浮动和靠右对齐，右侧的时间轴项目使用右浮动和靠左对齐。时间轴项目的图标和箭头使用伪元素的方式实现。最后一个时间轴项目为了避免多余的下边距，单独设置了一个样式。

上一篇 jquery 修改anmiate

下一篇 python3 点设置

网站导航

网站导航

最近发表

文章归档

html时光轴代码