<![CDATA[壹想网]]> http://www.yorsun.com/blog/ zh-cn PBlog2 v2.4 壹想网 http://www.yorsun.com/blog/images/logos.gif http://www.yorsun.com/blog/ 壹想网 http://www.yorsun.com/blog/article.asp?id=77 <![CDATA[Web可用性设计的247条指导方针]]> jackywb@126.com(yorsun) Thu,10 Dec 2009 11:02:16 +0800 http://www.yorsun.com/blog/default.asp?id=77
译序：Userfocus是英国一家专门从事网站可用性设计的咨询培训公司。它为我们分享了247条Web可用性设计的指导方针，并把它们清晰的分为九个大类：首页可用性设计、任务导向、导航和信息架构、表单和数据输入、可信度、写作和内容质量、页面布局和视觉设计、搜索可用性、帮助反馈和容错。如Userfocus所说，“虽然易用性系统的设计远不止应用一些简单的指导方针，但是它们却可以为获取稳定性和好的实践提供有意义的帮助。”

译者：IIduce，转载请务必以链接形式注明来源。

原文地址：http://www.userfocus.co.uk/resources/guidelines.html

———————————————————————————————————–

导航：

  1. 首页可用性设计（20条评估首页可用性的方针）
  2. 任务导向（44条评估网站对用户任务支持程度的方针）
  3. 导航和信息架构（29条评估导航和信息架构的方针）
  4. 表单和数据输入（23条评估表单和数据输入的方针）
  5. 可信度（13条评估可信度的方针）
  6. 写作和内容质量（23条评估写作和内容质量的方针）
  7. 页面布局和可视设计（38条评估页面布局和可视设计的方针）
  8. 搜索可用性（20条评估搜索可用性设计的方针）
  9. 帮助、反馈和容错（37条评估帮助、反馈和容错的方针）


首页可用性设计

  1. 首页元素要清晰的关注用户的关键任务（避免“增加功能倾向（featuritis）”）
  2. 如果网站比较大，那么首页应包含搜索输入框
  3. 首页要十分清楚的提供产品（内容）分类
  4. 在首页或首页内一次点击展示有用的内容
  5. 信息展示时应当是简单的、自然的、符合逻辑顺序的
  6. 在首页展示真实网站内容的优秀示例
  7. 首页上的链接以最重要的关键词作为起始（例如：“Sun holidays”而不是“Holidays in the sun”）
  8. 在首页提供一个最近的特色项列表，并提供存档内容的链接
  9. 首页导航不要过度格式化（修饰），确保用户不会把它误认为广告
  10. 在首页清晰的声明价值取向（例如一个标志性的口号或欢迎语）
  11. 在首页包含有意义的图案设计，而非无关的剪贴画或绘画作品
  12. 导航选项按逻辑性或用户导向方式排序（把次要的公司信息放在底部）
  13. 首页标题（title）可以为诸如google等搜索引擎提供良好可见度
  14. 所有公司相关信息安排在一个显著区域（例如：“关于我们（About Us）”）
  15. 用户可以了解到价值取向
  16. 一看到首页，第一次访问的人就知道从何处开始
  17. 在首页展示出所有主要的操作选项
  18. 首页拥有一个易记的URL
  19. 首页需经过专业设计，以给用户良好的第一印象
  20. 首页的设计要能激发用户探索站点的兴趣
  21. 首页就要像一个首页，不能让用户把它与二级页面混淆


