配置

创建一个空白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: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
}

阅读有关如何使用borders创建这些CSS三角形的更多信息。当然，现在的输出看起来有些奇怪，因为这些盒子紧紧贴着生产线。在容器中添加一些填充物以将它们隔开。

1个
2
3
4
5
6
7
8
.container-left {
   /* Existing styles here */
   padding-right: 70px;
}
.container-right {
   /* Existing styles here */
   padding-left: 70px;
}

太棒了。

如何使用图像缩略图创建响应时间轴设计

 

添加内容和样式

让我们首先添加图像并将它们放置在“行”上。

的HTML

通过添加3个div元素和背景图片，将标记更改为此。

1个
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="timeline">
   <div class="container container-left">
       <div class="image" style="background-image:url('https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100')"></div>
       <div class="content"></div>
   </div>
   <div class="container container-right">
       <div class="image" style="background-image:url('https://images.pexels.com/photos/210012/pexels-photo-210012.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100')"></div>
       <div class="content"></div>
   </div>
   <div class="container container-left">
       <div class="image" style="background-image:url('https://images.pexels.com/photos/2104152/pexels-photo-2104152.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100')"></div>
       <div class="content"></div>
   </div>
</div>

如您所见，我直接链接了Pexels的 3张图像。您可以选择包括自己的。

的CSS

让我们为该图像div添加一些尺寸和形状。

1个
2
3
4
5
6
7
8
9
.image {
   width:90px;
   height:90px;
   background-size:cover;
   background-position:center;
   border:solid 5px #ffffff;
   border-radius:50px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

现在，将它们放置在线条的中央，出现在框旁边。

1个
2
3
4
5
6
7
8
9
10
11
.image {
   position: absolute;
}
.container-left .image {
   right: 0;
   margin-right: -45px;
}
.container-right .image {
   left: 0;
   margin-left: -45px;
}

但是图像出现在线条后面！这一点很容易解决z-index。

1个
2
3
4
5
6
7
8
.timeline::after {
   /* Existing styles here */
   z-index: 1;
}
.image {
   /* Existing styles here */
   z-index: 2;
}

现在不要介意图像彼此重叠。当我们在框中添加一些内容时，它将得到修复。但是，如果您的内容将很少，请为容器添加最小高度。

1个
2
3
4
.container {
   /* Existing styles here */
   min-height: 120px;
}

接下来，添加实际内容。

的HTML

在每个.content块中添加此标记。根据需要更改文本。

1个
2
3
4
5
<span>July 2020</span>
<h2>Visit to Spain</h2>
<p>
   Et hinc magna voluptatum usu, cum veniam graece et. Ius ea scripserit temporibus, pri cu harum tacimates neglegentur. At adipisci incorrupte nam. Cu qui sumo appareat constituto.
</p>

的CSS

我们需要定位箭头标记，使其与图像的中心对齐。

1个
2
3
4
.container .content::before {
   /* Existing styles here */
   top: 35px;
}

将左侧框中的文本对齐到右侧，将右侧框中的文本对齐到左侧。

1个
2
3
4
5
6
7
8
.container-left {
   /* Existing styles here */
   text-align: right;
}
.container-right {
   /* Existing styles here */
   text-align: left;
}

现在将一些样式用于实际内容。

1个
2
3
4
5
6
7
8
9
10
11
12
13
.content span {
   color: #2C7A7B;
   font-size: 1.1em;
   font-weight: bold;
}
.content h2 {
   font-size: 1.8em;
   padding-top: 5px;
}
.content p {
   line-height: 1.6;
   padding-top: 5px;
}

这不是很整洁吗？大！现在，调整浏览器窗口的大小以使其更小，并且当屏幕尺寸太小时，事情开始变得混乱。

使其响应

在较小的屏幕中，当线的两边都有框时，框会变得太窄。是时候添加一些媒体查询了。让我们在767px宽度处添加一个断点，并在屏幕宽度小于此宽度时将两个方框都放在一侧。

1个
2
3
@media screen and (max-width: 767px) {
   /* Add styles to change the behaviour for screens smaller than 767px width */
}

首先，将行放置在页面左侧。在媒体查询中添加以下样式：

1个
2
3
.timeline::after {
   left: 65px;
}

使容器全宽，并通过覆盖以前的样式正确放置它们。

1个
2
3
4
5
6
7
8
9
10
11
.container {
   width: 100%;
   padding-left: 100px;
   padding-right: 0px;
}
.container-right {
   left: 0%;
}
.container-left {
   text-align: left;
}

除了第一个容器外，向所有容器添加一些上边距。

1个
2
3
4
5
6
7
.container {
   /* Existing styles here */
   margin-top: 30px;
}
.container:first-of-type {
   margin-top: 0px;
}

覆盖图像样式以将其放置在行上。

1个
2
3
4
5
6
.container .image {
   left:-10px;
   top: 0px;
   margin-left: 0;
   margin-right: 0;
}

“左侧”框中的箭头需要更改位置和方向。

1个
2
3
4
5
6
.container-left .content::before {
   left: -10px;
   right: auto;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
}

这就是我们现在所拥有的：

如何使用图像缩略图创建响应时间轴设计

 

进一步减小屏幕尺寸，您会发现在非常小的屏幕（小于400px宽度）上，框再次变窄。这就是为什么在下面480px将容器推入图像下方以使其占据整个屏幕宽度的原因。

1个
2
3
4
5
6
@media screen and (max-width: 480px) {
   .container {
       padding-left: 0px;
       padding-top: 105px;
   }
}

为了防止该行显示在框的顶部而不是下方，只需z-index在容器中添加a 并提供比“行”高的值。

1个
2
3
4
.container {
   /* Existing styles here */
   z-index: 3;
}

现在唯一尚待解决的事情是将箭头放在顶部，并使它们指向上方。

1个
2
3
4
5
6
7
.container .content::before {
   left: 25px;
   top: -10px;
   border: medium solid white;
   border-width: 0 10px 10px 10px;
   border-color: transparent transparent white transparent;
}

你说对了！调整浏览器的大小，使其越来越小，以查看时间轴的响应速度。继续并对其进行自定义以满足您的需求。万一您无法按预期工作，请下载完整的源代码并随时进行更改。

 

下载源代码