CSS之固定布局、流动布局、弹性布局优缺点分析（上）
2010-07-16 10:26:08 作者：不详 来源：YAML中文社区
三、避开固定宽度设计的弊端
如果你决定使用固定页面设计，你应该知道避开这种布局弊端的技巧，创作出成功的设计。
分辨率统计
现在大多数设计师假定互联网用户的分辨率为1024×768或更高。以统计来自W3Schools。
640×480在图表中没有占据任何位置。W3School的分析认为0%的用户使用这种分辨率，但实际上，一些用户使用了这个分辨率，但它的占有率太小，这个统计的显示设计者可以完全忽略这个分辨率，一样可以提供广泛的可用性。
即便是使用过640×480分辨率的用户，它们或许只是偶尔在便携式设备上浏览过，没有使用平时的主设备。
下面的表格来自SohTanaka.com，这个博客简单的研究比较了2006-2008年一些大站点适应的屏幕分辨率。
这四个站点在3年的时间里完成了从800×600到1024×768的转变。
960px还是740px？
大多数设计者选择960或760px的固定宽度。960px最适合1024×768或者更高的分辨率，有一点空间设置margin。如果设计者想让布局适应800×600分辨率的用户，可以使用760px的宽度，它仍然适用于更大的分辨率。
总是居中布局
当使用固定宽度布局时，应该确保至少居中外包裹DIV以保持一种平衡（margin:0 auto）。否则，对于使用大分辨率的用户，整个页面会被藏到一边去。
四、流动布局页面设计
设计师也许有各种理由不使用流动布局设计，但这种布局的优点是不能被忽视的。
1.优点
- 流动布局页面对用户更友好，因为它能自适应用户的设置。
- 页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。
- 如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条。
2.缺点
- 设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的。
- 图片，视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户。
- 在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读。
流动布局页面例子
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
- HTML CSS JavaScript Dreamweaver Fireworks 设计分享
-
建站教程
网站运营
实用工具
网页模板
网页素材
-
CSS酷站
网上购物
设计团队
设计博客
-
- 教程排行榜
- 21个令人惊叹的CSS技术（案例）展示
- HTML5的Video标签详细说明手册
- 看这些用CSS3绘制的图标，你震撼了吗
- 如何使一个DIV层居中于浏览器中？
- IE PNG Fix—让IE6完美支持PNG透明图片的插件
- 加一段代码让IE6支持hover伪类效果
- CSS Sprite(CSS精灵)的优点和使用方法
- 最新的IE6、IE7和IE8的CSS BUG汇总列表
- 深入理解CSS的inherit与auto之间区别
- CSS3教程：17种用CSS实现的很酷炫的立体网...
- 用浮动清除LI元素在IE6中底部3像素的BUG
- 解决IE6下PNG图片透明的最佳方法
- IE的几个最常见BUG及解决方案
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- CSS样式的postion属性absolute和fixed的区别
- DIV+CSS布局两列右列宽度自适应布局的不同...
- 下载排行榜
- jQuery图片特效代码 带缩略图和文字标题简...
- 仿淘宝商城天猫首页jQuery多格焦点幻灯图特...
- 仿QQ商城焦点图jquery幻灯特效代码
- 宽屏flash+xml焦点幻灯图特效代码
- 效果媲美flash的jQuery幻灯代码支持多种切换效果
- 3D立体效果的flash+xml照片墙相册展示代码
- 带标题和数字导航的JS焦点幻灯特效代码
- 31款简单实用的CSS+JS下拉菜单脚本
- 漂亮的jquery+Lightbox灯箱效果图片展示特效代码
- 基于mootools有7种效果的Gallery(画廊)幻灯相册代码
- 超酷HTML5图片特效代码支持全屏显示
- 漂亮的jquery画廊相册特效支持缩略图和键盘...
- 可自动展开和折叠收起的QQ在线客服代码
- 半透明立体质感的宽屏flash+xml焦点幻灯代码
- 基于jQuery的首页自动收缩全屏广告代码
- 超酷3D摩天轮flash+xml幻灯相册特效源码