任务导向

  1. 网站应避免出现不相干的、多余的或让用户分心的信息
  2. 避免过多的使用脚本、小应用程序（applets）、视频音频文件、图案和图片
  3. 网站应避免不必要的登记
  4. 关键人物路径必须是清晰的，无干扰的（例如：购买、捐献）
  5. 信息以简单的、自然的（natural）、符合逻辑顺序的方式展示
  6. 应尽量缩减每个任务需要的屏幕数量
  7. 应减量减少页面滚动（scrolling）和点击
  8. 网站应正确的预期和提示用户下一步可能的动作
  9. 展示图表时，确保用户可以看到真实数据（例如在柱状图上标明数字注解）
  10. 当分配给用户任务时，应充分利用计算机的优势（例如搜索输入的自动完成功能）
  11. 用户可以快速完成普通任务
  12. 当必要时，应为当前任务提供数据对比功能（例如：商品比较）
  13. 任务顺序应当与用户日常工作顺序一致
  14. 网站可以保证用户的工作比不使用它时更轻松快捷
  15. 最重要的或经常使用的主题、特征或功能应放在页面中央附近的位置，而不是特别靠左边或右边
  16. 确保用户不会重复输入相同的信息
  17. 重要的、频繁使用的主题或任务应接近网站的“表面”
  18. 保持最少的录入（例如购买过程中），并为用户提供加速器
  19. 任何给定任务路径应当有一个合理的步骤长度（2-5次点击）
  20. 当一个任务有多步时，网站要告诉用户完成任务需要的所有步骤，并为用户当前步骤所在的位置提供反馈
  21. 在每个产品后面紧跟它的价格
  22. 可以非常容易的找到网站的隐私策略，尤其是在那些要求填写个人信息的页面。隐私策略应当是简单的、清晰的
  23. 网站用户不需要记住从一个地方到另一个地方的信息
  24. 隐喻的使用可以被典型用户轻松理解
  25. 数据格式应当遵循文化常规
  26. 软件的内部工作细节不要暴露给用户
  27. 应当迎合用户那些之前已经养成的那些小的互联网习惯
  28. 网站应当易于用户浏览，在执行前可以自己尝试其它的功能操作
  29. 第一次到访的典型用户应当可以在不需帮助的情况下完成最常用的功能
  30. 当用户回到网站时，用户可以记得如何执行主要任务
  31. 那些新颖设备（novel device controls）的功能应当是显而易见的
  32. 在购物车页面，在页面的顶部或底部应当清晰的展示”处理结账”按钮
  33. 重要的操作入口（例如“添加到购物车”）应当非常清晰可见
  34. 操作按钮（例如“提交”）应当由用户触发，而非在完成所有选项时系统自动触发
  35. 命令或操作项英以按钮的形式的展示（而非例如链接）
  36. 如果用户在事务处理中中途退出，用户在稍后返回站点时可以继续他退出之前的工作
  37. 当页面展示大量信息时，用户可以排序和过滤信息
  38. 按钮或图标上的图像应当与内容相关
  39. 当用户被系统自动注销时应当提示用户，并且自动注销的时间间隔要恰当
  40. 不必要的功能（例如flash动画）可以被关闭或跳过(skip)
  41. 网站应当是健壮的，并且所有关键功能可正常工作（例如不应有javascript页面异常、CGI报错或死链接）
  42. 网站通过不同程度的说明来支持新手用户和专家用户（例如帮助信息、错误信息）
  43. 网站允许用户重新填写一些信息项（例如更改发货地址、更改账户信息）
  44. 网站允许用户自定义操作时间参数（例如自动退出的时间）


导航和信息架构

  1. 关联页面或区域间的跳转移动应当是方便的、显而易见的，并且可以容易的回到首页
  2. 在绝大部分页面都可以轻松的导航至用户最可能需要的信息
  3. 导航选项按照最常用逻辑或任务导向方式排序
  4. 导航系统应当是内容宽泛并层级较浅的，而非有比较深的层级
  5. 站点结构是简单的，有一个清晰的概念模型，没有不必要的层次
  6. 在所有页面都可以到达网站主要部分（持久导航persistent navigation），导航过程不会中断
  7. 导航标签放在页面顶端，而且要设计成看上去可以点击的样子
  8. 要有一个站点地图用来提供整个站点内容的概况
  9. 在任何页面都可以链接到站点地图
  10. 站点地图提供一个简洁的网站概貌，而非主要导航的重复或各主题的简单罗列
  11. 提供良好的导航反馈（例如显示当前位置）
  12. 分类标签应当能准确描述该分类的信息
  13. 链接或导航标签包含用户要达到目标所寻找的“触发字眼（trigger words）”
  14. 术语和常规（例如链接颜色）应当（近似地）与互联网习惯用法保持一致
  15. 在网站各个组成部分中的链接样子应当一致
  16. 产品页面应当包含与当前产品相似或互补产品的链接，以实现交叉营销
  17. 导航项和链接中的用词应当是无歧义的，并且使用术语
  18. 用户可以排序和过滤目录页面（例如按价格排序或最热门排序）
  19. 当鼠标放在某个可点击的元素上时，元素应当有明显变化（包括光标的变化）
  20. 重要内容可以通过不止一个链接访问到（不同的用户有可能需要不同的链接标签）
  21. 仅用于导航的页面（例如首页）可以再不滚动的情况下浏览
  22. 触发事件的超链接应当与链接到其它页面的超链接（例如：下载）在外观上有明显区分
  23. 网站允许用户控制交互速度和顺序
  24. 在网站每个页面清晰标注退出入口，允许用户从当前任务中推出，而不必通过一个额外的对话框
  25. 网站不可禁用浏览器的“后退”按钮，“后退”按钮应当在每个页面的浏览器工具栏上都有显示
  26. 用户点击浏览器后退按钮时，总能回到他之前所在页面
  27. 购物车（basket）和结账（checkout）链接应当在每个页面中都可以看的十分清楚
  28. 如果网站有打开新窗口，那么这个动作不应使用户困惑（例如：新窗口应该是一个设定大小的对话框或并可以轻松关闭）
  29. 菜单的使用说明、提示、相关信息应当在每个屏幕的同一位置显示


