<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>实战首页布局</title>
<meta http-equiv="Conrent-type" content="text/html;charset=gbk">
<meta name="description" content="实战首页布局">
<style>
#container{
width:1002px;
background:gray;
}
#header{
height:120px;
background:orange;/*橘色*/
}
#main{
height:600px;
background:green/*绿色*/;
}
#lside{
width:700px;
height:600px;
float:left;
background:pink;/*粉色*/
}
.four{
height:280px;
width:330px;
background:black;/*黑色*/
float:left;
margin:10px;
}
#rside{
width:302px;
height:600px;
float:right;
background:purple; /*紫色*/
}
#footer{
height:120px;
width:1002px;
background:blue; /*蓝色*/
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="lside">
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
</div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
我的微信
这是我的微信扫一扫
