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

在本教程中,您将学习如何为希望以时间顺序(或反向时间顺序)显示的一组相关事件创建响应时间线。这可用于显示重要的公司里程碑,新闻或个人事件。我以个人旅行事件为例。这是在本教程结束时您将能够创建的。 WP网站建设 桌面检视   小型平板电脑/移动景观   移动人像视图   您需要掌握 WP网站建设

在本教程中,您将学习如何为希望以时间顺序(或反向时间顺序)显示的一组相关事件创建响应时间线。这可用于显示重要的公司里程碑,新闻或个人事件。我以个人旅行事件为例。这是在本教程结束时您将能够创建的。

WordPress网站建设

WordPress网站建设

桌面检视

 

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

小型平板电脑/移动景观

 

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

移动人像视图

 

您需要掌握一些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: 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;
}

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

 

下载源代码

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/61737

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code