要求呈现图案：
法一：不建议
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> </title><style>div:nth-child(1){width: 100px;height: 100px;background-color: aqua ;float: left;}div:nth-child(2){width: 300px;height: 100px;background-color: purple ;}div:nth-child(3){width: 100px;height: 200px;background-color: gold ;float: left;}div:nth-child(4){width: 100px;height: 200px;background-color: red ;float: left;}div:nth-child(5){width: 300px;height: 100px;background-color: black ;}div:nth-child(6){width: 300px;height:100px;background-color: palegoldenrod ;}</style> </head><body><div></div><div></div><div></div><div></div><div></div><div></div> </body>
</html>法二：建议用此方法
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>.container{width: 300px;height: 300px;background-color: gray;}.container .top{width: 300px;height: 100px;background-color: blue;}.container .bottom{width: 300px;height: 200px;background-color: purple;}.container .top .left{width: 100px;height: 100px;background-color: red;}.container .bottom .left{width: 100px;height: 200px;background-color: yellow;float: left;}.container .bottom .center{width: 100px;height: 200px;background-color: pink;float: left;}.container .bottom .right{width: 100px;height: 200px;background-color: green;float: left;}.container .bottom .right .top{width: 100px;height: 100px;background-color: gold; }.container .bottom .right .bottom{width: 100px;height: 100px;background-color: greenyellow;}</style>
</head>
<body><div class="container"><div class="top"><div class="left"></div></div><div class="bottom"><div class="left"></div><div class="center"></div><div class="right"><div class="top"></div><div class="bottom"></div></div></div> </div>
</body>
</html>
