CSSrainbow.cn » General

CSSrainbow.cn 一周岁了，成长中 …

Rainbow — Tue, 06 Apr 2010 01:25:16 +0000

CSSrainbow.cn — 关注WEB前端技术；重视WEB标准。

分享(X)HTML,CSS,JavaScript,MooTools,jQuery,PHP,ASP,Java,Python and ∞.

一周岁了，它记录了一个人的成长，WEB世界的大变化。

2010 , 是一个充满希望的一年，在好的大环境下，该调整一下自己的思路了，毕竟它决定着我的出路。

成长，爱情。。。。。。

是我想要的，哈哈，开始工作了。。。。。

希望与热爱WEB前端技术的同仁成为朋友。多多交流，多多鼓励，共同成长。

搞笑漫画图解几大浏览器的区别

Rainbow — Thu, 18 Mar 2010 02:46:41 +0000

Internet Explorer, Firefox, Google Chrome, Opera 和 Safari之间的到底有啥区别，

下面这几幅搞笑漫画或许能说明什么…

Internet Explorer：没什么用，偶尔还真能派上用场…

Firefox：坦白地说似乎面面俱到，但因为那些傻了吧唧的扩展它就真的无可用处了

Safari：非常的高效，但那些使用Safari的人总对其质量夸大其词

Chrome：就是一个“快”字

Opera：有些人非常喜欢，但大多数人认为Opera很2…

图解JSON语法五大要素

Rainbow — Sun, 28 Feb 2010 02:51:45 +0000

JSON语法开发内容包括：更容易的设计集成、扩充的部署选项、更为丰富多彩的登录和个性化服务以及更好的数据访问和同步，还可以使用 json_encode() 使来自 PHP 数据库连接的数据可用于 Ajax 应用程序。

JSON建构于两种结构：

1.“名称/值”对的集合。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hashtable），有键列表（keyedlist），或者关联数组（associativearray）。

2.值的有序列表。在大部分语言中，它被理解为数组（array）。这些都是常见的数据结构。JSON形式事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON语法：

JSON的语法很简单，就是使用大括号’{}’，中括号’[]‘，逗号’，’，冒号’：’，双引号’“”’。数据类型：嵌套对象、数组、字符串、数字、布尔值或空值。

1）对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

例：{"name":"张三","age":20,"birthday":"1982-07-20"}
这是对象在json中的表示形式.即｛"key1":"value1","key2":"value2",…｝

2）数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

例：［"张三","李四","王五"］这是数组在json中的表示形式.即［value1,value2,value3,….］

3）JSON语法可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

4）字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。字符串（string）与C或者Java的字符串非常相似。

5）JSON语法也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。

注：你只要记住前两种形式就可以了。
注意：key一定要用引号，而value如果是字符串，也一定要用引号引起来。切记，有的系统中，只当双引号是有效的，而不认单引号。所以建议用双引号。

Internet Explorer 6 的盛衰史

Rainbow — Sat, 27 Feb 2010 15:13:41 +0000

近年来，Internet Explorer 6 从网页设计师的至爱浏览器变成了烫手的山芋。安全问题，JavaScript的错误和令人费解的CSS怪异呈现让它成为了很多笑话首当其冲的话题。随着 IE6进入它的没落时代，以及像Google这样大公司支持力度的下降，是时候充分的回顾一下我们的这个老对手了。本文我们将要审视Internet Explorer 6的过去，并且分析多年来其形象改变的原因。你可以在此看到大尺寸版本的漫画。

是否需要在Internet Explorer
6中审核我们的项目？我们能否不支持IE6？如果不能，我们应该如何处理这些仍在使用IE6的用户需求？如果可以不支持，我们如何鼓励IE6的用户升级？
或者说我们如何才能说服那些不让员工升级旧浏览器的老板？你的想法是怎样的？我们期待你在本文后的评论发表意见！

漫画：混乱的标记语言XHTML2/HTML5

Rainbow — Tue, 15 Sep 2009 01:18:17 +0000

漫画：混乱的标记语言XHTML2/HTML5

W3C最近宣布将于今年年底解散XTHML2工作组。一石激起千层浪，很多误解和谣言四起，江湖一片血雨腥风，搞得网页设计师人人自危，好像世界末日即将到来。其实，这只是个误解，看完下面的这幅漫画，大家就了解了。完全可以放心，然后回家洗洗睡了。

英文版源文地址：漫画英文版源文地址，这里是英文原版漫画

转自：Yes! B/S !

点击下方图片或者混乱的标记语言漫画链接，可以打开更大、更清晰的大图，看起来会更爽哦。

混乱的标记语言XHTML2/HTML5漫画

漫画中提到两个链接地址：

漫画中提到的链接1: An Unofficial Q&A about the Discontinuation of the XHTML2 WG
漫画中提到的链接2: In defense of web developers

FireBug 控制台指令

Rainbow — Fri, 04 Sep 2009 01:06:23 +0000

FireBug 是一个非常实用的JavaScript以及DOM查看调试工具，是 Firefox 的一个插件。

使用 FireBug 调试 AJAX 应用非常方便，终于可以告别 alert 时代了！
Console Logging 函数FireBug 为所有 Web 页面提供了一个 console 对象。

接下来我们就学习一下这个对象所包含的函数：

Logging 基础

console.log("message" [,objects]) – 将一个字符串打印到控制台。

字符串可以包含任何“String Formatting”小节描述的模式。

字符串后面的对象应该用来取代之前字符串中的模式。（译者注：大家用过C里面 printf 吧，效果基本是一样的。）

Logging 等级通常根据不同的等级来区分Logging的严重程度是很有帮助的。

