<!DOCTYPE html>
<html lang="en">
<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>
<style>
.bigBox{
width:100%;
height: 200px;
background-color: #e87d15;
padding: 20px;
display: flex;
}
/* 一 */
.box1{
width: 50px;
height:50px;
background-color: white;
border-radius: 15%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 5px;
}
.one{
width: 15px;
height:15px;
background-color: red;
border-radius: 50%;
}
/* 二 */
.box2{
width: 40px;
height:40px;
background-color: white;
border-radius: 15%;
margin-right: 5px;
display: flex;
justify-content: space-between;
padding: 5px;
}
.two{
width: 13px;
height:13px;
background-color: black;
border-radius: 50%;
}
.box2 :nth-child(1){
align-self: flex-start;
}
.box2 :nth-child(2){
align-self: flex-end;
}
/* 三 */
.box3{
width: 40px;
height:40px;
background-color: white;
border-radius: 15%;
margin-right: 5px;
display: flex;
justify-content: space-between;
padding: 5px;
}
.three{
width: 10px;
height:10px;
background-color: black;
border-radius: 50%;
}
.box3 :nth-child(1){
align-self: flex-start;
}
.box3 :nth-child(2){
align-self: center;
}
.box3 :nth-child(3){
align-self: flex-end;
}
/* 四 */
.box4{
width: 40px;
height:40px;
background-color: white;
border-radius: 15%;
margin-right: 5px;
display: flex;
justify-content: space-between;
padding: 5px;
}
.fourParent{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.four{
width: 10px;
height:10px;
background-color: black;
border-radius: 50%;
}
/* 五 */
.box5{
width: 40px;
height:40px;
background-color: white;
border-radius: 15%;
margin-right: 5px;
display: flex;
justify-content: space-between;
padding: 5px;
}
.fiveParent{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.fiveParent2{
justify-content: center;
}
.five{
width: 10px;
height:10px;
background-color: black;
border-radius: 50%;
}
.five2{
width: 12px;
height:12px;
background-color: red;
align-self: center;
}
/* 六 */
.box6{
width: 40px;
height:40px;
background-color: white;
border-radius: 15%;
margin-right: 5px;
display: flex;
justify-content: space-around;
padding: 5px;
}
.sixParent{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.six{
width: 10px;
height:10px;
background-color: black;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="bigBox">
<div class="box1">
<div class="one"></div>
</div>
<div class="box2">
<div class="two"></div>
<div class="two"></div>
</div>
<div class="box3">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
<div class="box4">
<div class="fourParent">
<div class="four"></div>
<div class="four"></div>
</div>
<div class="fourParent">
<div class="four"></div>
<div class="four"></div>
</div>
</div>
<div class="box5">
<div class="fiveParent">
<div class="five"></div>
<div class="five"></div>
</div>
<div class="fiveParent fiveParent2">
<div class="five five2"></div>
</div>
<div class="fiveParent">
<div class="five"></div>
<div class="five"></div>
</div>
</div>
<div class="box6">
<div class="sixParent">
<div class="six"></div>
<div class="six"></div>
<div class="six"></div>
</div>
<div class="sixParent">
<div class="six"></div>
<div class="six"></div>
<div class="six"></div>
</div>
</div>
</div>
</body>
</html>
flex实现骰子分布图
最新推荐文章于 2023-10-13 13:17:58 发布