在本教程中，您将学习如何为希望以时间顺序（或反向时间顺序）显示的一组相关事件创建响应时间线。这可用于显示重要的公司里程碑，新闻或个人事件。我以个人旅行事件为例。这是在本教程结束时您将能够创建的。
桌面检视
小型平板电脑/移动景观
移动人像视图
您需要掌握一些html和css的基础知识。让我们开始吧。
配置创建一个空白html文档并将其命名index.html。添加基本的html框架。如果您使用visual studio code，则只需输入“！”。然后按回车。您将最终获得此结果。
1个
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1.0>
<title>document</title>
</head>
<body>
</body>
</html>
我使用的字体是“ noto sans”，字体的权重为300和700。因此，请在title标签下面添加以下行，以使用google字体嵌入该字体。
1个
<link href=https://fonts.googleapis.com/css2?family=noto+sans:wght@400;700&display=swap rel=stylesheet>
创建样式表并将其命名为style.css。使用以下方法将样式表链接到google字体cdn链接下方的html文档：
1个
<link rel=stylesheet href=style.css>
裸露的骨骼结构首先创建时间轴结构，然后在下一部分中添加内容并设置样式。
的html将此添加到您的标记：
1个
2
3
4
5
6
7
8
9
10
11
<div class=timeline>
<div class=container container-left>
<div class=content></div>
</div>
<div class=container container-right>
<div class=content></div>
</div>
<div class=container container-left>
<div class=content></div>
</div>
</div>
的css在中style.css，从所有元素的常见样式开始：
1个
2
3
4
5
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
将以下样式添加到body元素中：
1个
2
3
4
5
6
body {
background-color: #edf2f7;
font-family: 'noto sans', sans-serif;
font-size: 1em;
color: #4a5568;
}
在时间轴上，添加以下样式。让我们使用来限制最大宽度以1200px使内容居中margin。
1个
2
3
4
5
6
.timeline {
position: relative;
max-width: 1200px; /* restrict the width on large screens */
margin: 0 auto; /* center the content */
padding: 30px;
}
现在，我们可以使用::after伪元素在时间轴中心创建该实际线。添加以下样式：
1个
2
3
4
5
6
7
8
9
10
11
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
线的宽度是6px。因此，我们使用了直线left:50%并将margin-left: -3px其定位在精确的中心。
现在，您会在网页顶部看到一条垂直居中的细线。当我们添加一些内容时，该行会延长。
让我们设置容纳时间轴元素的左右容器的样式。
1个
2
3
4
5
6
7
8
9
10
.container {
position: relative;
width: 50%;
}
.container-left {
left: 0;
}
.container-right {
left: 50%;
}
在我们对其中的.content元素进行样式设置之前，您仍然不会在网页上看到任何内容。
1个
2
3
4
5
6
7
.content {
padding: 30px;
background-color: white;
position: relative;
border-radius: 6px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
您现在应该可以看到此内容。
我们的时间表正在形成。让我们使用::before伪元素添加那些指向该行的细箭头标记。
1个
2
3
4
5
6
7
8
9
10
11
12
.container .content::before {
content: ;
height: 0;
position: absolute;
top: 40px;
width: 0;
z-index: 1;
border: medium solid white;
right: -10px;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
这会将所有指向右边的箭头标记添加到框的右边缘。但是对于右边的框，我们需要一个指向左侧并位于左侧的箭头。因此，将所有这些更改为：
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.container .content::before {
content: ;
height: 0;
position: absolute;
top: 20px;
width: 0;
z-index: 1;
border: medium solid white;
}
.container-left .content::before {
right: -10px;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.container-right .content::before {
left: -10px;
border-width: 10