表单和数据输入

  1. 数据输入框在适当的时候应当包含默认值，显示要填的数据格式和输入框允许输入的长度
  2. 如果任务设计源文件（例如纸张形式），那么界面应当与源文件的规格一致
  3. 网站能自动完成格式化数据的输入（例如货币符号等），用户不需要输入类似£ 或 %的符号
  4. 表单域的标签应当清楚的说明该输入框希望输入什么
  5. 表单中的文本框应该为预期答案设定合理长度
  6. 表单中的必填项和选填项应当有明显的区分
  7. 登陆和注册应当用相同的表单（就像Amazon一样）
  8. 如果完成表单需要外部信息的话应当提前告知用户，例如护照编号
  9. 表单中的问题项（输入框）应当按逻辑分组，并且每组都有一个标题
  10. 表单域应包含提示、示例或样例答案，告知用户输入框期望输入什么
  11. 如果输入框的标签以表单问题的方式提出，那么这些问题应当是陈述清晰、简单的
  12. 在表单中，相对于文本输入框，应当优先使用下拉菜单、单选按钮、复选框（文本输入框不应当使用过度）
  13. 在数据输入页面，光标应当被放置在需要输入的地方
  14. 数据输入（例如日期）和输出（例如数值单位）的格式应当被清晰标明
  15. 用户可以在进输入一些基本必要信息就可以完成简单的任务（系统可以默认补充一些不重要的信息）
  16. 表单允许用户尽可能久的保持一种简单的交互方式（例如，用户不必在键盘鼠标间不停的切换）
  17. 用户可以更改表单域的默认值
  18. 文本输入框需指出要输入数据的数量和格式
  19. 表单在提交前执行数据验证
  20. 在数据输入界面，在适当的时间执行表单域级别验证和表单级别验证
  21. 网站应可以轻松地更正输入错误（例如，当验证表单未完成，应当将光标放置在需要输入的位置）
  22. 数据输入和数据显示应当保持一致性
  23. 表单域标签应当靠近输入域（例如：标签右对齐）


可信度

  1. 内容应当是最新的、权威的、可信赖的
  2. 网站有第三方（例如引用、第三方使用见证）来说明信息的准确性
  3. 应当清晰标明网站的幕后有真实的组织（例如：提供一个真实地址或办公室照片）
  4. 公司有一些认证专家（可以使用一些凭证）
  5. 网站应避免广告，尤其是弹出式广告
  6. 在结账的最一开始就突出提示运送费用
  7. 网站应当避免空洞的营销辞令（marketing waffle）
  8. 每个页面都应当清晰显示站点标识，保证用户确认他仍然在同一个网站上
  9. 通过网站可以轻松联系到某人以获取帮助，并可尽快得到回复
  10. 内容是新鲜的，网站应经常更新，总包含最近的内容
  11. 网站应当避免版式错误和拼写错误
  12. 用可视化设计来补充商品和线下营销信息
  13. 网站组织应当有一些真实的人，他们是诚实的、可信赖的


写作和内容质量

  1. 网站有能引起别人兴趣的、独一无二的内容
  2. 正文是简明的，没有不必要的说明和欢迎辞令
  3. 每个内容页应以内容结论或内容意义启示作为开端，正文以倒金字塔方式书写
  4. 相对于叙述式的文本，网页应当优先使用无序列表和有序列表
  5. 列表应当以简短的说明作为开始，帮助用户意识到该列表是如何与其它关联起来的
  6. 那些最重要的列表项应当放在列表的前面
  7. 信息应当分层次组织，从一般的到具体的，组织结构应当是清晰的、符合逻辑的
  8. 内容应当专门为互联网（Web）创建（web pages do not comprise repurposed material from print publications such as brochures）
  9. 产品展示页面应当包含购买须了解的信息，用户可缩放产品图片
  10. 使用超文本适当地组织内容
  11. 以主动语态书写语句
  12. 网页应当易于快速浏览，充分使用标题、副标题和较短的段落
  13. 相对于文本式的语言，优先使用地图、图表、图形、流程图和其它视觉元素
  14. 每个网页都应有描述信息，以及有用的标题，用以支持书签
  15. 链接及链接描述（title）应当具有描述性或推测性，不应当出现“点击我（Click here）”这样的链接
  16. 标题不应当故作风雅、故作聪明或含义隐晦
  17. 链接文本应当与目标页面的标题(title)相符，这样用户就可以在到达目标页面时心里有数
  18. 按钮文本及链接文本以动词开头
  19. 标题和副标题应当是简短的、直截了当的、具有描述性的
  20. 遣词造句及用到的概念应当为典型用户所熟悉
  21. 有序列表从1开始，而不是0
  22. 第一次使用的缩写词汇应当加以说明
  23. 文本链接应当足够长以便于理解、又应当足够短以保证最少换行（尤其被用作导航列表时）


