用Flex布局代码练习下手吧
效果图:
Html代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 一点 -->
<div class="box box0">
<span></span>
<p class="big"></p>
</div>
<!-- 两点 -->
<div class="box box1">
<span class="span1"></span>
<span class="span2"></span>
<p class="big"></p>
</div>
<!-- 三点 -->
<div class="box box2">
<span></span>
<span></span>
<span></span>
<p class="big"></p>
</div>
<!-- 四点 -->
<div class="box box3">
<p class="big"></p>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</div>
<!-- 五点 -->
<div class="box box4">
<p class="big"></p>
<div>
<span></span>
<span></span>
</div>
<div><span></span></div>
<div>
<span></span>
<span></span>
</div>
</div>
<!-- 六点 -->
<div class="box box5">
<p class="big"></p>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</div>
<!-- 七点 -->
<div class="box box6">
<p class="big"></p>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- 八点 -->
<div class="box box7">
<p class="big"></p>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- 九点 -->
<div class="box box8">
<p class="big"></p>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
CSS代码
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
position: relative;
display: flex;
float: left;
width: 100px;
height: 100px;
border: 15px solid rgb(57, 103, 124);
margin: 40px 20px 0 20px;
border-radius: 10px;
background-color: rgb(247, 240, 232);
box-shadow: 5px 5px 15px 5px rgb(132, 169, 236);
}
/* 白色圈位置 */
.box p {
position: absolute;
left: -8px;
}
span {
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgb(212, 94, 94);
margin: 2px;
}
/* 第一个 */
.box0 {
display: flex;
justify-content: center;
align-items: center;
}
/* 第二个 */
.box1 {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
/* 第三个 */
.box2 {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.box2 span:nth-child(2) {
align-self: center;
}
.box2 span:nth-child(3) {
align-self: flex-end;
}
/* 第四个 */
.box3 {
justify-content: space-around;
flex-direction: column;
}
.box3 div {
display: flex;
justify-content: space-around;
}
/* 第五个 */
.box4 {
flex-direction: column;
justify-content: space-around;
}
.box4 div {
display: flex;
justify-content: space-around;
}
/* 第六个 */
.box5 {
flex-direction: column;
justify-content: space-around;
}
.box5 div {
display: flex;
justify-content: space-around;
}
/* 第七个 */
.box6 {
flex-direction: column;
justify-content: space-around;
}
.box6 div {
display: flex;
justify-content: space-around;
}
/* 第八个 */
.box7 {
flex-direction: column;
justify-content: space-around;
}
.box7 div {
display: flex;
justify-content: space-around;
}
/* 第九个 */
.box8 {
flex-direction: column;
justify-content: space-around;
}
.box8 div {
display: flex;
justify-content: space-around;
}
/* 白色圈,用来点缀 */
.big {
position: absolute;
width: 86px;
height: 86px;
border: 1px solid #fff;
border-radius: 5px;
}
</style>