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

 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>

显示效果如图:

正常效果:

拖动窗口效果图:

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

转载于:https://www.cnblogs.com/xiasimian/archive/2011/11/05/2237108.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值