小程序基础布局作业–筛子
wxml
<view class="father">
<view class="box1">
<view class="point"></view>
</view>
<view class="box2">
<view class="point"></view>
<view class="point"></view>
</view>
</view>
<view class="father">
<view class="box3">
<view style="padding-left:4px">
<view class="point" ></view>
</view>
<view>
<view class="point"></view>
</view>
<view style="padding-right:4px">
<view class="point" ></view>
</view>
</view>
<view class="box4">
<view>
<view class="point"></view>
<view class="point"></view>
</view>
<view>
<view class="point"></view>
<view class="point"></view>
</view>
</view>
</view>
<view class="father">
<view class="box5">
<view>
<view class="point"></view>
<view class="point"></view>
</view>
<view>
<view class="point"></view>
</view>
<view>
<view class="point"></view>
<view class="point"></view>
</view>
</view>
<view class="box6">
<view>
<view class="point"></view>
<view class="point"></view>
</view>
<view>
<view class="point"></view>
<view class="point"></view>
</view>
<view>
<view class="point"></view>
<view class="point"></view>
</view>
</view>
</view>
<view class="father">
<view class="box7">
<view>
<view class="point"></view>
<view class="point"></view>
<view class="point"></view>
</view>
<view>
<view class="point"></view>
</view>
<view>
<view class="point"></view>
<view class="point"></view>
<view class="point"></view>
</view>
</view>
<view class="box8">
<view>
<view class="point"></view>
<view class="point"></view>
<view class="point"></view>
</view>
<view>
<view class="point"></view>
<view class="point" style="background-color:#fff"></view>
<view class="point"></view>
</view>
<view>
<view class="point"></view>
<view class="point"></view>
<view class="point"></view>
</view>
</view>
</view>
wxss
page{
box-sizing: border-box;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
view{
box-sizing: border-box;
border: solid 1px;
}
.father{
border: #ffffff;
display: flex;
width: 100%;
justify-content: space-around;
}
.father>view{
width: 80px;
height: 80px;
display: flex;
flex-direction: column;
}
page{
box-sizing: border-box;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
view{
box-sizing: border-box;
border: solid 1px;
}
.father{
border: #ffffff;
display: flex;
width: 100%;
justify-content: space-around;
}
.father>view{
width: 80px;
height: 80px;
display: flex;
flex-direction: column;
}
.point{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000000;
}
.box1{
justify-content: center;
align-items: center;
}
.box2{
justify-content: space-around;
align-items: center;
}
.box3 view{
border: white;
display: flex;
}
.box3 view:nth-child(3){
justify-content: flex-end;
}
.box3 view:nth-child(2){
justify-content: center;
}
.box3,.box4,.box5,.box6,.box7,.box8{
justify-content: space-around;
}
.box4 view,.box5 view,.box6 view,.box7 view,.box8 view{
border: white;
display: flex;
justify-content: space-around;
}