- 技术博客
- 骰子一点摆放位置
ps：本人初学者 小白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style>
div {
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 25%;
display: flex;
}
div span {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}
.main {
width: 600px;
height: 600px;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 auto;
border: 1px solid #000;
padding: 50px;
}
.main .one {
background-color: #ccc;
}
.one .one_01 {
align-self: flex-start;
margin-left: 20px;
}
.one-center {
background-color: #ccc;
}
.one-center .one_02 {
align-self: center;
}
.main .one-bottom {
background-color: #ccc;
}
.one-bottom .one_03 {
align-self: flex-end;
margin-left: 20px;
}
.main .one-bom {
background-color: #ccc;
justify-content: center;
align-items: flex-end;
}
.one-right {
background-color: #ccc;
flex-direction: column;
justify-content: center;
align-items: flex-end;
}
.up {
background-color: #ccc;
justify-content: center;
}
.center {
background-color: #ccc;
justify-content: center;
align-items: center;
}
.up_01 {
background-color: #ccc;
justify-content: flex-end;
}
.up_01 .one_08 {
margin-right: 20px;
}
.bom01{
background-color: #ccc;
flex-direction: row-reverse;
align-items: flex-end;
}
.bom01 .one_09 {
margin-right: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="one">
<span class="one_01"></span>
</div>
<div class="one-center">
<span class="one_02"></span>
</div>
<div class="one-bottom">
<span class="one_03"></span>
</div>
<div class="one-bom">
<span class="one_04"></span>
</div>
<div class="center">
<span class="one_07"></span>
</div>
<div class="bom01">
<span class="one_09"></span>
</div>
<div class="one-right">
<span class="one_05"></span>
</div>
<div class="up_01">
<span class="one_08"></span>
</div>
<div class="up">
<span class="one_06"></span>
</div>
</div>
</body>
</html>
