目标样式
目标分析：
由图可知，整个色板可以分为三块
可以理解为一个大的盒子包含了三个小的盒子，定义如下
LEFT的定义方式
TOP的定义方式
class为bottom的块最为复杂，但分析方法也是异曲同工，因此不要担心太难。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=div, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../css/color.css"> </head> <body> <div class="all"> <div class="left"> <div></div> <div></div> <div></div> </div> <div class="top"> <div class="top_1"></div> <div class="top_2"> <div></div> <div></div> </div> </div> <div class="bottom"> <div class="bottom_1"></div> <div class="bottom_2"> <div></div> <div></div> <div></div> </div> <div class="bottom_3"> <div class="con1"></div> <div class="con2"> <div></div> <div></div> </div> </div> </div> </div> <div></div> <div></div> <div></div> </body> </html>
*{
margin: 0;
padding: 0;
}
.all{
600px;
height: 600px;
border: 1px dotted red;
position: relative;
top: 50px;
left: 300px;
}
.left{
150px;
height: 600px;
float: left;
}
.left div:nth-child(1){
height: 200px;
150px;
background: #cccccc;
}
.left div:nth-child(2){
height: 300px;
150px;
background: #d40000;
}
.left div:nth-child(3){
height: 100px;
background: #24e712;
}
/*toptoptoptop*/
.top{
450px;
height: 150px;
float: left;
}
.top_1{
300px;
height: 150px;
background: yellow;
float: left;
}
.top_2{
150px;
height: 150px;
float: left;
}
.top_2 div:nth-child(1){
149px;
height: 80px;
background: #24e712;
float: right;
}
.top_2 div:nth-child(2){
149px;
height: 70px;
background: #04fdb3;
float: right;
}
.bottom{
450px;
height: 450px;
float: left;
}
.bottom_1{
100px;
height: 450px;
background: purple;
float: left;
}
.bottom_2{
height: 450px;
150px;
float: left;
background: red;
}
.bottom_2 div:nth-child(1){
150px;
height: 200px;
background: red;
}
.bottom_2 div:nth-child(2){
150px;
height: 100px;
background: rgb(0, 0, 0);
}
.bottom_2 div:nth-child(3){
150px;
height: 150px;
background: rgb(190, 255, 12);
}
.bottom_3{
200px;
height: 450px;
float: left;
}
.con1{
200px;
height: 200px;
background: #24e712;
}
.con2{
200px;
height: 250px;
}
.con2 div:nth-child(1){
200px;
height: 100px;
background: #04fdb3;
}
.con2 div:nth-child(2){
200px;
height: 150px;
background: green;
}
最终样式
