弹性+固宽布局
作者:by0001 来源:冰极峰博客 发布时间:2009-05-15 12:19:00
在当今用户的显示器越来越大的今天,之前的1024*768固宽布局有点越来越不合时宜,对大屏幕的用户而言,两侧空空的留白给人第一眼的印象是严重的屏幕浪费,作为网页设计师的你有责任给这一批用户一个良好的用户界面。
当然为了减少这种屏幕的浪费,采用弹性流体布局是最好的解决方案,它可以充分利用屏幕空间,无论你是多大分辩率的用户,都能尽情满屏展示内容。然而因为种种限制,目前的网页完全采用流体弹性布局条件还不具备(特别是浏览器厂商对标准的肆意 * 以及CSS标准的不完全支持等等)。作为夹在用户和厂商的中间者,我们只能以一种兼容的心态去适应两者的差距。所以,作为一种过渡的解决方案,有了这样一种布局:弹性+固宽布局。
这里所说有弹性,指的是背景去自适应屏幕宽度,而固宽呢,则是让正文内容无论在宽屏还是窄屏中都能自动居中。夹缝中求生存,以满足不同大小分辩率用户的需要。如下图所示的设计就是一个典型的样例。
图一
废话少说,言归正传,我们就来制作一个这样的布局结构:
首先构建结构层:
<div id="wrapper">
<div id="main" class="clearfix">
<div id="header">
<div id="inheader"></div>
</div>
<div id="content"></div>
</div>
</div>
<div id="footer">
<div id="infoot"></div>
</div>
分析一下结构层,一个网页一般包括页头,内容区和页脚三大部分,我们将页头和内容放在一个容器层,取名为wrapper,而将页脚独立出来,取名为footer,为什么要这样设计,我们想让这个页脚在内容区不满一屏的情况下也是绝对居底的。其具体的实现原理可以参考这篇文章:《CSS Sticky Footer: 完美的CSS绝对底部》。
我们将wrapper和footer这两个容器设置100%的宽度,让它自动适应屏幕的宽度。并且也将header页头区域也设置成100%宽度。这样我们可以在页头和页脚中插入一张可以水平平铺的图片,使页头和页脚的背景在大屏幕下能水平充满整个屏幕空间。
作为正文内容,我们一般的做法是,当分辩率变大,让它居中显示,两侧留出空白。因为页头区域已经设置为100%宽度,所以我们在header中再添加一个容器层inheader,它来作为真正的页头文字内容的载体,我们再给它设置一个固定的宽度值,比如是960像素宽,然后让它自动居中。
#inheader{width:960px;height:110px; margin:0 auto; }
这样页头的正文浮动haeader的上层,这两个层可以设置不同的背景图片,形成一个叠加的页头效果,它能自动适应更大的屏幕分辩率。
同样的道理,页脚也可以采用这种方法来实现。
在上面的结构层,我在中间内容区没有采用这种方法,而是做了一点变通,我们可以看到在content这个内容区中,没有内嵌一个容器,而只有一个容器。如果我们为了让正文内容的两侧在大分辩率下两侧不显得太空洞,该怎么办呢,当然你可以采用页头和页脚的做法,在它的内容再加一个div。当然为了减少嵌套,我们可以采用变通的办法。我们可以将一张超大的图片加在body中背景中,并用background-position来定位居中显示这张图片,这样在内容区两侧的图片就显示出来了。
本博客就是一个具体案例,在大分辩率下看看本博客两侧图片,然后缩小窗口,就可以看到两侧图片在1024*768时只显示了一小块,而正文内容始终居中显示的。
猜你喜欢
- 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含
- 其实SQLServer提供了一个sp_spaceused的系统存储过程可以实现该功能,下面就是调用的SQL: 代码如下:crea
- 如果你经常浏览网页一定见过很多网站在form表单中的文本域(textarea)中添加了的背景图片,一般是使用网站的logo,我记得我最早注意
- 尽管有很多规范URL的标准,例如RFC 3987,但实际应用中却非常混乱。本文主要介绍浏览器发送URL到服务器的一些特性,作为开发和应用的参
- 什么是JSON http://www.json.org/json-zh.htmlJSON(Javascript Object Notatio
- MySQL的命令行提示符及其表达的意思mysql> 准备好接受新命令。 &n
- 代码如下: var lishustr = "qwertyuiopasdfghjklmnbvcxz"; var s = l
- 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站
- 返回首页的链接地址,有三种方法:1、一般方法是,直接写对应的域名地址,<a href="http://www.zfnn.co
- Oracle数据库以其高可靠性、安全性、可兼容性,得到越来越多的企业的青睐。如何使Oracle数据库保持优良性能,这是许多数据库管理员关心的
- Varchar 对每个英文(ASCII)字符都占用2个字节,对一个汉字也只占用两个字节char 对英文(ASCII)字符占用1个字节,对一个
- [参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ][操作系统:Windows]
- UNIX时间戳转换为日期用函数FROM_UNIXTIME()select FROM_UNIXTIME(1156219870);日期
- 前三篇文章中,明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。Blueprint的实现Blueprint是一个
- 除了IE浏览器,其他所有主流的浏览器均支持原生的 Base64 编码:btoa(text) – base64 encodes text. a
- ADODB.Stream在ASP编程中往往用于无组件上传,并且可以指定文件编码,可以应对各种不同的需要。但是在使用ADODB.Stream过
- 给静态网页加密的方法有很多,有的简单有的复杂。前两天看见有人问静态网页加密问题,就写了这个代码思路:加密时:先把用户的密钥A用md5加密为B
- 今天在 ajaxian 上看到一篇文章,名为 Five Ajax Anti-pattern ,觉得讲得比较有道理,现粗略翻译一下,加一些自己
- asp使用fso对象遍历目录及目录下的文件代码:<%@ Language=VBScript %><%&
- asp之家注:本篇asp留言本教程可以说是我见过的最详细,写的最认真的,最适合初学者来学习asp的一篇教程。在此感谢作者hemooday。可