页面布局和可视设计

  1. 网线数应当适于目标用户和他们的任务
  2. 布局可以帮助用户把注意力集中在下一步要做的东西上
  3. 在所有页面，最重要的信息（例如经常用的主题、特色和功能）放在屏幕的第一个满屏
  4. 网站在不水平滚动的情况下就可以使用
  5. 可点击的元素（例如按钮），应当设计成明显可点击的样子
  6. 不能点击的元素
  7. 按钮或控件的功能从他们的标签或设计上就可以明显看出来
  8. 可点击图片包含多余文本标签（Clickable images include redundant text labels (i.e. there is no ‘mystery meat’ navigation)）
  9. 超文本链接可以轻松被辨认（例如下划线），而不需要大面积扫视。
  10. 网站字体使用应当具有一致性
  11. 控件和它所具备的操作之间的关系是显而易见的
  12. 图标和图形是标准的和（或）直观的（具体的和为人熟悉的）
  13. 在每一个页面上都应有一个清晰的视觉“起点”
  14. 网站的每个页面共享一致的布局
  15. 网页为打印格式化，或者有一个为打印准备的版本
  16. 按钮或链接能显示出他们被点击过了
  17. 图形用户界面（GUI）组件（例如单选按钮和复选框）应当被适当地使用
  18. 所用字体应当是可阅读的
  19. 网站应当避免使用斜体字，并只为超文本添加下划线
  20. 信息密度和留白应当有一个良好的平衡
  21. 网站看上去应是让人愉悦的
  22. 网页应避免出现“滚动障碍物（scroll stoppers）”（标题或其它页面元素给用户造成在页面顶部或底部的错觉）
  23. 网站应当避免大量使用大写文本
  24. 网站应当有一致性的、清晰可识别的外观和感觉，以吸引用户
  25. 深蓝色避免使用在细节地方（Saturated blue is avoided for fine detail）（例如文本、细线和符号）
  26. 借助颜色组织和分组页面元素
  27. 网站图形不应当与banner广告混杂不清
  28. 对于重要的主题分类加重显示（em）
  29. 在标准宽度的浏览器窗口中，内容页面一行不要太短（小于50字）也不要太长（大于100字）
  30. 页面依据栅格设计，所有页面元素和部件水平对齐、垂直对齐
  31. 有意义的文本标签，令人印象深刻的背景配色，边框和留白的恰当使用，这些一起来帮助用户把网页元素分别出不相关联的功能区域
  32. 网页配色合理搭配，避免过于复杂的背景设计/li>
  33. 较为独立的网页应当避免杂乱不相干的信息
  34. 标准页面元素（例如页面标题、站点导航、页面导航、隐私策略等）可轻松找到
  35. 组织logo放置在每个页面的相同位置，点击logo后返回最合情理的页面（比如首页）
  36. 吸引人注意力的特色元素（例如动画、醒目的色调、明显的字体大小差异）应当保守的使用，并只在恰当的地方使用
  37. 图标（icons）要在视觉上和概念上有所区分，但又要与页面和谐。
  38. 相关信息和功能集中放置，每一组可以在一个视野浏览到（大约直径为4.4厘米的屏幕区域）


搜索可用性

  1. 默认搜索应当是可以直观地配置（没有布尔操作符no Boolean operators）
  2. 在搜索结果页面向用户展示搜索到的内容，并且在该页可以编辑检索词并重新提交搜索
  3. 检索结果应是清晰地、有用的、并依据相关度分级
  4. 检索结果页面应清晰告诉用户检索到多少条记录，每一页显示的记录数可以由用户配置
  5. 如果没有返回结果，系统依据用户输入的检索词存在的可辨认问题提供建议和可选输入项
  6. 搜索引擎可以优雅地处理空检索串的情况
  7. 最常用的检索串可以获得有用的结果
  8. 搜索引擎应当提供模板、示例或提示来帮助用户高效使用它
  9. 网站应当包含一个功能更强大的搜索页面，帮助用户更加完善他们的检索（可以把它叫做“修改检索 revise search”或“精确检索 refine search”，而非“高级检索 advanced search”）
  10. 检索结果页面不显示重复结果（无论是能感知到的重复还是实际的重复）
  11. 检索输入框应当足够长，可以应对常用检索词的长度
  12. 检索应当覆盖整个站点，而不是站点的一部分
  13. 如果网站允许用户创建复合检索，那么这些检索应当是可保存，定期被执行的（这样用户就可以跟踪动态信息的最新动态）
  14. 检索界面应当放置在用户期望的地方（一般是页面的右上区域）
  15. 检索框及他的控件应清晰列出（多检索框可能会难以理解）
  16. 站点既可以满足那些想随便浏览的用户，也可满足想搜索的用户
  17. 在检索结果页面应当明确当前检索的范围，并且用户可以约束这个范围（如果该任务需要的话）
  18. 结果页面显示有用的元信息（meta-information），例如文档的大小、创建的日期、文件类型（word、pdf等）
  19. 搜索引擎提供自动的拼写检查，并提供复数词和同义词查找
  20. 索索引擎提供相似检索选项（例如 “更多相似” 链接）


