基于Float的布局

基于Float的布局

基于Float的布局是一种非常容易使用的布局模式。

Float属性指元素自动填充页面的空间,Float可以向左浮动,也可以向右浮动。基于Float的布局(也称浮动布局)就是根据这个属性的特性来定义元素的布局。现在一般网站都会采用两列布局和三列布局。如下图

 

 

1 两列布局

 

2 三列布局

 

1          两列Float布局

<div id="swapdiv">布局头</div>

<div id="leftNav">

……..

</div>

<div id="content">

……..

</div>

<div id="footer">页面尾部</div>

 

这个设计,把整个页面分成四块,上面的布局头,下面的布局尾。主要的内容分成两列。leftNav为导航模块,放在页面的左边,content为内容模块放在页面的右边,都采用Float的布局向左浮动。

 

下面是布局的CSS代码:

 

#swapdiv{

      background:#00CCFF;

      width:700px;

float:left;

}

 

#leftNav{

      background:#00CCFF;

      width:100px;

      float:left;

}

 

#content{

      background:#00CCFF;

      width:600px;

      float:left;

}

 

#footer{

      background:#00CCFF;

      width:700px;

      float:left;

}

这种布局要注意的地方是内容注意不能过长。Div如果出现内容过长的情况下,在IE里面的表现是Div会自动拉长来适应页面的宽度,这样就会导致,Div被浮动到下一行去。破坏了整个页面的布局。 

上面的例子用像素作为Div的宽度,也我们也可以用百分比来设计div的宽度。

比如:

#swapdiv{

      background:#00CCFF;

      width:80%;

      float:left;

}

 

#leftNav{

      background:#00CCFF;

              width:20%;

              float:left;

}

 

#content{

      background:#00CCFF;

      width:80%;

      float:left;

}

 

#footer{

      background:#00CCFF;

      width:80%;

      float:left;

}

采用了像素作为宽度的单位,这个形式叫固定布局,有时称为冰布局。而用百分比作为布局宽度的形式叫流体布局。一般以像素用为单位的话,容易把握布局的位置,但是缩小浏览器后,则会出现水平滚动条。而且对于一个浏览器的空间利用不充分。使用流体布局的话,缩小浏览器时,页面会自动调整宽度,因此不会出现水平的滚动条,但是因为不同的机器显示器的分辨率不同,在不同的分辨率下,效果会不同,所以不容易把握布局。

 

有时候,字体的大小对于页面的布局也会形成一定的影响。因此还有一种布局,根据字号来调整元素的宽度

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值