FireBug 提供了4个等级。

为了达到视觉分离的效果，这些函数与 log 不同的地方就是它们在被调用的时候会自动包含一个指向代码行数的链接。

console.debug("message" [,objects]) – 记录一个 debug 消息。

console.info("message" [,objects]) – 记录一个信息.

console.warn("message" [,objects]) – 记录一个警告.

console.error("message" [,objects]) – 记录一个错误.

断言断言是一条确保代码规则的非常好的途径.

console 对象包含了一系列各种类型的断言函数，并且允许你编写自己的断言函数。

console.assert(a, "message" [,objects]) – Asserts that an a is true.

console.assertEquals(a, b, "message" [,objects]) – Asserts that a is equal to b.

console.assertNotEquals(a, b, "message" [,objects]) – Asserts that a is not equal to b.

console.assertGreater(a, b, "message" [,objects]) – Asserts that a is greater than b.

console.assertNotGreater(a, b, "message" [,objects]) – Asserts that a is not greater than b.

console.assertLess(a, b, "message" [,objects]) – Asserts that a is less than b.

console.assertNotLess(a, b, "message" [,objects]) – Asserts that a is not less than b.

console.assertContains(a, b, "message" [,objects]) – Asserts that a is in the array b.

console.assertNotContains(a, b, "message" [,objects]) – Asserts that a is not in the array b.

console.assertTrue(a, "message" [,objects]) – Asserts that a is equal to true.

console.assertFalse(a, "message" [,objects]) – Asserts that a is equal to false.

console.assertNull(a, "message" [,objects]) – Asserts that a is equal to null.

console.assertNotNull(a, "message" [,objects]) – Asserts that a is not equal to null.

console.assertUndefined(a, "message" [,objects]) – Asserts that a is equal to undefined.

console.assertNotUndefined(a, "message" [,objects]) – Asserts that a is not equal to undefined.

console.assertInstanceOf(a, b, "message" [,objects]) – Asserts that a is an instance of type b.

console.assertNotInstanceOf(a, b, "message" [,objects]) – Asserts that a is not an instance of type b.

console.assertTypeOf(a, b, "message" [,objects]) – Asserts that the type of a is equal to the string b.

console.assertNotTypeOf(a, b, "message" [,objects]) – Asserts that the type of a is not equal to the string b.

测量（Measurement）下面的一些函数可以让你方便的测量你的一些代码。

console.trace() – 记录执行点的堆栈信息。

console.time("name") – 根据 name 创建一个唯一的计时器。

console.timeEnd("name") – 根据 name 停止计时器，并且记录消耗的时间，以毫秒为单位。

console.count("name") – 记录该行代码执行的次数。

字符串格式化所有 console 的 logging 函数都可以通过以下模式格式化字符串：

%s – 将对象格式化为字符串。

%d, %i, %l, %f – 将对象格式化为数字。

%o – 将对象格式化成一个指向 inspector 的超链接。

%1.o, %2.0, etc.. – 将对象格式化成包含自己属性的可交互的表格。

%.o – 将对象格式化成具有自身属性的一个数组。

%x – 将对象格式化成一个可交互的 XML 树形结构。

%1.x, %2.x, etc.. – 将对象格式化成一个可交互的 XML 数型结构，并且展开 n 层节点。

如果你需要一个真实的 % 符号，你可以通过一个转移符号就像这样 "\%"。

命令行函数内建的命令行函数可以通过以下命令行使用：

$("id") – document.getElementById() 的简写。（译者注：跟 prototype.js 学来的吧？）

$$("css") – 返回一个符合 CSS 选择器的元素数组。

$x("xpath") – 返回一个符合 XPath 选择器的元素数组。

$0 – 返回最近被检查（inspected）的对象。

$1 – 返回最近被检查（inspected）的下一个对象。

$n(5) – 返回最近被检查的第n个对象。

inspect(object) – 将对象显示在 Inspector 中。

dir(object) – 返回一个对象的属性名数组。（译者注：跟 Python 学的？）

clear() – 清除控制台信息。

文章来源：爱在戏院前

原文链接地址：http://www.nearking.com/article.asp?id=11

Web前端开发需要掌握的技能(图解)

Rainbow — Wed, 19 Aug 2009 02:46:02 +0000

查看原图

原图来自：http://space.cnblogs.com/raozou/

菊花香

Rainbow — Sat, 01 Aug 2009 11:29:17 +0000

菊花香

也许，你闻见一个女子带着菊花香，就决定去爱她一生；也许，你随意地挑选出一首老歌，来倾述你的心声；也许，你会在树干上镌刻爱人的名字，让爱情生长；也许，你在生命的最后时刻，踩着沙沙作响的银杏叶子跳一支舞；也许，你亲手去做陶器，让幸福成为永恒的艺术–这些就是散发着菊花香的故事。

菊花香主题歌《熙载》

阳光为我们而照耀，风使我们相拥而抱

季节在我们的笑声中来来往往

顺着风中飘舞的发丝，飘来的你的香气

你那美丽的眼睛和笑容都被我所拥有

这种爱、这幸福都觉得是那么容易拥有

但这情景、这祝福不应该这么容易让我享受

来不及擦掉眼泪，擦掉痛苦的我

真的,如果哭泣，就像是我把你给送走在离开的那瞬间，你是否还在担心我

在什么也不能为你做的，我痛苦心灵面前

虽然你说曾离开我，但我从来没有让你走

你依然是让我生存下去的力量

这种爱、这幸福都觉得是那么容易拥有
但这情景、这祝福不应该这么容易让我享受

来不及擦掉眼泪，擦掉痛苦的我

真的,因为哭泣像是我把你给送走