帮助、反馈和容错

  1. 常见问题解答或在线帮助提供循序渐进地指导，帮助用户完成最重要的任务
  2. 在恰当的地方和恰当的时间可以轻松获取帮助
  3. 提示应当是简洁的、表达清楚的
  4. 用户不需要求助于用户手册或其它外部信息来使用站点
  5. 网站有一个定制的404页面，该页面包含如何找到要找页面的提示，并包含主页和和检索页面的链接
  6. 网站在必要时（例如校验时）提供良好的反馈信息（例如进度提示或一些信息）
  7. 用户在选择商品时可获取到帮助
  8. 用户在执行由潜在“危险”操作（例如删除什么）之前提供用户确认
  9. 用户确认页面是清晰地
  10. 错误信息包含先一步该做什么的清晰指示
  11. 在提交购买的前一个时刻，网站向用户清晰地展示概览页面，这个页面应当与购买确认页面区分开来
  12. 当用户需要在不同的选项（例如在一个对话框）前抉择时，这些选项应当是明确的
  13. 在网站响应时间时产生的不可避免的延迟应当告知用户（例如授权信用卡交易时）
  14. 错误信息以非嘲弄的语气书写，并且不要责怪用户的错误
  15. 页面可以快速加载（5秒或更短）
  16. 网站提供对用户输入或其他操作的及时反馈
  17. 在加载比较慢的大页面应当提示用户（例如：“正在加载……”），最重要的信息应当首先显示
  18. 当使用工具提示条（tool tips）时，应当提示对用户有用的额外帮助，而不是简单的重复图标、链接或字段域标签中的文本
  19. 当给用户一些帮助提示时，告诉他们要做什么，而不是避免做什么
  20. 网站在适当的地方向用户展示如何做常见任务（例如：提供网站的功能示例）
  21. 网站通过提供反馈信息（例如“您知道吗？”），帮助用户了解怎样使用网站
  22. 网站提供上下文敏感帮助
  23. 帮助应当是直截了当的，用直白简单的方式表达，避免使用行话和流行语
  24. 当一个任务成功完成后，网站提供清晰地反馈信息
  25. 必要时重要提示信息应当在屏幕上保留，使用户有足够时间记录下这些信息
  26. 遵循“菲茨法则”（控件之间的距离和控件的大小应当是适宜的，大小与距离成比例）
  27. 目标对象间有足够空间，防止用户点击了多个目标或错误的目标
  28. 可点击元素之间至少有两个像素的距离
  29. 当网站发生错误时，应当是显而易见的（例如，当表单未完成，高亮未完成的表单域）
  30. 网站提供适当的选择方式（例如下拉列表）来代替用户输入
  31. 网站应努力把防止用户出错的工作做好
  32. 网站在纠正用户错误输入前提示用户（例如，google的“您是不是要查找…”）
  33. 网站应当确保任务不是令人困惑的
  34. 错误信息应当用直白的语言描述，并给与问题足够的解释
  35. 用户在一个任务中可以推迟解决错误至一个较晚的时间
  36. 如果有必要的话，网站提供错误信息更多的细节
  37. 可以非常容易撤销（或取消）、重做（Redo）操作
]]> http://www.yorsun.com/blog/article.asp?id=76 <![CDATA[2010 Web 设计应用趋势观察]]> jackywb@126.com(yorsun) Fri,04 Dec 2009 11:26:57 +0800 http://www.yorsun.com/blog/default.asp?id=76


上图是Google 在过去12个月内对 Tumblr, Digg 和StumbleUpon在全球范围内的检测数据图表，也是是Seoptimise 的Tad Chef 对2010年的网站设计趋势所做的30个预测的部分依据，本文从包括Social Media（社会化媒体）, Business（商务）, Mobile（移动）, Marketing（市场营销）, Search（搜索）, SEO（搜索引擎优化）, Web Design Development（网站设计开发）, Blogging（博客）, Software（软件） 9 个方面预测了2010年Web设计和Web应用方面的发展趋势。

Social Media（社会化媒体）
与Twitter的相关的集成与应用在2009年大行其道，2010年这种潮流还将继续。
Tumblr在Twitter的的影子下继续成长，当Twitter的失宠，Tumblr或将终成气候。 最终，社会媒体将只剩下几个大玩家，Twitter，Facebook等。
社会新闻网络（Digg，Reddit），书签网络（Delicious）将过时，事实上，它们已经输给了Twitter。
社会浏览网络（StumbleUpon）已经死掉，2008年，这类网络有10多家，现在基本已衰亡，这个趋势会继续。


Business（商务）
众多用户规模没有达到一定程度的创业公司在烧完他们的钱之后死掉。
当风险投资越来越稀罕的时候，越来越多的公司需要靠收费免费结合的模式生存。
为了活下去，公司和品牌必须在2010年制定出社会媒体战略。
2010年，随着商业帐号以及数据访问方面的收费，Twitter的将开始盈利。


Mobile（移动）
某些智能手机系统因市场不够大而死掉。
苹果将丢失市场份额，虽然iPhone将辉煌依旧，但他们不能只靠一样东西永远辉煌。
感谢Google，我们将可能看到免费手机和免费通话，Google准备在真实的手机上实现Google Voice 以及 VOIP以实现真正的免费电话。

Marketing （市场营销）
在线广告领域将更加实际，随着网络的成熟，人们越来越不容易被骗。
网站上的广告将被内容营销替代。


Search（搜索）
实时搜索将变得很普遍。
为了在搜索广告市场上保持领先，Google 和 Bing将相互模仿。
搜索定制将实现完全个人化搜索。


