第五个盒子就是写不出来,如果用多个盒子包裹可以写出来,但是我自学视频里面的评论说可以用一个盒子写出来,找了很多网上资源,也写不出来,希望大家可以指教下, 谢谢
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="2.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="big">
<div class="q"></div>
</div>
<!-- -->
<div class="big2">
<div class="q"></div>
<div class="q2"></div>
</div>
<!-- -->
<div class="big3">
<div class="q"></div>
<div class="q3"></div>
<div class="q2"></div>
</div>
<!-- -->
<div class="big4">
<div class="q"></div>
<div class="qq"></div>
<div class="qq2"></div>
<div class="qq3"></div>
</div>
<!-- -->
<div class="big4">
<div class="q"></div>
<div class="qq"></div>
<div class="qq2"></div>
<div class="qq3"></div>
<div class="qq4"></div>
<div class="qq5"></div>
</div>
<!-- -->
<!-- <div class="big5">
<div class="a"></div>
<div class="a"></div>
<div class="a2"></div>
<div class="a1"></div>
<div class="a"></div>
</div> -->
</body>
</html>
*{
padding: 0;
margin: 0;
}
/* */
.big,.big2,.big3,.big4,.big5{
width: 100px;
height: 100px;
margin: 20px auto;
background: rgba(128, 128, 128, 0.555);
box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
border-radius:20px ;
display: flex;
}
.q,.q2,.q3,.qq,.qq2,.qq3,.qq4,.qq5,.a,.a1,.a2{
width: 34px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
/* */
.big2{
justify-content: space-between;
}
.q2{
align-self: flex-end;
}
/* */
.big3{
justify-content: space-between;
}
.q3{
align-self:center;
}
/* */
.big4{
flex-wrap: wrap;
justify-content: space-between;
}
.qq2,.qq3{
align-self: flex-end;
}
/* */
.qq4{
align-self: flex-end;
}
.qq5{
align-self: flex-end;
}
/* */
/* .big5{
flex-wrap: wrap;
justify-content: center;
justify-content: space-between;
}
.a1{
align-self: flex-end;
}
.a2{
align-self: center;
} */
但是我用多个盒子写的话可以写出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="1.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="q">
<div class="qq"></div>
</div>
<!-- -->
<div class="dhz">
<div class="q1">
<div class="qq1">
</div>
</div>
<div class="w2">
<div class="qq2"></div>
</div>
</div>
<!-- -->
<div class="dhz">
<div class="a1">
<div class="aa1">
</div>
</div>
<div class="a3">
<div class="aa3"></div>
</div>
<div class="a2">
<div class="aa2"></div>
</div>
</div>
<!-- -->
<div class="dhz">
<div class="q1">
<div class="qq1">
</div>
<div class="qqq1"></div>
</div>
<div class="q2">
<div class="qqq2">
</div>
<div class="qq2"></div>
</div>
</div>
<!-- -->
<div class="dhz">
<div class="q1">
<div class="qq1">
</div>
<div class="qqq1"></div>
</div>
<div class="a3">
<div class="aa3"></div>
</div>
<div class="q2">
<div class="qqq2">
</div>
<div class="qq2"></div>
</div>
</div>
<!-- -->
<div class="dhz">
<div class="q1">
<div class="qq1">
</div>
<div class="qqq1"></div>
</div>
<div class="x3">
<div class="xx3"></div>
<div class="xx3"></div>
</div>
<div class="q2">
<div class="qqq2">
</div>
<div class="qq2"></div>
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
/* body>div{
float: left;
} */
.q{
width: 100px;
height: 100px;
background: rgba(128, 128, 128, 0.555);
margin: 30px auto;
box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
display: flex;
justify-content: center;
align-items: center;
border-radius:20px ;
}
.qq{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.dhz{
width: 100px;
height: 100px;
border-radius:20px ;
background: rgba(128, 128, 128, 0.555);
box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
margin: 30px auto;
display: flex;
flex-direction: column;
}
.q1{
flex: 1;
}
.w2{
flex: 1;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.qq1{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.qq2{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.dhz{
width: 100px;
height: 100px;
border-radius:20px ;
background: rgba(128, 128, 128, 0.555);
box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
margin: 30px auto;
display: flex;
flex-direction: column;
}
.a1{
flex: 1;
}
.a3{
flex: 1;
display: flex;
justify-content: center;
}
.a2{
flex: 1;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.aa1{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.aa2{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.aa3{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.dhz{
width: 100px;
height: 100px;
border-radius:20px ;
background: rgba(128, 128, 128, 0.555);
box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
margin: 30px auto;
display: flex;
flex-direction: column;
}
.q1{
flex: 1;
}
.q2{
flex: 1;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.qq1{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.qq2{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
/* */
.dhz{
width: 100px;
height: 100px;
border-radius:20px ;
background: rgba(128, 128, 128, 0.555);
box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
margin: 30px auto;
display: flex;
flex-direction: column;
}
.q1{
flex: 1;
display: flex;
justify-content: space-between;
}
.q2{
flex: 1;
display: flex;
justify-content: space-between;
}
.qq1{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.qq2{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.qqq1{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.qqq2{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
.x3{
flex: 1;
display: flex;
justify-content: space-between;
}
.xx3{
width: 30px;
height: 30px;
border-radius:50% ;
background: rgb(0, 0, 0);
}
还有对我自学的有什么好的建议吗?