在离开的那瞬间，是否还在为我担心

在什么也不能为你做的，我痛苦心灵面前

虽然你说会离开我，但我从来没让你走

我将用等待来重新开始

请你不要忘记我们是多么的相爱，多么的更加相爱

一瞬间也不要忘记

请在那离去的地方，在回忆中等着我

请不要将我遗忘

因为我是毫无怨言走向你

固定(Fixed) vs. 流动(Fluid) vs. 弹性(Elastic)：哪种布局更适合你？

Rainbow — Wed, 15 Jul 2009 01:01:32 +0000

固定(Fixed) vs. 流动(Fluid) vs. 弹性(Elastic)：哪种布局更适合你？

有一个问题已经困扰网页设计师们很久了：该使用固定、流动、弹性，还是混合布局呢？它们各有优缺点。最终的决定取决于网站的可用性，单用某一种布局就想达到目的，可能没那么容易。那么，既然如此令人困惑，是否有做出正确决定的诀窍呢？考虑好几个问题，恰当地设定目标结果，你也能做出融合各方优点的成功布局设计。

本文将讨论每种布局方案的利与弊。其实，只要你时刻注意可用性，每种方案都能实现成功的网站布局。

您也可以参考一下我们以前的文章：

Flexible Layouts: Challenge For The Future
讨论弹性布局对未来的挑战
Applying Divine Proportion To Your Web Designs
阐述如何将神圣比例（divine proportion）运用到固定布局中

为什么要争论这些？网页设计受可用性的大棒指引，而由于网站用户的多样性，已经很难做出对不同用户都有足够可用性的网站。

当设计的网站会面向众多用户时，设计师必须考虑访客之间的下列潜在差异：

屏幕分辨率
用的哪款浏览器
浏览窗口是否最大化
是否启用占位置的浏览器的额外组件（如历史、书签、Google工具栏等等）
乃至操作系统和硬件情况

由于并无标准规定网页大小，网页设计师工作时就需要解决不计其数的问题。

1. 固定布局和流动布局的差异

尽管大部分设计师和开发者都对固定和流动网页布局有基本的了解，我们还是简单明确一下概念。

固定网页布局

固定网页布局指网站内容被一个固定宽度的容器包裹，容器内的区块都有固定的百分比或者像素宽度值。最重要的一点——容器是不能移动的。不管屏幕分辨率如何变化，访客看到的都是固定宽度的内容。

上图显示了固定宽度网页布局大体上的实现方式。内部组件被分别设定为固定的520、200、200像素宽。960像素宽度已经成了现代网页设计的一项标准，因为大多数用户的屏幕分辨率都在1024×768及以上。

流动网页布局

流动网页布局，也称为流体网页布局，其实现方法则是大多数组件（包括主容器）都设成百分比宽度，并且根据用户的屏幕分辨率自适应。

上图展示了一个流动网页布局。尽管大多数设计师会给流动布局内某些特定元素（如外边距和内留白）以固定宽度，整个布局大体上还是使用百分比宽度，并根据用户不同而自动调整实际宽度。

2. 固定布局的网页设计

很多设计师都更喜欢固定布局，因为他们觉得固定的比较保险：设计师看到什么，用户看到的就是什么。不过，说到其利与弊，则同流动布局一样让人揪心。

利

固定宽度布局的设计更简便，更容易自定义。
任意浏览器下的显示宽度都一样，对于图像、表单、视频等宽度固定的内容，潜在的冲突更少。
不用设定min-width（最小宽度）和max-width（最大宽度），这两个属性并不被所有浏览器支持。
即使网页被设计成兼容最小屏幕分辨率800×600的大小，在大分辨率显示器下，内容仍然足够易读。

弊

固定宽度的布局可能会给高分辨率屏幕用户带来巨大的页面空白，从而破坏“神圣比例”、“三分割法则”、整体平衡，乃至其他设计原则。
小屏幕上可能会出现水平滚动条，影响用户体验。
无缝材质拼图，纹样和其他连续图像需要针对大分辨率做出优化。
总体来说，固定宽度的可用性更低。

固定布局的设计实例

下列五个网页的设计师都充分利用了固定布局网页的特征。这些网站无不融合了大量设计元素，利用固定布局创建出完美的场景。在固定宽度的助益下，设计师方能更好地控制站点内容周边额外的设计元素，从而更为精准地调节内容和导航的宽度。

请特别注意设计师们是如何针对宽屏幕设计连续图像的（不妨把你的屏幕分辨率调高一点试试）。

3. 规避固定布局的坏处

如果你已经决定要用固定布局，下面这些小技巧你可就不得不知。它们帮你弱化固定布局的坏影响，助你做出成功的设计。

译注：下面这段有凑字数赚稿费之嫌，点此跳过这段。

先看下统计数据

现在大部分设计师都是假定大部分互联网用户都使用的1024×768或更高的分辨率。 W3Schools公布的一份投票结果显示，事实并非如此（请注意W3Schools的数据并不能完全相信，后面会有详细解释）：

如您所见， 640×480 甚至不够格在这张表上出现。W3Schools的数据表明这个分辨率似乎已经完全被用户抛弃了。而事实上，确实还有用户在使用这个分辨率，只不过用户数量太少，设计师完全把他们忽略掉，去做一些更合适、对较高分辨率有更佳可用性的设计。

即使对于使用这种分辨率的用户来说，他们也可能只是在一些方便携带的小型电脑商使用，并不是他们平常使用的主要屏幕分辨率。