SEO（搜索引擎优化）
搜索引擎优化将无处不在，BBC也不例外。
很多SEO专家将转为地下。
不管喜欢与否，我们会看到越来越多的jQuery的弹窗。


Web Design & Development（网站设计开发）
随着移动应用继续繁荣，为移动设备优化页面将变得很普遍。
HTML5和CSS3会为网络设计师提供更多功能，但仍会向前兼容。
对YouTube上的审查将引发一些开源视频嵌入技术与运动。
Blogging（博客）
博客越来越被接受，并成为网站的老牌媒体。
短小而清新的迷你博客（Tumblr，Posterous等）将在Twitter的一类的微博客与传统博客之间开花。
随着宽带的增长，视频将获得更大程度的重视。


Software（软件）
云计算与基于Web的软件将成气候，得到更好的发展。
Google Docs将吸引更多微软Office用户。
Google Chrome OS将至少在上网本上同微软竞争。

via: 30 Web Trends to Watch in 2010 and Web Trend
 ]]> http://www.yorsun.com/blog/article.asp?id=75 <![CDATA[DIV CSS最有可能遇到的八个面试问题]]> jackywb@126.com(yorsun) Fri,13 Nov 2009 14:24:57 +0800 http://www.yorsun.com/blog/default.asp?id=75
一、超链接访问过后hover样式就不出现的问题？

被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A

二、IE6的双倍边距BUG

例如:

<style type=”text/css”>
    body {margin:0;}
    div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;}
</style>
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
三、为什么FF下文本无法撑开容器的高度？

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

div { height:auto!important; height:200px; min-height:200px; }
四、为什么web标准中IE无法设置滚动条颜色了？

原来样式设置：

<style type=”text/css”>
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }  
</style>
解决办法是将body换成html

五、为什么无法定义1px左右高度的容器？
　　
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

六、怎么样才能让层显示在FLASH之上呢？
　　
解决的办法是给FLASH设置透明:

<a href=”http://www.easyq.net.cn/”>:</a>
<pre lang=”html” line=”1″>
<param name=”wmode” value=”transparent” />
七、怎样使一个层垂直居中于浏览器中？

<style type=”text/css”>
<!–  
div {  
position:absolute;  
top:50%;  
left:50%;  
margin:-100px 0 0 -100px;  
width:200px;  
height:200px;  
border:1px solid red;  
}  
–>
</style>
　　
这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

八、firefox嵌套div标签的居中问题的解决方法

假定有如下情况：

<div id=”a”>
       <div id=”b”> </div>
</div>
如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切 正常；但是在Firefox中b却会是居左的。
解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;。
(作者:easyq)

]]> http://www.yorsun.com/blog/article.asp?id=74 <![CDATA[CSS布局口诀]]> jackywb@126.com(yorsun) Fri,13 Nov 2009 14:24:00 +0800 http://www.yorsun.com/blog/default.asp?id=74
二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；

三、三像素文本慢移不必慌，高度设置帮你忙；

四、兼容各个浏览须注意，默认设置行高可能是杀手；

五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。

七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。

八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。

九、IE浮动双边距，请用display：inline拘。

十、列表横向排版，列表代码须紧靠，空隙自消须铭记。

注:用DW CS4出web120.org的页面。最后检测兼容性时提示

如果无法将内容放入固定宽度或固定高度的框中，则框会扩展以适应内容，而不是让内容溢出框外。

Internet Explorer 6.0

解决方法：使用 overflow:hidden;

如果无法将内容放入固定宽度或固定高度的框中，则框会扩展以适应内容，而不是让内容溢出框外。

Internet Explorer 6.0

解决方法：加上 overflow:hidden;即可

]]> http://www.yorsun.com/blog/article.asp?id=73 <![CDATA[推荐240多个jQuery插件]]> jackywb@126.com(yorsun) Sun,27 Sep 2009 11:03:52 +0800 http://www.yorsun.com/blog/default.asp?id=73
概述

jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及 的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在Kollermedia.at上发现了一篇JQuery插件列表的文章，特推荐如下。

文件上传(File upload)

Ajax File Upload.
jQUploader.
Multiple File Upload plugin. 
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.


表单验证(Form Validation)

jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV - form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.


表单－选取框(Form - Select Box stuff)

jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery - LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).


表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)

jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.


时间、日期和颜色选取(Time, Date and Color Picker)

jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.


投票插件(Rating Plugins)

jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.


搜索插件(Search Plugins)

jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MySQL).
quick Search jQuery Plugin.


编辑器(Inline Edit & Editors)

jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable - edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin - Another In-Place Editor.
TableEditor.
tEditable - in place table editing for jQuery.


多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)

jMedia - accessible multi-media embedding.
JBEdit - Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.


图片(Photos/Images/Galleries)

ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery - jqGalViewII.
jQuery - jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs - easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi - Zoomable Thumbnails.
jQuery Crop - crop any image on the fly.
Image Reflection.


Google地图（Google Map）

jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps - by Tane Piper.



游戏(Games)

Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).



表格等(Tables, Grids etc.)

UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter - awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable - in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.


统计图(Charts, Presentation etc.)

jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.



边框、圆角、背景(Border, Corners, Background)

jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.


文字和超链接(Text and Links)

jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad - a text gradient plugin.
LinkLook - a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.



鼠标提示（Tooltips）

jQuery Plugin - Tooltip.
jTip - The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.

菜单和导航(Menus, Navigations)

jQuery Tabs Plugin - awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu - Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.

http://stilbuero.de/jquery/tabs_3/


幻灯、翻转等(Accordions, Slide and Toggle stuff)

jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion - a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo - Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.


拖放插件(Drag and Drop)

UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR - drag, drop resize.
Drag Demos.



XML XSL JSON Feeds

XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier - Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite - multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.



浏览器(Browserstuff)

Wresize - IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber - removes the dotted line onfocus from links.
jQuery Perciformes - the entire suckerfish familly under one roof.
Background Iframe.
QinIE - for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.



对话框、确认窗口(Alert, Prompt, Confirm Windows)

jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.


CSS

jQuery Style Switcher.
JSS - Javascript StyleSheets.
jQuery Rule - creation/manipulation of CSS Rules.
jPrintArea.



DOM、AJAX和其它JQuery插件（DOM, Ajax and other jQuery plugins）

FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata - extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat - periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it - display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy - awesome plugin.
Effect Delay Trick.
jQuick - a quick tag creator for jQuery.
Metaobjects.
elementReady.


原文出处：http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/
 

]]> http://www.yorsun.com/blog/article.asp?id=72 <![CDATA[7行代码画出一个围棋和五子棋棋盘]]> jackywb@126.com(yorsun) Fri,03 Jul 2009 10:26:47 +0800 http://www.yorsun.com/blog/default.asp?id=72 围棋和五子棋我想大家都玩过,但是有没有人用CSS玩过呢?有!请看截图:




HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]



还有一个五子棋.供大家研究.




以下是代码,大家可以点击运行查看效果:

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

]]> http://www.yorsun.com/blog/article.asp?id=70 <![CDATA[50+Web设计工具、资源和素材]]> jackywb@126.com(yorsun) Thu,02 Jul 2009 10:03:09 +0800 http://www.yorsun.com/blog/default.asp?id=70
 

Web设计师应该有创新的能力，但同样应该能善用已有资源。本文里面收集了各种网页设计师感兴趣的Web设计工具、资源和素材，包括JavaScript和Ajax, 免费图标，免费字体，颜色工具，统计分析工具等等。

DHTML AJAX Javascript

1. RO Scripts – 提供各种类型的脚本资源
2. HOT Scripts – 不同类别的丰富脚本集合
3. DHTML Goodies – 简单美观的 DHTML 和 AJAX 脚本示例
4. DHTML Site – 极酷的实用代码收集

AJAX 框架和 JS 特效

1. moo.fx – 易用性很强的轻量级 JavaScript 特效库，基于 protoype.js 框架或 mootools 框架
2. script.aculo.us – 易于使用，跨浏览器兼容的用户界面特效，全面优化你的 Web 应用程序
3. Moo Tools – 压缩，模块化，面向对象设计的 JavaScript 框架

Web设计免费图标

1. Yellow Icon – 资历深厚的界面设计工作室，作品精美
2. Fast Icon – 提供高质量免费图标资源
3. Icon Factory – 专业商业图标设计公司
4. Icon Archive – 丰富的分类图标库
5. Icon Finder – 一个图标搜索引擎
6. Icon Kits – 现成的低价通用图标
7. Icon Buffet – 免费图标，通用图标，自定义图标设计
8. Max Power – 免费图标资源收集

Web设计颜色工具

1. Color Schemer – 适合不同层次设计人员的专业颜色搭配工具
2. Color Lovers – 提供流行的配色方案趋势
3. Color Jack – 在线配色方案生成工具
4. Daily Color Scheme – 每日配色方案参考
5. Color Blender – 在线渐变色块生成器
6. Color Scheme Designer 3 – 网页设计开发提示，技巧和工具

Web设计免费字体

1. Urban Fonts – 海量字体下载网站
2. Font Reactor – 免费字体共享服务
3. DaFont – 免费字体资源
4. Search Free Fonts – 方便的字体检索服务
5. 1001 Fonts – 超过 2000 种 TrueType 和 PostScript 字体库
6. Font Leech – 最好的免费字体收集博客

统计分析工具

1. Google Analytics – 谷歌分析，功能非常强大
2. Crazy Egg – 流量分析及网页设计可用性分析
3. Feedburner – RSS Feed 托管服务
4. reinvogorate – 提供流量追踪服务
5. W3 Counter – 免费流量统计服务
6. AW Stats – Web 日志分析工具
7. MyBlogLog – 博客数据分析服务
8. WebSideStory – 在线访问信息跟踪服务
9. Sitemeter – 老牌免费流量统计系统

其他在线Web设计资源

