小程序基础布局作业--筛子筛子

小程序基础布局作业–筛子

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;
}