【每日一练】177—CSS实现一款响应式的时间轴效果

每日一练1年前 (2023)发布 admin
1,617 0

今天我们再来练习一个关于时间轴的小示例,具体效果如下:

【每日一练】177—CSS实现一款响应式的时间轴效果

HTML代码:

<!DOCTYPE html>
<html >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】177—CSS实现一款响应式的时间轴效果</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>

<body>
<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-01
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p>第一天,我们一起来学习HTML简介与前端技术的介绍,以及相关问答,你为什么想要学习前端技术?</p>
</div>
</div>
</div>

<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-02
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p> 第二天,我们一起来学习HTML简介与前端技术的介绍,以及相关问答,你为什么想要学习前端技术?</p>
</div>
</div>
</div>

<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-03
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p>第三天学习开发者工具</p>
</div>
</div>
</div>

<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-04
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p>第四天学习开发者工具</p>
</div>
</div>
</div>

<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-05
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p>第五天学习开发者工具</p>
</div>
</div>
</div>

<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-06
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p>第六天学习开发者工具</p>
</div>
</div>
</div>

<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-07
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p>第七天学习开发者工具</p>
</div>
</div>
</div>

<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-08
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p>第八天学习开发者工具</p>
</div>
</div>
</div>

<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-09
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p>第九天学习开发者工具</p>
</div>
</div>
</div>
<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-10
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p>第十天学习开发者工具</p>
</div>
</div>
</div>

<div class=”item”>
<div class=”image”>
<div>
<img src=”01.png” />
<span>
2023-04-11
</span>
</div>
</div>
<div class=”details”>
<div>
<h1>30天快速入门HTML+CSS</h1>
<p>第十一天学习开发者工具</p>
</div>
</div>
</div>

</body>
</html>

CSS代码:

body {
background: #3b4262;
color: #ffffff;
font-family: arial, sans-serif;
}

.item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 1000px;
margin: 0 auto;
}
.item .image {
padding: 1em 2em;
}
.item .image > div {
position: relative;
text-align: center;
font-size: 0.8em;
}
.item .image > div::after {
content: ”;
width: 100%;
height: 0;
border-bottom: 1px solid #232b50;
position: absolute;
top: 2.75em;
left: 2.5em;
z-index: -1;
}
.item .image img {
border-radius: 50%;
height: 5em;
border: 0.35em solid #00A6BC;
}
.item .image span {
display: block;
clear: both;
padding: 0.25em 0;
margin: 0.5em 0;
background: #3b4262;
}
.item .details {
position: relative;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.item .details > div {
border: 1px solid #232b50;
border-radius: 0.5em;
padding: 1.5em;
margin: 1em 0;
}
.item .details > div h1 {
color: #00A6BC;
font-size: 1.4em;
margin: 0;
padding: 0 0 0.5em 0;
letter-spacing: 0.1em;
}
.item .details > div p {
margin: 0;
padding: 0;
line-height: 150%;
}
.item .details::before {
content: ”;
width: 0;
height: 100%;
border-left: 1px solid #232b50;
position: absolute;
top: 0;
left: -4.35em;
z-index: -1;
}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...