CSS之固定布局、流动布局、弹性布局优缺点分析(下)
五、使用流动宽度页面设计
虽然流动布局表现出一些问题,但是可以使用一些技巧克服它们。
使用简单的设计
流动站点设计越少依赖图片和困难的技术,就越容易被制作和维护。它将能够兼容各种分辨率。使用更为简洁的代码和设计,可以更好的防止、发现和解决兼容性问题。
例如Smashing Magazine使用了流动页面布局,为了更简单,只让顶部的黑橘色导航可以延伸,自适应用户的分辨率。另外内容区域按照需要延伸和收缩,智能地使用CSS防止sidebar和内容产生冲突。
Min-width和Max-width
为了让流动布局在屏幕分辨率很大或者很小时有固定宽度,可以使用min-width和max-width,让页面具有可用性。在小分辨率下,页面可能可能固定宽度布局一样产生水平滚动条。W3School对min-width和max-width的详细定义:
IE 6无法支持min-width和max-width。可以使用CSS表达式解决。
六、弹性设计
这是web页面设计的第三种选择,因为能和其他两种主要布局类型(固定宽度和流动)结合使用,弹性设计受到设计师的欢迎。弹性布局使用em作为单位。下面的引用阐述了什么是em和为什么用它有益。
“1px是电脑显示屏上一个无法度量的一个点,而1em是和元素本身的字体一致。em是相对单位,随用户字体大小变化而改变。”
-Patrick Griffiths, A List Apart
虽然弹性设计是为了提供更多好处,但它也像上面两种布局类型有两面性。
1.优点
- 应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。
- 对于同时喜欢流动和定宽布局的设计师来说,弹性布局是完美的,因为前两种布局的优点在弹性布局中都能找到。
2.缺点
- 正是因为第一个优点,这种布局会产生一个巨大的可用性问题。需要花更多时间理解和测试,让布局适合所有用户。
- 这种布局类型相对于其他两个更难制作,它能带来的一点儿可用性提升看起来并不值得。
- 根据布局的具体情况,一些弹性设计需要专门为IE6追加一些样式。
弹性页面设计例子
弹性布局和流动布局在表现上十分相似,经常让人困惑。不过弹性设计使用em而不是百分比作为单位,只要依赖于字体大小。这些设计自适应用户浏览器文本大小。
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
-
HTML
CSS
JavaScript
Dreamweaver
Fireworks
设计分享
-
建站教程
网站运营
实用工具
网页模板
网页素材
- CSS酷站 网上购物 设计团队 设计博客
- 教程排行榜
- 21个令人惊叹的CSS技术(案例)展示
- 看这些用CSS3绘制的图标,你震撼了吗
- HTML5的Video标签详细说明手册
- 如何使一个DIV层居中于浏览器中?
- 加一段代码让IE6支持hover伪类效果
- IE PNG Fix—让IE6完美支持PNG透明图片的插件
- CSS Sprite(CSS精灵)的优点和使用方法
- 最新的IE6、IE7和IE8的CSS BUG汇总列表
- 深入理解CSS的inherit与auto之间区别
- 用浮动清除LI元素在IE6中底部3像素的BUG
- CSS3教程:17种用CSS实现的很酷炫的立体网...
- 解决IE6下PNG图片透明的最佳方法
- IE的几个最常见BUG及解决方案
- DIV+CSS布局两列右列宽度自适应布局的不同...
- CSS样式的postion属性absolute和fixed的区别
- CSS教程:用相对定位实现简单的图片边框阴...
- 下载排行榜
- 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码
- 半透明立体质感的宽屏flash+xml焦点幻灯代码
- 简洁效果多图切换flash幻灯焦点图代码
- 带标题和数字导航的JS焦点幻灯特效代码
- 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码
- 31款简单实用的CSS+JS下拉菜单脚本
- 3D立体效果金字塔环形旋转的flash+xml相册代码
- 基于jQuery实现的瀑布流布局列表特效代码
- 透明质感上下滑动带小图预览5屏JS焦点图幻...
- 超酷的3D摩天轮flash+xml相册幻灯图片代码
- 能沿多个方向滑动切换的jquery幻灯代码
- 自带多种幻灯效果支持缩略图导航的jquery画...
- 可改图片尺寸和张数的flash幻灯轮换代码
- 很好看的带缓冲效果CSS下拉菜单导航代码
- 基于jquery很有趣的360度全景图片预览特效
- 6屏幻灯上下滑动式带缩略图和文字介绍的fla...

