网页布局(左边固定宽度)

 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:#CC6;
21 float:left;
22 }
23 #right{
24 height:500px;
25 width:100%;
26 float:right;
27 margin-left:-100px;
28 }
29 #varright{
30 height:500px;
31 background-color:#F9F;
32 margin-left:100px;
33 }
34 </style>
35 <body>
36 <div id="header"></div>
37 <div id="content">
38 <div id="left">看见了看见离开家离开家破诶;两口;两口卡计划看看见了看见离开家离开家破诶;两口;两口卡计划看看见了看见离开家离开家破诶;两口;两口
39 </div>
40 <div id="right"><div id="varright">看见了看见离开家离开家破诶;两口;两口卡计划看看见了看见离开家离开家破诶;两口;两口卡计划看看见了看见离开家离开家破诶;两口;两口卡计划看看见了看见离开家离开家破诶;两口;两口卡计划看看见了看见离开家离开家破诶;两口;两口卡计划看看见了看见离开家离开家破诶;两口;两口卡计划看</div></div>
41 </div>
42 <div id="footer"></div>
43 </body>
44 </html>

显示效果如图:

正常效果:

拖动窗口效果图:

同理,也可以设置右边固定大小。

posted @ 2011-11-05 16:02  蓝之光  阅读(301)  评论(0编辑  收藏  举报