<!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=utf-8" />
<title>全部动态网页布局</title>
<style type="text/css">
#header,#content,#footer{ /*整体设置*/
background-color:#ccc;
border:1px solid #0ca;
height:30px;
width:90%;
margin:10px auto; /*外边距*/
}
#content{
height:500px;
background-color:#990;
}
#left,#middle,#right{
height:500px;
border:1px solid/*实线*/ #90F;
}
#left{
width:30%;
background-color:#06F;
float:left;
}
#middle{
width:49%;
background-color:#FFF;
float:left
}
#right{
width:20%;
background-color:#9F0;
float:left;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content">content
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
<div id="footer">footer</div>
</body>
</html>
效果如图1所示，经过拉伸网页图中的三个色块大小会随着网页的拉伸而改变如图2：
图1：
图2：
浙公网安备 33010602011771号