1. CSS Validator – W3C 的 CSS 验证服务
2. Napyfab – Ajax 加载动画效果
3. XHTML Validator W3C 的 XHTML 验证服务
4. SEO Moz – 快速获取搜索引擎优化的相关信息
5. EM Calculato – em 与 px 单位换算
6. Clean CSS - CSS 格式化与优化工具
7. CSS Type – 获得最佳屏幕呈现效果
8. Google Code Search – Google 代码搜索
9. Browser Shots – 不同浏览器环境的兼容性测试
10. Meta Tag Generator – 网页 Meta 信息生成器
11. Make Words – 提供域名注册建议
12. ROR Sitemap Generator – 强大的网站地图 (Sitemap) 生成器
13. Instant SQL Formatter – SQL 语句快速格式化
14. Font Tester – 在线字体测试服务
15. Poll Daddy – 免费创建在线投票，已被 WordPress 收购
16. Stripe Generator – Web2.0 设计者的最终工具
17. Smashing Magazine - 实用技巧，丰富的设计开发资源
18. Bittbox – 大量免费设计资源
19. Zamar – 在线文档格式转换
20. CSS Fly – 在线 CSS 编辑器

英文原稿：Dezinerfolio 翻译整理：Web 设计师工具集 | 芒果

转载自 50+Web设计工具、资源和素材 | 帕兰映像

]]> http://www.yorsun.com/blog/article.asp?id=69 <![CDATA[牛人用HTML代码画的百度LOGO!非常强悍]]> jackywb@126.com(yorsun) Thu,02 Jul 2009 09:49:03 +0800 http://www.yorsun.com/blog/default.asp?id=69 无意中在网上看到牛人用HTML画的百度的LOGO.网络之大,无奇不有啊.佩服佩服.下面是引用代码.可点击运行查看效果.




HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
]]> http://www.yorsun.com/blog/article.asp?id=68 <![CDATA[设计按钮必备-Photoshop按钮源文件大搜集(100+)]]> jackywb@126.com(yorsun) Tue,26 May 2009 09:55:21 +0800 http://www.yorsun.com/blog/default.asp?id=68
按钮（button)是网页中实现人机交互的关键功能之一，如果缺少了按钮，那么互动将无从谈起。
设计一个漂亮，吸引人的按钮并不容易，特别是对于Photoshop新手来说。
今天看到eddie从deviantart为大家搜集了这12个Photoshop的按钮源文件，转过来和大家分享。利用这些源文件，再加上自己需要的文字，就可以轻松设计制作属于你自己的按钮。同时我们也可以从这些PSD文件中学习到制作按钮的技巧，提升自己的Photoshop技术。

#1-9个炫彩按钮


下载链接

#2-7个下载按钮


下载链接

#3-windows 7 风格按钮


下载链接

#4-3个web风格按钮


下载链接

#5-10个质感按钮


下载链接

#6-苹果mac风格水晶按钮


下载链接

#7-金银铜质感按钮


下载链接

#8-彩色banner-1


下载链接

#9-彩色banner-2


下载链接

#10 金属质感banner


下载链接

#11-10个水彩风格按钮


下载链接

#12-30个各色风格按钮


下载链接

]]> http://www.yorsun.com/blog/article.asp?id=67 <![CDATA[弹性+固宽布局 ]]> jackywb@126.com(yorsun) Fri,15 May 2009 09:44:53 +0800 http://www.yorsun.com/blog/default.asp?id=67
当然为了减少这种屏幕的浪费，采用弹性流体布局是最好的解决方案，它可以充分利用屏幕空间，无论你是多大分辩率的用户，都能尽情满屏展示内容。然而因为种种限制，目前的网页完全采用流体弹性布局条件还不具备(特别是浏览器厂商对标准的肆意蹂躏以及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时只显示了一小块，而正文内容始终居中显示的。

为了演示效果，我们加入一些其它颜色调置，最后的样式如下所示：

程序代码 程序代码
*{margin:0;padding:0;}
html, body, #wrapper {height: 100%;font-size:12px;}
#wrapper{width:100%;background:#777;}
body > #wrapper {height:auto; min-height:100%;}
#main {padding-bottom: 54px;min-width:960px;}/* 必须使用和footer相同的高度,最小宽度ie6中加JS解决 */
#header{text-align:center;color:#fff;background:#333;}
#inheader{width:960px;height:110px;line-height:110px;margin:0 auto;background:#CC9933;}
h3{font-size:14px;line-height:50px;}
#inheader p{font-size:12px;line-height:30px;}
#footer {
    position: relative;
    margin-top: -54px; /* footer高度的负值 */
    height: 54px;/* footer高度*/    
    width:100%;
    min-width:960px;/*最小宽度ie6中加JS解决*/
    clear:both;
    background:#666;
    text-align:center;
    color:#fff;
}
#infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;}
#footer p{line-height:26px;}
#content{background:#999;width:960px;margin:0 auto;height:692px;}
#content p{line-height:30px;padding:0 30px;color:#fff;}
/*说明: 需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。下面是著名的万能float闭合Clearfix Hack*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */    


测试demo：

运行代码框

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
]]>