布局

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单布局</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .header{
            height: 50px;
            background-color: blue;

        }
        .next{
            height:100px;
            background-color: white;

        }
        .next1{
            height: 470px;
            background-color: pink;
            margin: 30px auto

        }
        .next2{

            width: 1200px;
            height: 700px;
            background-color: white;
            margin: 0px auto;
            margin: 20px auto;

        }
        .next21{

            width:1200px;
            height: 450px;
            background-color: white;
            margin: 20px auto

        }
        .next211{
            width: 800px;
            height:450px;
            background-color: yellow;

            float: left;

        }
        .next212{
            width: 400px;
            height: 450px;
            background-color: olive;

            float: left;

        }
        .next22{
            width: 1200px;
            height:250px;
            background-color:white; 
            float:left;

        }
        .next221{
            width: 400px;
            height: 250px;
            background-color:orange;
            float: left; 

        }
        .next222{
            width: 400px;
            height: 250px;
            background-color:black;
            float: left; 

        }
        .next223{
            width: 400px;
            height: 250px;
            background-color:gray;
            float: left; 

        }
        .center{
            width: 1200px;
            height: 800px;
            background-color:purple; 
            margin: 0px auto;
            margin: 20px auto;

        }
        .center1{
            width: 1200px;
            height: 100px;
            background-color:white;

        }
        .center2{
            width: 1200px;
            height: 350px;
            background-color:white;

        }
        .center21{

            width: 300px;
            height: 350px;

            background-color:red;
            float: left;

        }
        .center22{
            width: 300px;
            height: 350px;
            background-color:green;
            float: left;  

        }
        .center23{
            width: 300px;
            height: 350px;
            background-color:orange;
            float: left;

        }
        .center24{
            width: 300px;
            height: 350px;
            background-color:blue;
            float: left;

        }

        .center3{
            width: 1200px;
            height: 350px;
            background-color: white;

        }
        .center31{
            width: 300px;
            height: 350px;
            background-color: black;
            float: left;  

        }
        .center32{
            width: 300px;
            height: 350px;
            background-color: gray;
            float: left;  

        }
        .center33{
            width: 300px;
            height: 350px;
            background-color: pink;
            float: left;  
        }
        .center34{
            width: 300px;
            height: 350px;
            background-color: brown;
            float: left;  

        }
    </style>
</head>
<body>
    <div class="header">

    </div>
    <div class='next'></div>
    <div class='next1'></div>
    <div class='next2'>
        <div class='next21'>
            <div class="next211"></div>
            <div class="next212"></div>
        </div>
        <div class='next22'>
            <div class='next221'></div>
            <div class="next222"></div>
            <div class="next223"></div>
        </div>
    </div>
    <div class="center">
        <div class="center1"></div>
        <div class="center2">
            <div class="center21"></div>
            <div class="center22"></div>
            <div class="center23"></div>
            <div class="center24"></div>
        </div>
        <div class="center3">
            <div class="center31"></div>
            <div class="center32"></div>
            <div class="center33"></div>
            <div class="center34"></div>
        </div>
    </div>

</body>
</html>