网站用户体验整合设计-体验css+div 之解决流体布局的问题

体验css+div 之解决流体布局的问题

Post by 张美工, 2008-10-15, Views:

　　在利用流体布局的优势的同时，一定要解决它们带来的问题。很自然，这些问题的主要原因是宽度是可变的。例如，过大的宽度会导致很长的行，造成屏幕阅读困难。相反，很窄的宽度最终会导致软性破坏，使内容出现重叠。
　　为了解决这些问题，利用min-width和max-width来定义整个布局是最小和最大宽度。为#container和#footer ID选择器定义了这些属性，这是布局的两个主要包含块。
最初的代码相当简单：
#container,#footer {
   min-width:740px;
   max-width:1200px;
}
　　因为760像素是固定宽度布局的宽度值，考虑到主体中10像素的左右空白边，这里使用740像素（760-10-10=740）。这定义了布局的最小宽度。
　　最大宽度设置为1200像素。这使布局能够在最高1280像素的屏幕分辨率上伸展到全部宽度。超过这个宽度之后，布局停止伸展，以防止行长过大。
　　但是有一个问题。IE6和更低版本不支持min-width和max=width。对于这个问题有解决方案，但是这意味着要使用一个专有的扩展：
#container,#footer{
width:expression(document.body.clientWidth < 740? "740px":
   document.body.clientWidth > 1200? "1200px" : "auto");
}
　　如果页面体的宽度小于740像素，那么这个JavaScript表达式将宽度值设置为740像素；如果宽度大于1200像素，那么将宽度值设置为1200像素。
　　糟糕的是，这个专有的扩展会使CSS失效。因此，我们将这段代码放在一个单独的CSS文件css.css中。这样流体布局的问题我们就能够解决了。

相关文章：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
# Dreamweaver的超级技巧汇总(1)
# 在线QQ MSN TEL交谈工具代码
# 方便使用的一些小简短input\form代码
# VSS使用手册
# JS表单判断函数代码大全 (三)
# JS表单判断函数代码大全 (二)
# JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总

# 体验css+div 之　CSS hack:区分IE6，IE7，firefox

# 体验css+div 之兼容标准XHTML的浮动层特效实现

# 因为编码差异导致IE6不能正常解析CSS文件

# 商业网站响应用户需求重视与Firefox兼容

# frameset 的属性
# frameset元素属性详解、浮动框架的制作、超链接与框架的制作

# 体验css+div 之 SEO

# 40个网页常用小代码

# div+css样式几个小精华

# 网站用户体验--CSS常用小技巧

# 体验css+div 之 css技巧-经典中的经典

# 体验css+div 之 CSS样式表设计的十条技巧

# 体验css+div 之网页切图过程中div+css命名规则

# 网站用户体验--根据项目需求定义常用CSS2基本定义例子
# 体验css+div 之三种使网站背景图片自动适应浏览器大小的方法

# 创建锚链接

# 如何让单行文本框input与多行文本框textarea背景透明

# 用EditPlus转化文件格式到UTF-8
# 让长字符URL/Email自动换行

# HTML特殊字符显示

# 体验css+div定位与table定位代码的差异
# 体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别？

# 体验css+div 简单的滑动门效果代码

# 体验css+div 超实用的滑动门效果代码（css和代码都包含在内）

# 彻底弄懂CSS盒子模式(DIV布局快速入门)

# 如何把握网页布局
 # 实例详解CSS网页布局原理

# 体验CSS+DIV 之基本布局

#  体验css+div 之解决流体布局的问题
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞
# 体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜固定宽度布局＞

#  体验css+div 之为什么css+div 会盛行
#  体验css+div中id和class各自的用法及区别

# 体验css+div 之规划、组织和维护样式表

# 体验css+div 之基本列表样式

# 体验css+div 之为样式找到目标

# 体验css+div 之圆角框

# 体验css+div 之层叠和特殊性
# css之自动换行

# CSS控制连续英文字母或数字强制换行

# 让css使网页图片半透明

# 体验css+div 之背景透明内容不透明的写法
# 体验css+div 之给整个页面添加渐变背景
 # 用css样式控制做成的按钮,取代图片按钮

# 体验css+div 之鼠标经过按钮发生变化效果
# 体验css+div 之文本框自适应窗口宽度
# 体验css+div 老问题重新讲“怎样使页面整体居中”
# 体验css+div之图像替换 1.徽标图像替换
# 体验css+div 之使用自动空白边让设计居中

+

Tags: 解决流体布局

分类:css+div | 评论:2 | 引用:0

上一篇：体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
下一篇：体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞

或许你还对下面的文章感兴趣

Comments

2.当当网
http://www.dangdanga.net.cn
看到博主您的博客感觉很棒，希望能做个链接
已经添加好了您的链接
我的博客是 http://www.dangdanga.net.cn
博客名字是当当网
2008-10-25 9:56:36 回复

1.卓越网
http://www.joo11.cn
博主您的博客挺不错的,
可否做个链接？
我那边做好了~
回复：我已经给你做好链接了！
由张美工于 2008-10-17 8:56:01 最后编辑
2008-10-16 21:49:00 回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

最新评论

Guest