网页布局（左右固定，中间变化）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>无标题文档</title>
6 </head>
7 <style type="text/css">
8 #header,#content,#footer{
9 height:30px;
10 width:80%;
11 background-color:#069;
12 margin:10px auto;
13 }
14 #content{
15 height:500px;
16 }
17 #left{
18 height:500px;
19 width:100px;
20 background-color:#0FF;
21 float:left;
22 }
23 #right{
24 height:500px;
25 width:100px;
26 background-color:#636;
27 float:right;
28 }
29 #center{
30 height:500px;
31 width:100%;
32 float:left;
33 margin-right:-200px;
34 }
35 #varcenter{
36 height:500px;
37 background-color:#C9C;
38 margin-right:200px;
39 }
40 </style>
41 <body>
42 <div id="header"></div>
43 <div id="content">
44 <div id="left">离开家；两口哦饿说法了撒娇离开撒酒疯拉康师傅卡手机费卡手机费离开家；两口哦饿说法了撒娇离开撒酒疯拉康师傅卡手机费卡手机费</div>
45 <div id="center">
46 <div id="varcenter">离开家；两口哦饿说法了撒娇离开撒酒疯拉康师傅卡手机费卡手机费离开家；两口哦饿说法了撒娇离开撒酒疯拉康师傅卡手机费卡手机费离开家；两口哦饿说法了撒娇离开撒酒疯拉康师傅卡手机费卡手机费离开家；两口哦饿说法了撒娇离开撒酒疯拉康师傅卡手机费卡手机费离开家；两口哦饿说法了撒娇离开撒酒疯拉康师傅卡手机费卡手机费</div>
47 </div>
48 <div id="right">离开家；两口哦饿说法了撒娇离开撒酒疯拉康师傅卡手机费卡手机费离开家；两口哦饿说法了撒娇离开撒酒疯拉康师傅卡手机费卡手机费</div>
49 </div>
50 <div id="footer"></div>
51 </body>
52 </html>
浏览器缩小效果图：