不过，这里的统计数据可能也没有大家期待的那么准确。因为W3Schools的访客基本上都是一个特定群体（设计师和网页开发者），结果会和普通公众有点偏差。不过，其他调查也都大同小异。根据一些独立公司在2009年的调查显示，800×600的分辨率使用者比例在10%以下。（译注：根据笨活儿的网站统计数据，这个数值在2%以下）

下面这张有趣的表格来自SohTanaka.com，他们研究了一些大型网站对屏幕分辨率的兼容情况：

调查中涉及到的所有网站，最终都完成了华丽大变身。即使是最大的互联网公司，也都确定他们的主要受众是拥有较大屏幕分辨率的用户。

关于屏幕分辨率的其他研究，您还可以参考下面的资源：

960px 还是 760px?

综上所述，大多数设计师都是要么选择960，要么选择760作为总的像素宽度。前者更适合1024×768以及更高分辨率的屏幕，还能有一点留白。后者则是800×600分辨率下的最佳显示宽度，设置成这一宽度能够照顾到那10%，而较大屏幕上看起来也还不赖。

总是将布局整体居中对齐

如果要使用固定宽度设计，务必保证主容器居中对齐，以保持平衡（一般利用margin: 0 auto;就可以了）。不然，遇上宽屏用户，你的内容就会被挤到某个角落，很不好看。

4. 流动页面布局

设计师有很多理由不使用流动布局，不过大家很多时候也看不到流动布局的好。下面列出有运用流动布局时的打算时需要考虑的利与弊：

利

流动网页布局拥有更强的亲和力，因为它能根据客户端的情况自适应。
在不同浏览器和屏幕分辨率下的额外空白量都差不多，更符合视觉吸引力要求。
如果设计得当，流动布局能避免在小屏幕上的水平滚动条。

弊

设计师对客户端的显示效果更难以控制，由于他们使用特定大小的屏幕，也更不容易发现潜在问题。
图片、视频以及其他拥有固定宽度的内容不得不被设置上不同宽度，以配合不同的屏幕分辨率。
对于特别大的显示屏，内容不够多的话就会造成过量空白，破坏美感。

流动布局的实例

下面两例都使用了百分比宽度来适应不同屏幕分辨率。第一个例子通过调整内容区块的宽度来适应，第二个例子则调整空白区域大小。

5. 设计适用的流动网页布局

尽管流动布局会带来某些问题，但这些问题其实能通过一点小把戏解决。

采用简单设计

应用到流动网页布局的图案和复杂技巧越少，其建立和维护也就越容易。同时也能更方便地适应不同屏幕分辨率。有了更加精炼的代码和设计，就能更好得避免、发现和解决兼容问题。

以Smashing Magazine为例，他们就采用了流动布局。设计非常简单，只有顶部的黑色+橘色导航条是延伸开的，各内容区域的宽度会根据情况有一定的改变。利用CSS兼容了所有可能的情形，杜绝了侧边栏和内部内容发生错位。

最小宽度(min-width)和最大宽度(max-width)

这两个CSS属性，min-width 和 max-width，可以用来为过大或过小屏幕的用户指定一个固定宽度。屏幕过小的时候，内容区块固定成指定宽度，屏幕下方也出现一个水平滚动条；屏幕过大的时候，内容也固定到最大宽度，以免延展得太开，影响文字的可读性。更多细节请参考：

不幸的是，大多数版本的IE浏览器都不支持这两个属性值。这一问题可以通过IE特有的expression来解决：Maximum and Minimum Height and Width in Internet Explorer（另：中文参考）。

6. 弹性设计

其实设计网页布局时还有第三种选择。部分设计师更喜欢采用糅合了两种主要布局类型特点的所谓“弹性布局(elastic layout)”。其要点就在于使用单位em来定义元素宽度。下面的引言介绍了何谓em，而它又是如何发挥作用的：

“电脑屏幕上的‘像素’是一个不可缩放的点，而em则是相对于字体大小的单位宽度。它随着字体大小的变化而变化，反应用户对字体大小的设定。”
– Patrick Griffiths, A List Apart

尽管弹性设计貌似会带来很多好处，它仍然像前两种布局一样有利有弊。

利

如果合理运用，这种布局设计能带来非常友好的用户界面。目标效果是所有东西都能根据用户的偏好增大或缩小尺寸。
弹性布局更适合面对流动和固定布局难以抉择的设计师，因为二者的优点弹性布局都有。

弊

尽管第一条“利”说得没错，弹性布局还是为可用性埋下了很多地雷。得需要十分的聪明才智和不断测试才能让布局适合所有用户。
这种布局比前述两种要难实现得多，可能那一小点的可用性并不值得你花这么多功夫。
由于这种布局的特殊性，有些弹性布局设计可能需要额外的样式表，并针对IE6做些特别的调整

弹性布局的实例

弹性布局的流动布局表面上看起来十分相似，因为大部分时候大家都把它们混淆了。其根本区别在于，弹性布局的长宽单位是em，而流动布局使用百分比，并且弹性布局的尺寸主要根据字体大小而变化。这类设计根据用户浏览器中的字体大小来做出自适应。

7. 哪一种布局更适合你？

选择何种布局应该由网站的性质决定。权衡上述利弊，根据你的网站需求找到合适的解决方案

以作品集网站为例，这种网站可能固定宽度布局最为适用。这样你就能做出更有设计感的东西。你不仅能更好地控制设计中的单个元素，作品的图像展示也变得更易处理。对很多设计师来说（包括那些非作品集站点的设计师），固定布局就是一个既容易相处，又能给人安全感的好朋友。

而那些要追求100%的兼容性的设计师最好就考虑一下花点时间在流动布局上。最大的挑战不在于宽屏上的可能出现的过多留白，而是那一小撮小屏幕上的显示效果。对于有大量用户的网站来说，百分比很小的用户群，绝对数目也相当可观。就算不考虑这点，大网站也应该有简洁干练的设计感，而这可以利用流动布局高效率地实现。

