这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。
用到的知识点 html:div标签，span标签，class css：元素选择器，类选择器，伪类，justify-content: space-between让整个页面看起来平分的效果，nth-child选择第元素的个数。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20220422</title>
<style>
* {
/* 清除浏览器原有的格式 */
margin: 0;
padding: 0;
}
body {
/* flex布局 */
/* 周五啦，需要粉粉嫩嫩的心情 */
display: flex;
background-color: #FF6F91;
justify-content: center;
}
.a1 {
width: 1000px;
position: relative;
top: 100px;
}
/* 这是一条长长的横线 */
.a1::after {
content: '';
position: absolute;
top: -10px;
left: 50%;
width: 5px;
height: 900px;
background-color: rgba(255, 255, 255, .5);
}
.long {
position: relative;
width: 100%;
height: 100px;
margin-bottom: 60px;
display: flex;
/* 让整个空间看起来平分 */
justify-content: space-between;
}
/* 右边的框 */
.left,
.right {
position: relative;
width: 40%;
height: 120px;
border-radius: 15px;
text-align: center;
color: rgb(90, 90, 90);
}
.long:nth-child(even) .left {
background-color: rgba(255, 255, 255, .4);
long-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.long:nth-child(odd) .right {
background-color: rgba(255, 255, 255, .4);
long-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.center {
width: 15%;
display: flex;
justify-content: center;
align-items: center;
}
.center>span {
width: 100px;
border-radius: 10px;
/* 文字居中的效果 */
text-align: center;
font: 800 30px '';
line-height: px;
background-color: #fff;
}
</style>
</head>
<body>
下面是div部分的内容~重复的标签复制粘贴
<div class="a1">
<div class="long">
<div class="left"></div>
<div class="center"><span>
2017
</span></div>
<div class="right">一个小混子
</div>
</div>
<div class="long">
<div class="left">一个初级混子
</div>
<div class="center"><span>
2018
</span></div>
<div class="right"></div>
</div>
<div class="long">
<div class="left"></div>
<div class="center"><span>
2019
</span></div>
<div class="right">一个中级混子
</div>
</div>
<div class="long">
<div class="left">一个副高级混子
</div>
<div class="center"><span>
2020
</span></div>
<div class="right"></div>
</div>
<div class="long">
<div class="left"></div>
<div class="center"><span>
2021
</span></div>
<div class="right">一个高级混子</div>
</div>
<<div class="long">
<div class="left">一个巨型混子
</div>
<div class="center"><span>
2022
</span></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
