html中写色块,怎么用html和css做出色块

业余奶茶品鉴师

html>

Test

*{

margin: 0px;

padding: 0px;

}

header{

width: 800px;

height: 80px;

background: #3567AC;

margin: 0px auto;

text-align: center;

line-height: 80px;

}

section{

width: 800px;

height: 600px;

margin: 0px auto;

text-align: center;

}

section>div{

float: left;

}

section>div:first-child{

height: 600px;

width: 150px;

background: #E3912B;

}

section>div:nth-child(2){

height: 600px;

width: 650px;

}

section>div:nth-child(2)>div:first-child{

height: 250px;

width: 650px;

}

section>div:nth-child(2)>div:first-child>div{

float: left;

}

section>div:nth-child(2)>div:first-child>div:first-child{

width: 300px;

height: 250px;

background: #DA4D44;

}

section>div:nth-child(2)>div:first-child>div:nth-child(2){

width: 350px;

height: 250px;

background: #3DBBD1;

}

section>div:nth-child(2)>div:nth-child(2){

height: 350px;

width: 650px;

}

section>div:nth-child(2)>div:nth-child(2)>div{

float: left;

}

section>div:nth-child(2)>div:nth-child(2)>div:first-child{

width: 230px;

height: 350px;

background: #C4D960;

}

section>div:nth-child(2)>div:nth-child(2)>div:nth-child(2){

width: 190px;

height: 350px;

background: #538FCE;

}

section>div:nth-child(2)>div:nth-child(2)>div:nth-child(3){

width: 230px;

height: 350px;

background: #EDA948;

}

footer{

width: 800px;

height: 80px;

background: #578AC1;

margin: 0px auto;

text-align: center;

line-height: 80px;

}

header

1

2

3

4

5

6

footer

就是这样的。望采纳