还是做不了决定？别担心，还有弹性或部分弹性的布局设计可供选择。如果运用得当，弹性布局能完全整合两大主要布局的优点。聪明的设计师懂得如何利用弹性设计的原则，在字体和容器大小上使用em单位，然后混合运用百分比和像素宽度来设定其他布局元素。

其他设计师怎么说

Heidi Cool 在帖子 Fixed vs. Liquid vs. Elastic Layout 上的回复

这位设计师的发言针对与他人合作运用布局的情况，而这些人可能对网页设计了解得并不多：

“我反复思考过这一问题。在case.edu上我们最终采用了固定布局，因为：

流动布局更复杂，我们为那些有不同技能的用户提供了模板化的设计，而他们的工作非常容易破坏流动布局（模板只是一些普通的HTML文件，并不是Dreamweaver模板）。

我们不想看到网站维护者们做出太宽的页面——那种文本行很长，非常难以阅读的页面。

我们想限制那些总是想填满所有空白的人所面对的空白量。如果他们用的是大屏幕显示器，就很容易把页面填满，而忽略了在小屏幕上其显示效果是多么糟糕。

大家都看得出来，最主要的问题还是集中在我们的网站是由拥有不同技能水平的人所维护、构建、增删内容这一事实上。如果是我一个人做网站，写代码的时候我可能就会更多地根据目标、内容等等来做决定。”

madr 在 Where Have All the Flexible Designs Gone? 上的回复

他提出了固定宽度布局的另外两个优点：

“barner和广告通常都是用图像和Flash来实现的，这些内容让弹性或灵活的布局更难制作。我曾在newspaper world工作过一年半，广告给区块真的特别难伺候。文章配图也是，如果用上弹性布局，阅读区就可能变得过大，相对顶部图片而言。

除了Safari 3及以下（Safari 4马上就要来了[笨活儿:已经来了…]）、Firefox 2及以下、IE6及以下（马上就要被淘汰了…）的所有浏览器都支持了按照页面整张缩放，而不是只缩放字体。这种情况让设计灵活的弹性布局显得更无实用性，大部分用户甚至都注意不到你的一片好心。”

jphilapy 在 Where Have All the Flexible Designs Gone?? 上的回复

流动布局的两个值得支持的地方：

“流动布局的网站可以适应很多分辨率。这样你就不用去调查讨论用户的屏幕大小。况且，屏幕分辨率的统计数据始终是个谜；几乎没人在全屏模式运行浏览器，然后还有很多工具栏、边栏、小工具之类的东西，造成了不计取数的屏幕状况。

移动电话（就说iPhone吧），游戏机等也渐渐成为网页浏览器家族的一大成员。总之，这类设备的屏幕分辨率都很小，能够从灵活的网页布局设计中获益。

Calrion 在 About Fluid- and Fixed-Width Layouts 上的回复

明确说明了运用弹性布局的情况：

“我觉得‘弹性’布局是最佳选择。某种程度上是流动的，但又有固定宽度来保证文本行不会变的过长。

我是Windows用户，一般情况下都最大化窗口。

之所以要最大化，是因为这样我能更好的关注我正在使用的应用程序。要知道我桌面上总是有很多东西。另外，最大化我的浏览器（Firefox）能给界面元素提供最多空间，尤其是书签工具栏和标签卡区域。

说到可用性，流动布局对有经验的用户可能最好用了。因为他们会主动控制浏览窗口尺寸。对于经验较少的用户，弹性布局可能最好用，因为它能自发的阻止自己变得过分宽大。

Georg 在 About Fluid- and Fixed-Width Layouts 的回复

为什么混合运用三种布局能获得最佳结果：

“我更喜欢主区域流动，侧边栏固定，（也可以）再加一点弹性部分。我也总是为文本区设定600像素的最大宽度。

使用min/max来设定整个页面，宽度保持在600至1200像素之间，并且居中对齐。

在600到2400宽度的屏幕上全面测试，其他宽度就等用户自己解决吧。文本行从不会太宽（600就是最大宽度了），页面也不会在挤压下过早错位。

我收获的大部分反馈是，用户几乎没注意到有什么东西让他们困惑。网页很易读。说明我的做法是一项有用的妥协。

你的站在我这儿看起来不错，所以我觉得它是有用的妥协。我年迈的双眼觉得文字实在太小了，那我就在1280宽屏上的Opera里把页面放大至120%。始终不会有问题。”

来源：

英文原文：Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

译文原文：固定 vs. 流动 vs. 弹性：哪种布局更适合你？

译后感：老外废话真多啊。严重怀疑他在凑字数赚稿费！唉呀妈呀，怎么没人按字数给我稿费！

低调做人高调做事

Rainbow — Fri, 10 Jul 2009 02:19:20 +0000

低调做人高调做事

一、在姿态上要低调

在低调中修炼自己：低调做人无论在官场、商场还是政治军事斗争中都是一种进可攻、退可守，看似平淡，实则高深的处世谋略。

谦卑处世人常在：谦卑是一种智慧，是为人处世的黄金法则，懂得谦卑的人，必将得到人们的尊重，受到世人的敬仰。

大智若愚，实乃养晦之术：“大智若愚”，重在一个“若”字，“若”设计了巨大的假象与骗局，掩饰了真实的野心、权欲、才华、声望、感情。这种甘为愚钝、甘当弱者的低调做人术，实际上是精于算计的隐蔽，它鼓励人们不求争先、不露真相，让自己明明白白过一生。

