时间线：用HTML和CSS记录历史，展现时间魅力！

2022-12-10 13:45:17

用HTML和CSS创建简洁美观的时间线

准备工作

踏上创建时间线的旅程，你需要几样趁手的工具：一个代码编辑器，一个浏览器，以及HTML和CSS文件。

HTML结构

想象一下时间线就像一条时光长廊，你需要用HTML来搭建它的框架。创建一个HTML文件，填充以下代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>时间线</h1>
  <ul id="timeline">
  </ul>
</body>
</html>

CSS样式

现在，是时候让时间线变漂亮了！创建一个CSS文件，添加一些时尚元素：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

ul#timeline {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li.timeline-item {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

li.timeline-item:last-child {
  border-bottom: none;
}

.timeline-date {
  font-weight: bold;
}

.timeline-content {
  margin-left: 20px;
}

添加时间线项目

如同串珠一般，你需要把一个个时间线项目串联起来。在HTML文件中添加以下内容：

<li class="timeline-item">
  <div class="timeline-date">1989</div>
  <div class="timeline-content">
    <p>柏林墙倒塌</p>
  </div>
</li>

<li class="timeline-item">
  <div class="timeline-date">1991</div>
  <div class="timeline-content">
    <p>苏联解体</p>
  </div>
</li>

<li class="timeline-item">
  <div class="timeline-date">2001</div>
  <div class="timeline-content">
    <p>9/11袭击事件</p>
  </div>
</li>