三行三列布局
论坛链接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
body{
margin:0;
}
#header{/*这是页头*/
margin:auto;
background-color:#009900;
height:50px;
width:700px;
}
#clear{/*这是清除浮动*/
clear: both;/*如果不加这个的话，后面的div便会继续浮动*/
}
#footer{/*这是页底*/
margin:auto;
background-color:#006666;
height:30px;
width:700px;
}
#mainbg{/*这是整个框架页*/
margin:auto;
width:700px;
background-color:#6633FF;
}
#leftcont{/*这是左列*/
float:left;/*左浮动*/
width:300px;
background-color:#CC0033;
}
#centercont{/*这是中间列*/
float:left;/*左浮动*/
height:auto;
width:200px;
background-color:#FF6699;
}
#rightcont{/*这是右列*/
float:left;/*左浮动*/
height:auto;
width:200px;
background-color:#9933CC;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="mainbg">
<div id="leftcont">
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
</div>
<div id="centercont">
<p>ff</p>
<p>ff</p>
<p>ff</p>
<p>ff</p>
<p>ff</p>
<p>ff</p>
</div>
<div id="rightcont">
<p>ee</p>
<p>ee</p>
<p>ee</p>
<p>ee</p>
</div>
<div id="clear"> </div>
</div>
<div id="footer">footer</div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
body{
margin:0;
}
#header{/*这是页头*/
margin:auto;
background-color:#009900;
height:50px;
width:700px;
}
#clear{/*这是清除浮动*/
clear: both;/*如果不加这个的话，后面的div便会继续浮动*/
}
#footer{/*这是页底*/
margin:auto;
background-color:#006666;
height:30px;
width:700px;
}
#mainbg{/*这是整个框架页*/
margin:auto;
width:700px;
background-color:#6633FF;
}
#leftcont{/*这是左列*/
float:left;/*左浮动*/
width:300px;
background-color:#CC0033;
}
#centercont{/*这是中间列*/
float:left;/*左浮动*/
height:auto;
width:200px;
background-color:#FF6699;
}
#rightcont{/*这是右列*/
float:left;/*左浮动*/
height:auto;
width:200px;
background-color:#9933CC;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="mainbg">
<div id="leftcont">
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
</div>
<div id="centercont">
<p>ff</p>
<p>ff</p>
<p>ff</p>
<p>ff</p>
<p>ff</p>
<p>ff</p>
</div>
<div id="rightcont">
<p>ee</p>
<p>ee</p>
<p>ee</p>
<p>ee</p>
</div>
<div id="clear"> </div>
</div>
<div id="footer">footer</div>
</body>
</html>