平和待人留余地：“道有道法，行有行规”，做人也不例外，用平和的心态去对待人事事，也是符合客观要求的，因为低调做人才是跨进成功之门的钥匙。

时机未成熟时，要挺住：人非圣贤，谁都无法甩掉七情六欲，离不开柴米油盐，即使遁入空门，“跳出三界外，不在五行中”，也要“出家人以宽大为怀，善哉！善哉！”不离口。所以，要成就大业，就得分清轻重缓急，大小远近，该舍的就得忍痛割爱，该忍的就得从长计议，从而实现理想，成就大事，创建大业。

毛羽不丰时，要懂得让步：低调做人，往往是赢取对手的资助、最后不断走向强盛、伸展势力再反过来使对手屈服的一条有用的妙计。

在“愚”中等待时机：大智若愚，不仅可以将有为示无为，聪明装糊涂，而且可以若无其事，装着不置可否的样子，不表明态度，然后静待时机，把自己的过人之处一下子说出来，打对手一个措手不及。但是，大智若愚，关键是心中要有对付对方的策略。常用“糊涂”来迷惑对方耳目，宁可有为而示无为，万不可无为示有为，本来糊涂反装聪明，这样就会弄巧成拙。

主动吃亏是风度：任何时候，情分不能践踏。主动吃亏，山不转水转，也许以后还有合作的机会，又走到一起。若一个人处处不肯吃亏，则处处必想占便宜，于是，妄想日生，骄心日盛。而一个人一旦有了骄狂的态势，难免会侵害别人的利益，于是便起纷争，在四面楚歌之中，又焉有不败之理？

为对手叫好是一种智慧：美德、智慧、修养，是我们处世的资本。为对手叫好，是一种谋略，能做到放低姿态为对手叫好的人，那他在做人做事上必定会成功。
以宽容之心度他人之过：退一步海阔天空,忍一时风平浪静。对于别人的过失，必要的指责无可厚非，但能以博大的胸怀去宽容别人，就会让世界变得更精彩。

二、在心态上要低调

功成名就更要保持平常心：高调做事是一种责任，一种气魄，一种精益求精的风格，一种执著追求的精神。所做的哪怕是细小的事、单调的事，也要代表自己的最高水平，体现自己的最好风格，并在做事中提高素质与能力。

做人不要恃才傲物：当你取得成绩时，你要感谢他人、与人分享、为人谦卑，这正好让他人吃下了一颗定心丸。如果你习惯了恃才傲物，看不起别人，那么总有一天你会独吞苦果！请记住：恃才傲物是做人一大忌。

容人之过，方显大家本色：大度睿智的低调做人，有时比横眉冷对的高高在上更有助于问题的解决。对他人的小过以大度相待，实际上也是一种低调做人的态度，这种态度会使人没齿难忘，终生感激。

做人要圆融通达，不要锋芒毕露：功成名就需要一种谦逊的态度，自觉地在名利场中做看客，开拓广阔心境。

知足者常乐：生活中如能降低一些标准，退一步想一想，就能知足常乐。人应该体会到自己本来就是无所欠缺的，这就是最大的财富了。

不要太把自己当回事：不要把自己太当回事，才不会产生自满心理，才能不断地充实、完善自己，缔造完善人生。

谦逊是终生受益的美德：一个懂得谦逊的人是一个真正懂得积蓄力量的人，谦逊能够避免给别人造成太张扬的印象，这样的印象恰好能够使一个员工在生活、工作中不断积累经验与能力，最后达到成功。

淡泊名利无私奉献：性格豪放者心胸必然豁达，壮志无边者思想必然激越，思想激越者必然容易触怒世俗和所谓的权威。所以，社会要求成大事者能够隐忍不发，高调做事，低调做人。

对待下属要宽容：作为上司，应该具有容人之量，既然把任务交代给了下属，就要充分想念下属，让其有施展才能的机会，只有这样，才能人尽其才。

简朴是低调做人的根本：在生活上简朴些、低调些，不仅有助于自身的品德修炼，而且也能赢得上下的交口称誉。

三、在行为上要低调

深藏不露，是智谋：过分的张扬自己，就会经受更多的风吹雨打，暴露在外的椽子自然要先腐烂。一个人在社会上，如果不合时宜地过分张扬、卖弄，那么不管多么优秀，都难免会遭到明枪暗箭的打击和攻击。

出头的椽子易烂：时常有人稍有名气就到处洋洋得意地自夸，喜欢被别人奉承，这些人迟早会吃亏的。所以在处于被动境地时一定要学会藏锋敛迹、装憨卖乖，千万不要把自己变成对方射击的靶子。

才大不可气粗，居功不可自傲：不可一世的年羹尧，因为在做人上的无知而落得个可悲的下场，所以，才大而不气粗，居功而不自傲，才是做人的根本。

盛名之下，其实难副：在积极求取巅峰期的时候，不妨思及颜之推倡导的人生态度，试图明了知足常乐的情趣，捕捉中庸之道的精义，稍稍使生活步调快慢均衡，才不易陷入过度偏激的生活陷阱之中。

做人不能太精明：低调做人，不耍小聪明，让自己始终处于冷静的状态，在“低调”的心态支配下，兢兢业业，才能做成大事业。

乐不可极，乐极生悲：在生活悲欢离合、喜怒哀乐的起承转合过程中，人应随时随地、恰如其分地选择适合自己的位置，起点不要太高。正如孟子所说的：“可以仕则仕，可以止则止，可以久则久，可以速则速。”

做人要懂得谦逊：谦逊能够克服骄矜之态，能够营造良好的人际关系，因为人们所尊敬的是那些谦逊的人，而决不会是那些爱慕虚荣和自夸的人。

