收藏 分享(赏)

固定布局、流动布局、弹性布局.doc

上传人:j35w19 文档编号:6888068 上传时间:2019-04-25 格式:DOC 页数:3 大小:104KB
下载 相关 举报
固定布局、流动布局、弹性布局.doc_第1页
第1页 / 共3页
固定布局、流动布局、弹性布局.doc_第2页
第2页 / 共3页
固定布局、流动布局、弹性布局.doc_第3页
第3页 / 共3页
亲,该文档总共3页,全部预览完了,如果喜欢就下载吧!
资源描述

1、美景创意 www.mjcy.cc电子邮箱:servicemjcy.cc客服热线:400-625-9669 一、 固定和流动布局的不同点虽然大多数设计者和开发人员认为固定和流动布局的定义很基础,但为了更为清晰,再复习一遍。固定宽度布局(Fixed Layout)这种布局有一个设置了固定宽度的外包裹,里面的各个模块也是固定宽度而非百分比。重要的是容器(外包裹)元素是设置为不能移动的。无论访问者屏幕的分辨率是多少,网页都显示为和其它访问者相同的宽度。上图展示的是一个固定宽度布局的基本轮廓。里面的三列分别是 520,200 和 200px宽度。960px 已经成为现代 web 设计的标准,因为大多数站

2、点用户被假定为使用 1024768分略率。流动/流体布局(Fluid/Liquid Layout)流体布局,也被成为流体布局,主体部分都是用了百分比宽度,因此可以自适应用户的分辨率。美景创意 www.mjcy.cc电子邮箱:servicemjcy.cc客服热线:400-625-9669 上图是一个简单流动(流体)布局的轮廓。虽然有些设计师可能给流动布局中某些元素设置了固定宽度,比如 margin,只要主体元素是百分比宽度,就可以让布局自适应适应各种分辨率。二、固定宽度页面设计许多设计者喜欢固定宽度布局胜过流动布局,因为它更容易实现,并确保了设计者所见即用户所见。不过它和流动布局一样,具有两面性

3、。优点固定宽度布局更容易使用,在设计方面更容易定制。在所有浏览器中宽度一样,所以不会受到图片、表单、视频和其他固定宽度内容的麻烦。不需要 min-width 和 max-width,所有浏览器都支持。即使需要兼容 800600 这么小的分辨率,网页的主体内容仍然有足够的宽度易于阅读。缺点对于使用高分辨率的用户,固定宽度布局会留下很大的空白。因此出现了“黄金比例”,“三分定律”,综合平衡和其他设计原则。屏幕分辨率过小时需要垂直滚动条。无缝纹理,连续的图案需要适应更大的分辨率。固定宽度布局一般在可用性上得分较低。三、流动布局页面设计美景创意 www.mjcy.cc电子邮箱:servicemjcy.

4、cc客服热线:400-625-9669 设计师也许有各种理由不使用流动布局设计,但这种布局的优点是不能被忽视的。优点流动布局页面对用户更友好,因为它能自适应用户的设置。页面周围的空白区域在所有分辨率和浏览器下都是相同的,在视觉上更美观。如果设计良好,流动布局可以避免在小分辨率下出现水平滚动条。缺点设计者更难控制用户所见,并可能忽略掉一些错误,因为在特定的分辨率下看起来好的。图片,视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户。在特别大的分辨率下,内容会被拉成长长的一行,变得难以阅读。四、弹性设计这是 web 页面设计的第三种选择,因为能和其他两种主要布局类型(固定宽度和流动

5、)结合使用,弹性设计受到设计师的欢迎。弹性布局使用 em 作为单位。下面的引用阐述了什么是 em 和为什么用它有益。“1px 是电脑显示屏上一个无法度量的一个点,而 1em 是和元素本身的字体一致。 em是相对单位,随用户字体大小变化而改变。 ”虽然弹性设计是为了提供更多好处,但它也像上面两种布局类型有两面性。优点应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。对于同时喜欢流动和定宽布局的设计师来说,弹性布局是完美的,因为前两种布局的优点在弹性布局中都能找到。缺点正是因为第一个优点,这种布局会产生一个巨大的可用性问题。需要花更多时间理解和测试,让布局适合所有用户。这种布局类型相对于其他两个更难制作,它能带来的一点儿可用性提升看起来并不值得。根据布局的具体情况,一些弹性设计需要专门为 IE 6 追加一些样式。

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 企业管理 > 管理学资料

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报