<heml lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页</title>
<link rel="stylesheet" type="text/css" href="123.css">
</head>
<body>

    <div class="top">
        <div class="head"></div>
    </div>
    <div class="main">
        <div class="left"></div>
        <div class="right">
                <div class="sub-left"></div>
                <div class="sub-right"></div>
            </div>
    </div>
   
</body>
</html>

 

.body{
 margin:0;
 padding: 0;
}

.top{
 height:100px;
 background:yellow;
 margin: 50px 50px 10px 20px;

}
.head{
 width:225px;
 height:100px;
 background:red;
 margin: 0 auto;

}
.main{
 width:1100px;
 height:500px;
/*  background-color: #ccc; */
 margin:0 auto;
}
.left{
 width:250px;
 height:500px;
    background:green;
 float: left;
}

.right{
 width:850px;
 height:500px;
 background-color:blue;
 float: right;
}
.sub-left{
 width: 600px;
 height: 500px;
 background-color: black;
 float: left;
}
.sub-right{
 width: 250px;
 height: 500px;
 background-color:purple;
 float: right;

}