规避风头，才能走好人生路：老子认为“兵强则灭，木强则折”、“强梁者不得其死”。老子这种与世无争的谋略思想，深刻体现了事物的内在运动规律，已为无数事实所证明，成为广泛流传的哲理名言。

低调做人，便可峰回路转：在待人处世中要低调，当自己处于不利地位，或者危险之时，不妨先退让一步，这样做，不但能避其锋芒，脱离困境，而且还可以另辟蹊径，重新占据主动。

要想先做事，必须先做人：要想先做事，必须先做人。做好了人，才能做事。做人要低调谦虚，做事要高调有信心，事情做好了，低调做人水平就又上了一个台阶。

功成身退，天之道：懂得功成身退的人，是识时务的，他知道何时保全自己，何时成就别人，以儒雅之风度来笑对人生。

四、在言辞上要低调

不要揭人伤疤：不能拿朋友的缺点开玩笑。不要以为你很熟悉对方，就随意取笑对方的缺点，揭人伤疤。那样就会伤及对方的人格、尊严，违背开玩笑的初衷。

放低说话的姿态：面对别人的赞许恭贺，应谦和有礼、虚心，这样才能显示出自己的君子风度，淡化别人对你的嫉妒心理，维持和谐良好的人际关系。

说话时不可伤害他人自尊：讲话要有分寸，不要伤害他人。礼让不是人际关系上的怯懦，而是把无谓的攻击降到零。

得意而不要忘形：得意时要少说话，而且态度要更加谦卑，这样才会赢得朋友们的尊敬。

祸从口出，没必要自惹麻烦：要想在办公室中保持心情舒畅的工作，并与领导关系融洽，那就多注意你的言行。对于姿态上低调、工作上踏实的人，上司们更愿意起用他们。如果你幸运的话，还很可能被上司意外地委以重任。

莫逞一时口头之快：凡事三思而行，说话也不例外，在开口说话之前也要思考，确定不会伤害他人再说出口，才能起到一言九鼎的作用，你也才能受到别人的尊重和认可。

口出狂言者祸必至：是不是因为物欲文明的催生所致，如今社会上各类职业当中都有动辄口出狂言的人。

耻笑讥讽来不得：言为心声，语言受思想的支配，反应一个人的品德。不负责任，胡说八道，造谣中伤，搬弄是非等等，都是不道德的。

不要总是报怨原单位：跳槽属于人才流动，是当今社会很正常的一种现象，并不为奇，而且跳槽者屡屡能在新的团队里找到适合自己的位置，创造更佳的业绩。如果这一步还没有达到，你就急忙地大耍“嘴功”，以贬低老团队的手段来抬高自己在新团队的人缘和地位的话，那你就大错特错了！

说话不可太露骨：别以为如实相告，别人就会感激涕零。要知道，我们永远不能率性而为、无所顾忌，话语出口前，考虑一下别人的感受，是一种成熟的人处世方法。

沉默是金：沉默，并不是让大家永不说话，该说的时候还是要说的。就像佛祖那样境界的人，也还是会与人说话，传授佛法，适度的语言本身也是一种沉默。

五、在思想上要高调

给自己一个希望：不论你遇到了多揪心的挫折，都应当以坚持不懈的信心和毅力，感动自己，感动他人，把自己锤炼成一个做大事的人。

保持向上的激情：我们需要激情，需要开拓，让我们从现在做起，兢兢业业，开拓创新，扎扎实实做好本职工作，在平凡的工作中燃烧激情。

自信是高调做事的秘诀：信心对于做事成功者具有重要意义，成功的欲望是创造和拥有财富的源泉。人一旦有了这种欲望，并经由自我暗示和潜意识的激发后形成一种自信心，这种信心就会转化成一种“积极的感情”，它能帮助人们释放出无穷的热情、智慧和精力，进而帮助人们获得财富与事业上的巨大成就。

别让借口“吃掉”你的希望：无论什么时候，我们都不要为自己寻找借口，只有尽职尽责，勇往直前，不找借口，才能实现理想，创造辉煌人生。

丑小鸭也能变成白天鹅：一个人有希望，再加上坚忍不拔的决心，就会产生创造的能力；一个人有希望，再加上持之以恒的努力，就会达到目的。

点燃希望之火：一颗充满希望的心灵，具有极大的创造力，这种创造力会激发人的潜能，实现人的理想。

成功需要付出代价：从古到今，凡成事者，成大事者，莫不受尽磨难，在磨难中完成自我教育，如此也水到渠成地成就了事业。

主动去做应该做的事：只有气服懒惰，积极进取的人，才能不断成功，不断取得好成绩。

不要轻言放弃，坚持就能成功：抱定任何都不放弃的信念，即使在一片懊悔或叹息、宽容或指责的氛围中也要坚持。是的，任何时候都不要放弃，无论条件多么的困难，只要能坚持到底，成功就一定属于你。

学会自己鼓励自己：能自己鼓励自己的人就算不是一个成功者，但绝对不会是一个失败者，你还是趁早练练这“功夫”吧！

永远保持好心情：突破困境的方法，首先在于要肃清胸中快乐和成功的仇敌，其次要集中思想，坚定意识。只有运用正确的思想，并抱定坚定的精神，才能从逆境中突围。

激发自己的潜能：倘若你和一般失败者面谈，你就会发现：他们之所以失败，是因为他们从来不曾走进足以激发人、鼓励人的环境中，是因为他们的潜能从来不曾被激发，是因为他们没有力量从不良的环境中振作。

不要畏惧贫穷和困苦：行走于人生丛林中的每个人都应该记住，如果你正在遭受困苦，这并不是完全是件坏事，“天将大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为”。因为老天要把重任交给你，必先磨炼和考验你！

