一、初步布局
1、我们先设立一个外部盒子用flex布局将子代居中
.father {
display: flex;
margin: 200px auto;
border-top: 2px solid #828384;
width: 1200px;
height: 300px;
justify-content: space-around;
}
再使用亲代选择器设置骰子盒子css
.father>div {
display: flex;
margin: 20px;
border-radius: 15px;
border: 5px solid black;
width: 140px;
height: 140px;
}
二、设置各面
我们先将每一个红点设置好
.w {
margin: 10px;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: red;
}
1、设置第一面
<div class="one">
<span class="w"></span>
</div>
将其居中对其
.one {
justify-content: center;
align-items: center;
}
2、设置第二面
<div class="two">
<span class="w"></span>
<span class="w"></span