---恢复内容开始---

这个东西说难也不难，但也要详细思虑一番：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作首页布局ok啦。我好开心，着是自己做的第一个布局。我也是很棒的啊。谢谢！！</title>
<style type="text/css">
#container{
width:1200px;
height:1200px;
background:gray;
}
#hearder{width:1200px;
height:400px;
background:blue;
}
#main{width:1200px;
height:500px;
background:yellow;
}
#footer{width:1200px;
height:300px;
background:pink;
}
#lside{width: 900px;height:500px;background:green;
float:left;

}
#rside{width:200px;height:500px;float:right;background:red;}
.four1,.four2,.four3,.four4{width:400px;height:200px;
background:black;float:left;margin:20px 10px;
 
}
.four3{width:400px;height:200px;
background:black;float:left;clear:left;margin:20px 10px;
}
.four5{width:300px;height:200px;background:red;float:right;margin:0px;}

</style>
</head>

<body>
<div id="container">
<div id="hearder"></div>
<div id="main"> 
 <div id="lside">
<div class="four1" ></div>
<div class="four2"></div>
<div class="four3"></div>
<div class="four4"></div>
</div>
<div  id="rside"></div>
 </div>
<div id="footer"></div>
</div>

</body>
</html>

 

---恢复内容结束---