快速业务通道

网页局部的布局技巧:多栏自适应布局问题

作者 凌众技术 来源 网页制作 浏览 发布时间 2012-03-08
渲染过程的某一时刻截图中,可以发现左右两侧的内容率先予以呈现,而主体部分会造成一定时间的空白。因此这种方案并不宜用于整站页面框架的搭建。

考虑到页面结构的复杂程度和体积大小,大型站点的布局方案,个人倾向于采用诸如负边距之类自适应布局。实现原理可以参考《Creating Liquid Layouts with Negative Margins》这篇文章。利用负边距可以构建出很多复杂的流体布局形式。这里以 YUI 框架提供的栅格方案为例来说明:

.wrap{}
.section{float:left;margin-right:-40em;width:100%;}
.g1{margin-right:310px;float:none;width:auto;position:static;}
.g2{float:right;margin-left:-40em;width:100%;}
.main{margin-left:210px;float:none;width:auto;position:static;overflow:auto;background:red;}
.left{float:left;width:200px;position:relative;background:orange;}
.aside{float:right;width:300px;position:relative;background:lime;}
<div class="wrap">
  <div class="section">
    <div class="g1">
      <div class="g2">
        <div class="main">主体部分</div>
      </div>
      <div class="left">左侧栏</div>
    </div>
  </div>
  <div class="aside">右侧栏</div>
</div>

点此查看该代码示例:negative_margin_layout.html
虽然实现上要比其他方案更为复杂,需要嵌套多层标签,在一定程度上有失 HTML 文档的简洁性。但一个重要的好处是,其各个区块(左侧栏、主体部分、右侧栏)文档结构顺序可以随意调换,而在视觉呈现上却没有任何差异。目前口碑网的前端布局系统正是应用了这种解决方案,并有专用工具实现布局框架的自动化生成。

3、自适应栅格化布局

Object-oriented CSS 提出了一种结构化的多栏自适应布局,利用栅格控制容器宽度,内容控制容器高度。使得多层嵌套的自适应栅格化布局清晰明了。如果应用到类似表格的页面排版,这种方法行之有效。详细参考自适应栅格化布局代码示例:grid_layout.html
而目前大量的网站正在使用 950px/960px 宽度的栅格系统,固定最小栅格单元的宽度,保证整体结构的合理、稳定和一致。与其相比,在局部页面布局中,建议使用 Object-oriented CSS 这种简洁的、基于百分比的栅格方案。如果可以保证内部所有区块自适应

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号