今天我们再来练习一个关于时间轴的小示例，具体效果如下：
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;
}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