发掘出自身的强项：当巨大的压力、非常的变故和重大责任压在一个人身上时，隐伏在他生命最深处的种种能力，才会突然涌现出来，使他成就大业。

坚定生活的信念：困境可以检验一个人的品质。如果一个人敢于直面困境，积极主动寻求解决问题的办法，能在任何不利的环境中始终充满热情，坚定对生活的信念，那么他迟早会成功。

把挫折当成垫脚石：在生活中，有的人被挫折打倒，有的人却把挫折当成垫脚石，不断前进。只要我们正视坎坷，永不放弃自己的追求，生活的艰辛将被我们踩在脚下，生命将会永放光芒！

对生活充满热情：有了热情，就能把额外的工作视作机遇，就能把陌生人变成朋友，就能真诚地宽容别人。有了热情，就能充分利用余暇时间来完成自己的兴趣爱好。有了热情，就会抛弃怨恨，变得心胸宽广。有了热情，就会战胜困难，取得成功。

六、在细节上要高调

注重细节，从小事做起：看不到细节，或者不把细节当回事的人，对工作缺乏认真的态度，对事情只能是敷衍了事。而注重细节的人，不仅认真地对待工作，将小事做细，并且能在做细的过程中找到机会，从而使自己走上成功之路。

工作中没有小事：点石成金，滴水成河，只有认真对待自己所做的一切事情，才能克服万难，取得成功。

认真对待每一次训练：那些在平时训练和准备过程中认真对待的人则相反，由于一直接受了高强度的模拟训练，他们更容易在关键的比赛中表现出镇定的心态，因为在他们心目中，这无异于平时的一场简单的比赛和训练。

悄悄地为他人做点好事:试着去真心真意地帮助别人，当这一切完全发自你的意愿时，你将会感觉到这是件多么快乐的事，你的心灵就会得到回报—一种和平、安静、温暖的感觉。

敬业精神+脚踏实地=成功：敬业，不仅仅是事业成功的保障，更是实现人生价值的手段，有的人在生活中，总是不满意目前的职业，希望改变自己的处境。但世界上绝对没有不劳而获的事情，人们的成功无一不是按部就班、脚踏实地努力的结果。

相信自己，正视开端：任何大的成功，都是从小事一点一滴累积而来的。没有做不到的事，只有不肯做的人。想想你曾经历过的失败，当时的你真的用尽全力试过各种办法了吗？困难不会是成功的障碍，只有你自己才可能是一个最大的绊脚石。

扎实的基础是成功的法宝：如果一味地追求过高远的目标，丧失了眼前可以成功的机会，就会成为高远目标的牺牲品。许多年轻人不满意现在的工作，羡慕那些大款或高级白领人员，不安心本职工作，总是想跳槽。其实，没有十分的本领，就不应有些妄想。我们还是多向成功之人学习，脚踏实地，做好基础工作，一步一个脚印地走上成功之途。

实干才能脱颖而出：那些充满乐观精神、积极向上的人，总有一股使不完的劲，神情专注，心情愉快，并且主动找事做，在实干中实现自己的理想。

要征服世界，先战胜自己：要想成功，就要战胜自己的感情，培养自己控制命运的能力。

用心做事，尽职尽责：以积极主动的心态对待你的工作、你的公司，你就会充满活力与创造性的完成工作，你就会成为一个值得信赖的人，一个老板乐于雇用的人，一个拥有自己事业的人。

对待小事也要倾注全部热情：倾注全部热情对待每件小事，不去计较它是多么的“微不足道”，你就会发现，原来每天平凡的生活竟是如此的充实、美好。

CSSrainbow.cn » General

CSSrainbow.cn 一周岁了，成长中 …

相关日志 »

搞笑漫画图解几大浏览器的区别

相关日志 »

图解JSON语法五大要素

JSON建构于两种结构：

JSON语法：

相关日志 »

Internet Explorer 6 的盛衰史

相关日志 »

漫画：混乱的标记语言XHTML2/HTML5

漫画：混乱的标记语言XHTML2/HTML5

相关日志 »

FireBug 控制台指令

Logging 基础

断言断言是一条确保代码规则的非常好的途径.

测量（Measurement）下面的一些函数可以让你方便的测量你的一些代码。

字符串格式化所有 console 的 logging 函数都可以通过以下模式格式化字符串：

命令行函数内建的命令行函数可以通过以下命令行使用：

相关日志 »

Web前端开发需要掌握的技能(图解)

相关日志 »

菊花香

菊花香

相关日志 »

固定(Fixed) vs. 流动(Fluid) vs. 弹性(Elastic)：哪种布局更适合你？

固定(Fixed) vs. 流动(Fluid) vs. 弹性(Elastic)：哪种布局更适合你？

1. 固定布局和流动布局的差异

固定网页布局

流动网页布局

2. 固定布局的网页设计

利

弊

固定布局的设计实例

3. 规避固定布局的坏处

先看下统计数据

960px 还是 760px?

总是将布局整体居中对齐

4. 流动页面布局

利

弊

流动布局的实例

5. 设计适用的流动网页布局

采用简单设计

最小宽度(min-width)和最大宽度(max-width)

6. 弹性设计

利

弊

弹性布局的实例

7. 哪一种布局更适合你？

其他设计师怎么说

来源 ：

相关日志 »

低调做人 高调做事

低调做人 高调做事

一、在姿态上要低调

二、在心态上要低调

三、在行为上要低调

四、在言辞上要低调

五、在思想上要高调

六、在细节上要高调

相关日志 »

来源：

低调做人高调做事

低调做人高调做事