对于CSS框架，本人也只是处于学习状态。

960网格系统

960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。

YUI Grids CSS

这应该是最著名的CSS框架吧，由Yahoo开发小组开发而成。YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法:

• 负Margin技术
• 使用度量单位em
• 清除布局的浮动
  

其中负margin技术，我个人觉得WordPress主题sandbox 可谓运用的炉火纯青。我感觉YUI功能不错，就是太复杂了。

YAML CSS Framework

YAML (”Yet Another Multicolumn Layout”) 是一个 (X)HTML/CSS 框架，它为了满足弹性的和用户友好的布局而开发的。YAML自2007年出现以来就提供了广而全的文档。像许多其他的CSS-Framework如Blueprint CSS 或 YUI Grids 一样，提供了一个预定义的 CSS-classes 系统，用来创建基于网格的布局。要创建一个布局，设计师需要创建网站 HTML 结构，然后为容器（html标签）书写CSS，剩下的就自理了。

Elements CSS Frameworks

Elements是一款纯净的CSS框架，可以帮助设计师快速高效率的书写css文档。你可以将他理解成一套模板，里面包含了大多数站点中所需要的那些css类。他很小，只有四个文件而已。总共不到6KB。

WYMstyle: a CSS framework

这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。WYMstyle是一组CSS文件，你可以很容易的组合这些文件来 快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

Blueprint CSS

Blueprint 是一个 CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。

Boilerplate CSS Framework

作为BluePrint CSS的原作者之一，我决定把我的思想重新整理到一个赤裸裸的框架，它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。

Tripoli Beta CSS Framework

Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

ESWAT Web Project Framework

ESWAT正在重新整理。如果你是冲着我的网站框架来的，那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

CwS CSS Framework

下一个逻辑步骤就是将这个扩展为CSS框架，允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板…

Schema Web Design Framework

Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。

CleverCSS

CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整 洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。

Logicss Framework

Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset 文件或是用“*”)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局。

That Standards Guy CSS Framework

• 只能调用单个样式文件
• 主样式需要取得CSS认证(WCAG 1.0)；
• 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac；
• IE Hacks使用独立文件；
• 快速创建模板；
• 少量注释/实例演示，可以节省时间来理解。

Emastic CSS Framework
Emastic 是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化，在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

二、使用如下代码：<img src=”http://www.xiamian.com/test.jpg” onload=”javascript:if(this.width>600}{this.resized=true;this.style.width=600;}”>

这种方法会在调用图片的时候，自动按比例缩小到指定的宽度，不会引起图片的变形，并且也不会撑破表格，但是缺点是，如果图片太大，在图片下载过程中，也就是图片显示过程中，会先以图片原大小显示，这时就会撑破表格，页面很难看，二当图片完全显示后，图片又会自动缩小。

三、我们可以针对表格的属性来限制大小防止被撑开，比如在<table width=”600″ border=”0″ cellpadding=”0″ cellspacing=”0″>里添加代码“style=”table-layout:fixed;word-wrap:break-word;word-break;break-all;””，其中“table-layout:fixed; ”是为了将表格布局固定住，就可以有效地防止表格被撑开，“word-wrap:break-word; ”是控制换行的，也就是强制执行换行，这个在文本内容较多的情况下需要使用到，特别是重复的内容出现，不执行换行的话，表格就被撑开了；而“word-break: break-all; ”可以解决IE的框架被英文（非亚洲语言文本行）撑开的问题，但是不会强制换行，只显示表格宽度里的内容。一般情况下只要用到“style=”table-layout:fixed;word-wrap:break-word;””就可以。当然，上面调用的语句可以定义在css里，比如
table {
table-layout: fixed;
word-wrap:break-word;
}

四、用css控制图片自适应大小，代码如：
img {
max-width: 600px;
width:expression(this.width > 600 ? “600px” : this.width);
overflow:hidden;
}
其中 max-width:600px; 在IE7、FireFox等其他非IE浏览器下最大宽度为600px，但在IE6中无效；width:600px; 在所有浏览器中图片的大小为600px，当图片大小大于600px，自动缩小为600px，在IE6中有效；而 overflow:hidden;  指将超出设置大小的部分隐藏，避免控制图片大小失败而引起的表格撑开变形。

五、最后总结一下最实用的代码：
如果是表格，请用：
table {
table-layout: fixed;
word-break: break-all;
}
如果是div层，请用：
div {
table-layout: fixed;
word-wrap: break-word;
width: 加上宽度;
overflow: hidden;    (让多出来的不显示。)

一、margin:auto 0 与 text-aligh:center
    在现代浏览器（如Internet Explorer 7、Firefox、Opera等）现代浏览器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可。意即：

#wrap { margin:0 auto;}

上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。请在现代浏览器
（如Internet Explorer 7、Firefox、Opera等）中运行现在的代码：
点击此处查看运行效果

    上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的，不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text- align属性值为center，这样页面内所有的元素都会自动居中，同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码：

body {text-align:center;}
#wrap {text-align:left;}

这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果，我们就可以这样写我们的代码：

body { text-align:center; }
#wrap { text-align:left;
             margin:0 auto;
}

点击此处查看运行效果

    不过这里有一个前提，就是设置居中的元素要有固定的宽度，比如这里我们设定了为760像素。

二、相对定位与负的边距
    对于wrap进行相对定位，然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现：

#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px
}

这段代码的意思是，设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。

点击此处查看运行效果

    同样，在设定水平居中前你需要设定一个固定的宽度。

P.S.究竟选择哪个方法？
    上面两个方法究竟选择哪种方法好呢？在第一种方法中貌似使用了Hack技术，其实并没有，它是中规中矩的Web标准写法，完全符合规范，因此，两个种方法中完全可以随便的选取其中的任一种进行使用，他们不存在CSS hack的问题。

三、其它的居中方式
    上面所说的都是设定了具体宽度的情况下水平居中的实现。有时候我们想做一个弹性布局，或者当一个元素处于一个容器中时我们只想让它居中并不想设定一个具体的宽度。其实这并不是真正的居中布局，就像对一个100%长度的元素来说，你说它是居中对齐还是居左对齐呢？所以所有不高宽度的居中都不是真正的居中。这样的设计我们是使用的像元素的padding来设置的，实际中我们是改变了父元素的容器大小：
如我们希望wrap元素长度随窗口而改变，同时又维持居中，我们就可以这样写：

body {
 padding:10px 150px;
}

这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。
点击此处查看运行效果
当然这只是“貌似居中”，不过却常常很有用处。

转自http://www.dudo.org/article.asp?id=234

CSS 兼容要点：

DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集

使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

，关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}

就能解决大部分问题

4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为

<script type=”text/javascript”>

就可以了

        其中内容部分一共十条建议：

一、内容部分
尽量减少HTTP请求
减少DNS查找
避免跳转
缓存Ajxa
推迟加载
提前加载
减少DOM元素数量
用域名划分页面内容
减小iframe的大小
避免404错误
1、尽量减少HTTP请求次数
      终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。
      减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。

合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。

CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；

图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；

内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。

     减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage – Exposed!中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧！

2、减少DNS查找次数
        域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系一样。当你在浏览器地址栏中输入http://www.kuqin.com/ 时，DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程同样也是需要时间的。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。

       缓存DNS查找可以改善页面性能。这种缓存需要一个特定的缓存服务器，这种服务器一般属于用户的ISP提供商或者本地局域网控制，但是它同样会在用户使用的计算机上产生缓存。DNS信息会保留在操作系统的DNS缓存中（微软Windows系统中DNS Client Service）。大多数浏览器有独立于操作系统以外的自己的缓存。由于浏览器有自己的缓存记录，因此在一次请求中它不会受到操作系统的影响。

      Internet Explorer默认情况下对DNS查找记录的缓存时间为30分钟，它在注册表中的键值为DnsCacheTimeout。Firefox对DNS的查找记录缓存时间为1分钟，它在配置文件中的选项为network.dnsCacheExpiration（Fasterfox把这个选项改为了1小时）。

      当客户端中的DNS缓存都为空时（浏览器和操作系统都为空），DNS查找的次数和页面中主机名的数量相同。这其中包括页面中URL、图片、脚本文件、样式表、Flash对象等包含的主机名。减少主机名的数量可以减少DNS查找次数。

      减少主机名的数量还可以减少页面中并行下载的数量。减少DNS查找次数可以节省响应时间，但是减少并行下载却会增加响应时间。我的指导原则是把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减少DNS查找次数和保持较高程度并行下载两者之间的权衡了。

3、避免跳转
跳转是使用301和302代码实现的。下面是一个响应代码为301的HTTP头：
      HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html
      浏览器会把用户指向到Location中指定的URL。头文件中的所有信息在一次跳转中都是必需的，内容部分可以为空。不管他们的名称，301和302响应都不会被缓存除非增加一个额外的头选项，如Expires或者Cache-Control来指定它缓存。<meat />元素的刷新标签和JavaScript也可以实现URL的跳转，但是如果你必须要跳转的时候，最好的方法就是使用标准的3XXHTTP状态代码，这主要是为了确保“后退”按钮可以正确地使用。

      但是要记住跳转会降低用户体验。在用户和HTML文档中间增加一个跳转，会拖延页面中所有元素的显示，因为在HTML文件被加载前任何文件（图像、Flash等）都不会被下载。

      有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问http://astrology.yahoo.com/astrology 时，实际上返回的是一个包含301代码的跳转，它指向的是http://astrology.yahoo.com/astrology/  （注意末尾的斜杠）。在Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

      连接新网站和旧网站是跳转功能经常被用到的另一种情况。这种情况下往往要连接网站的不同内容然后根据用户的不同类型（如浏览器类型、用户账号所属类型）来进行跳转。使用跳转来实现两个网站的切换十分简单，需要的代码量也不多。尽管使用这种方法对于开发者来说可以降低复杂程度，但是它同样降低用户体验。一个可替代方法就是如果两者在同一台服务器上时使用Alias和mod_rewrite和实现。如果是因为域名的不同而采用跳转，那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。

4、可缓存的AJAX
      Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。例如，在一个基于Web的Email客户端中，用户必须等待Ajax返回符合他们条件的邮件查询结果。记住一点，“异步”并不异味着“即时”，这很重要。

      为了提高性能，优化Ajax响应是很重要的。提高Ajxa性能的措施中最重要的方法就是使响应具有可缓存性，具体的讨论可以查看Add an Expires or a Cache-Control Header。其它的几条规则也同样适用于Ajax：
    Gizp压缩文件
    减少DNS查找次数
    精简JavaScript
    避免跳转
    配置ETags

     让我们来看一个例子：一个Web2.0的Email客户端会使用Ajax来自动完成对用户地址薄的下载。如果用户在上次使用过Email web应用程序后没有对地址薄作任何的修改，而且Ajax响应通过Expire或者Cacke-Control头来实现缓存，那么就可以直接从上一次的缓存中读取地址薄了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现，例如，&t=11900241612等。如果地址薄在上次下载后没有被编辑过，时间戳就不变，则从浏览器的缓存中加载从而减少了一次HTTP请求过程。如果用户修改过地址薄，时间戳就会用来确定新的URL和缓存响应并不匹配，浏览器就会重要请求更新地址薄。
        即使你的Ajxa响应是动态生成的，哪怕它只适用于一个用户，那么它也应该被缓存起来。这样做可以使你的Web2.0应用程序更加快捷。

5、推迟加载内容
        你可以仔细看一下你的网页，问问自己“哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？
        把整个过程按照onload事件分隔成两部分，JavaScript是一个理想的选择。例如，如果你有用于实现拖放和动画的JavaScript，那么它就以等待稍后加载，因为页面上的拖放元素是在初始化呈现之后才发生的。其它的例如隐藏部分的内容（用户操作之后才显现的内容）和处于折叠部分的图像也可以推迟加载
        工具可以节省你的工作量：YUI Image Loader可以帮你推迟加载折叠部分的图片，YUI Get utility是包含JS和 CSS的便捷方法。比如你可以打开Firebug的Net选项卡看一下Yahoo的首页。
        当性能目标和其它网站开发实践一致时就会相得益彰。这种情况下，通过程序提高网站性能的方法告诉我们，在支持JavaScript的情况下，可以先去除用户体验，不过这要保证你的网站在没有JavaScript也可以正常运行。在确定页面运行正常后，再加载脚本来实现如拖放和动画等更加花哨的效果。

6、预加载
        预加载和后加载看起来似乎恰恰相反，但实际上预加载是为了实现另外一种目标。预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。

下面提供了几种预加载方法：
无条件加载：触发onload事件时，直接加载额外的页面内容。以Google.com为例，你可以看一下它的spirit image图像是怎样在onload中加载的。这个spirit image图像在google.com主页中是不需要的，但是却可以在搜索结果页面中用到它。
有条件加载：根据用户的操作来有根据地判断用户下面可能去往的页面并相应的预加载页面内容。在search.yahoo.com中你可以看到如何在你输入内容时加载额外的页面内容。
有预期的加载：载入重新设计过的页面时使用预加载。这种情况经常出现在页面经过重新设计后用户抱怨“新的页面看起来很酷，但是却比以前慢”。问题可能出在用户对于你的旧站点建立了完整的缓存，而对于新站点却没有任何缓存内容。因此你可以在访问新站之前就加载一部内容来避免这种结果的出现。在你的旧站中利用浏览器的空余时间加载新站中用到的图像的和脚本来提高访问速度。

7、减少DOM元素数量
        一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。比如当你增加一个事件句柄时在500和5000个DOM元素中循环效果肯定是不一样的。
       大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。你在页面布局中使用表格了吗？你有没有仅仅为了布局而引入更多的<div>元素呢？也许会存在一个适合或者在语意是更贴切的标签可以供你使用。
        YUI CSS utilities可以给你的布局带来巨大帮助：grids.css可以帮你实现整体布局，font.css和reset.css可以帮助你移除浏览器默认格式。它提供了一个重新审视你页面中标签的机会，比如只有在语意上有意义时才使用<div>，而不是因为它具有换行效果才使用它。
      DOM元素数量很容易计算出来，只需要在Firebug的控制台内输入：
document.getElementsByTagName(’*').length
        那么多少个DOM元素算是多呢？这可以对照有很好标记使用的类似页面。比如Yahoo!主页是一个内容非常多的页面，但是它只使用了700个元素（HTML标签）。

8、根据域名划分页面内容
      把页面内容划分成若干部分可以使你最大限度地实现平行下载。由于DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间。例如，你可以把用到的HTML内容和动态内容放在www.example.org上，而把页面各种组件（图片、脚本、CSS)分别存放在statics1.example.org和statics.example.org上。
你可在Tenni Theurer和Patty Chi合写的文章Maximizing Parallel Downloads in the Carpool Lane找到更多相关信息。

9、使iframe的数量最小
      ifrmae元素可以在父文档中插入一个新的HTML文档。了解iframe的工作理然后才能更加有效地使用它，这一点很重要。
<iframe>优点：
解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本

<iframe>的缺点：
即时内容为空，加载也需要时间
会阻止页面加载
没有语意
10、不要出现404错误
      HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。
      有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。

二，服务器
在本系列的第一节中，讲了提高网站性能中网站“内容”有关的10条原则。除了在网站在内容上的改进外，在网站服务器端上也有需要注意和改进的地方，它们包括：
使用内容分发网络
为文件头指定Expires或Cache-Control
Gzip压缩文件内容
配置ETag
尽早刷新输出缓冲
使用GET来完成AJAX请求

11、使用内容分发网络
      用户与你网站服务器的接近程度会影响响应时间的长短。把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。但是首先我们应该做些什么呢？
      按地域布置网站内容的第一步并不是要尝试重新架构你的网站让他们在分发服务器上正常运行。根据应用的需求来改变网站结构，这可能会包括一些比较复杂的任务，如在服务器间同步Session状态和合并数据库更新等。要想缩短用户和内容服务器的距离，这些架构步骤可能是不可避免的。
      要记住，在终端用户的响应时间中有80%到90%的响应时间用于下载图像、样式表、脚本、Flash等页面内容。这就是网站性能黄金守则。和重新设计你的应用程序架构这样比较困难的任务相比，首先来分布静态内容会更好一点。这不仅会缩短响应时间，而且对于内容分发网络来说它更容易实现。
      内容分发网络（Content Delivery Network，CDN）是由一系列分散到各个不同地理位置上的Web服务器组成的，它提高了网站内容的传输速度。用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。例如，拥有最少网络跳数（network hops）和响应速度最快的服务器会被选定。
      一些大型的网络公司拥有自己的CDN，但是使用像Akamai Technologies，Mirror Image Internet， 或者Limelight Networks这样的CDN服务成本却非常高。对于刚刚起步的企业和个人网站来说，可能没有使用CDN的成本预算，但是随着目标用户群的不断扩大和更加全球化，CDN就是实现快速响应所必需的了。以Yahoo来说，他们转移到CDN上的网站程序静态内容节省了终端用户20%以上的响应时间。使用CDN是一个只需要相对简单地修改代码实现显著改善网站访问速度的方法。

12、为文件头指定Expires或Cache-Control
      这条守则包括两方面的内容：
对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）
对于动态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求
      网页内容设计现在越来越丰富，这就意味着页面中要包含更多的脚本、样式表、图片和Flash。第一次访问你页面的用户就意味着进行多次的HTTP请求，但是通过使用Expires文件头就可以使这样内容具有缓存性。它避免了接下来的页面访问中不必要的HTTP请求。Expires文件头经常用于图像文件，但是应该在所有的内容都使用他，包括脚本、样式表和Flash等。
      浏览器（和代理）使用缓存来减少HTTP请求的大小和次数以加快页面访问速度。Web服务器在HTTP响应中使用Expires文件头来告诉客户端内容需要缓存多长时间。下面这个例子是一个较长时间的Expires文件头，它告诉浏览器这个响应直到2010年4月15日才过期。
      Expires: Thu, 15 Apr 2010 20:00:00 GMT
      如果你使用的是Apache服务器，可以使用ExpiresDefault来设定相对当前日期的过期时间。下面这个例子是使用ExpiresDefault来设定请求时间后10年过期的文件头：
      ExpiresDefault “access plus 10 years”
      要切记，如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。依Yahoo!来说我们经常使用这样的步骤：在内容的文件名中加上版本号，如yahoo_2.0.6.js。
      使用Expires文件头只有会在用户已经访问过你的网站后才会起作用。当用户首次访问你的网站时这对减少HTTP请求次数来说是无效的，因为浏览器的缓存是空的。因此这种方法对于你网站性能的改进情况要依据他们“预缓存”存在时对你页面的点击频率（“预缓存”中已经包含了页面中的所有内容）。Yahoo!建立了一套测量方法，我们发现所有的页面浏览量中有75~85%都有“预缓存”。通过使用Expires文件头，增加了缓存在浏览器中内容的数量，并且可以在用户接下来的请求中再次使用这些内容，这甚至都不需要通过用户发送一个字节的请求。

13、Gzip压缩文件内容
      网络传输中的HTTP请求和应答时间可以通过前端机制得到显著改善。的确，终端用户的带宽、互联网提供者、与对等交换点的靠近程度等都不是网站开发者所能决定的。但是还有其他因素影响着响应时间。通过减小HTTP响应的大小可以节省HTTP响应时间。
      从HTTP/1.1开始，web客户端都默认支持HTTP请求中有Accept-Encoding文件头的压缩格式：  
      Accept-Encoding: gzip, deflate
      如果web服务器在请求的文件头中检测到上面的代码，就会以客户端列出的方式压缩响应内容。Web服务器把压缩方式通过响应文件头中的Content-Encoding来返回给浏览器。
      Content-Encoding: gzip
      Gzip是目前最流行也是最有效的压缩方式。这是由GNU项目开发并通过RFC 1952来标准化的。另外仅有的一个压缩格式是deflate，但是它的使用范围有限效果也稍稍逊色。
      Gzip大概可以减少70%的响应规模。目前大约有90%通过浏览器传输的互联网交换支持gzip格式。如果你使用的是Apache，gzip模块配置和你的版本有关：Apache 1.3使用mod_zip，而Apache 2.x使用moflate。
      浏览器和代理都会存在这样的问题：浏览器期望收到的和实际接收到的内容会存在不匹配的现象。幸好，这种特殊情况随着旧式浏览器使用量的减少在减少。Apache模块会通过自动添加适当的Vary响应文件头来避免这种状况的出现。
      服务器根据文件类型来选择需要进行gzip压缩的文件，但是这过于限制了可压缩的文件。大多数web服务器会压缩HTML文档。对脚本和样式表进行压缩同样也是值得做的事情，但是很多web服务器都没有这个功能。实际上，压缩任何一个文本类型的响应，包括XML和JSON，都值得的。图像和PDF文件由于已经压缩过了所以不能再进行gzip压缩。如果试图gizp压缩这些文件的话不但会浪费CPU资源还会增加文件的大小。
      Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。

14、配置ETag
      Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内容”，包括图片、脚本、样式表等）。增加ETag为实体的验证提供了一个比使用“last-modified date（上次编辑时间）”更加灵活的机制。Etag是一个识别内容版本号的唯一字符串。唯一的格式限制就是它必须包含在双引号内。原始服务器通过含有ETag文件头的响应指定页面内容的ETag。
      HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: “10c24bc-4ab-457e1c1f”
      Content-Length: 12195
      稍后，如果浏览器要验证一个文件，它会使用If-None-Match文件头来把ETag传回给原始服务器。在这个例子中，如果ETag匹配，就会返回一个304状态码，这就节省了12195字节的响应。      GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: “10c24bc-4ab-457e1c1f”
      HTTP/1.1 304 Not Modified
      ETag的问题在于，它是根据可以辨别网站所在的服务器的具有唯一性的属性来生成的。当浏览器从一台服务器上获得页面内容后到另外一台服务器上进行验证时ETag就会不匹配，这种情况对于使用服务器组和处理请求的网站来说是非常常见的。默认情况下，Apache和IIS都会把数据嵌入ETag中，这会显著减少多服务器间的文件验证冲突。
      Apache 1.3和2.x中的ETag格式为inode-size-timestamp。即使某个文件在不同的服务器上会处于相同的目录下，文件大小、权限、时间戳等都完全相同，但是在不同服务器上他们的内码也是不同的。
      IIS 5.0和IIS 6.0处理ETag的机制相似。IIS中的ETag格式为Filetimestamp:ChangeNumber。用ChangeNumber来跟踪IIS配置的改变。网站所用的不同IIS服务器间ChangeNumber也不相同。 不同的服务器上的Apache和IIS即使对于完全相同的内容产生的ETag在也不相同，用户并不会接收到一个小而快的304响应；相反他们会接收一个正常的200响应并下载全部内容。如果你的网站只放在一台服务器上，就不会存在这个问题。但是如果你的网站是架设在多个服务器上，并且使用Apache和IIS产生默认的ETag配置，你的用户获得页面就会相对慢一点，服务器会传输更多的内容，占用更多的带宽，代理也不会有效地缓存你的网站内容。即使你的内容拥有Expires文件头，无论用户什么时候点击“刷新”或者“重载”按钮都会发送相应的GET请求。
      如果你没有使用ETag提供的灵活的验证模式，那么干脆把所有的ETag都去掉会更好。Last-Modified文件头验证是基于内容的时间戳的。去掉ETag文件头会减少响应和下次请求中文件的大小。微软的这篇支持文稿讲述了如何去掉ETag。在Apache中，只需要在配置文件中简单添加下面一行代码就可以了：
      FileETag none

15、尽早刷新输出缓冲
      当用户请求一个页面时，无论如何都会花费200到500毫秒用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，你可以使用flush()方法，它允许你把已经编译的好的部分HTML响应文件先发送给浏览器，这时浏览器就会可以下载文件中的内容（脚本等）而后台同时处理剩余的HTML页面。这样做的效果会在后台烦恼或者前台较空闲时更加明显。
      输出缓冲应用最好的一个地方就是紧跟在<head />之后，因为HTML的头部分容易生成而且头部往往包含CSS和JavaScript文件，这样浏览器就可以在后台编译剩余HTML的同时并行下载它们。 例子：

      … <!– css, js –>
    </head>
    <?php flush(); ?>
    <body>
      … <!– content –>

为了证明使用这项技术的好处，Yahoo!搜索率先研究并完成了用户测试。

16、使用GET来完成AJAX请求
      Yahoo!Mail团队发现，当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET最为恰当，因为它只需发送一个TCP包（除非你有很多cookie）。IE中URL的最大长度为2K，因此如果你要发送一个超过2K的数据时就不能使用GET了。
      一个有趣的不同就是POST并不像GET那样实际发送数据。根据HTTP规范，GET意味着“获取”数据，因此当你仅仅获取数据时使用GET更加有意义（从语意上讲也是如此），相反，发送并在服务端保存数据时使用POST。

三、JavaScript和CSS
在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则，除此之外，JavaScript和CSS也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：
CSS：
把样式表置于顶部
避免使用CSS表达式（Expression）
使用外部JavaScript和CSS
削减JavaScript和CSS
用<link>代替@import
避免使用滤镜

JavaScript
把脚本置于页面底部
使用外部JavaScript和CSS
削减JavaScript和CSS
剔除重复脚本
减少DOM访问
开发智能事件处理程序
17、把样式表置于顶部
      在研究Yahoo!的性能表现时，我们发现把样式表放到文档的<head />内部似乎会加快页面的下载速度。这是因为把样式表放到<head />内会使页面有步骤的加载显示。
      注重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。向用户返回可视化的反馈，比如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。
      把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
      HTML规范清楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link />只能出现在文档的<head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文档<head />内加载你的样式表。

18、避免使用CSS表达式（Expression）
      CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：
      background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );
如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用，因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。
      表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
      一个减少CSS表达式计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

19、使用外部JavaScript和CSS
      很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到一个更基本的问题：JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本身之内呢？
      在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。
      关键问题是，外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。
      许多网站没有功能建立这些指标。对于这些网站来说，最好的坚决方法就是把JavaScript和CSS作为外部文件引用。比较适合使用内置代码的例外就是网站的主页，如Yahoo!主页和My Yahoo!。主页在一次会话中拥有较少（可能只有一次）的浏览量，你可以发现内置JavaScript和CSS对于终端用户来说会加快响应时 间。
      对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置JavaScript和CSS，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。

20、削减JavaScript和CSS
      精简是指从去除代码不必要的字符减少文件大小从而节省下载时间。消减代码时，所有的注释、不需要的空白字符（空格、换行、tab缩进）等都要去掉。在JavaScript中，由于需要下载的文件体积变小了从而节省了响应时间。精简JavaScript中目前用到的最广泛的两个工具是JSMin和YUI Compressor。YUI Compressor还可用于精简CSS。
      混淆是另外一种可用于源代码优化的方法。这种方法要比精简复杂一些并且在混淆的过程更易产生问题。在对美国前10大网站的调查中发现，精简也可以缩小原来代码体积的21%，而混淆可以达到25%。尽管混淆法可以更好地缩减代码，但是对于JavaScript来说精简的风险更小。
      除消减外部的脚本和样式表文件外，<script>和<style>代码块也可以并且应该进行消减。即使你用Gzip压缩过脚本和样式表，精简这些文件仍然可以节省5%以上的空间。由于JavaScript和CSS的功能和体积的增加，消减代码将会获得益处。

21、用<link>代替@import
      前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。
      在IE中，页面底部@import和使用<link>作用是一样的，因此最好不要使用它。

22、避免使用滤镜
      IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
      完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

23、把脚本置于页面底部
      脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机名不相同。
      在某些情况下把脚本移到页面底部可能不太容易。比如说，如果脚本中使用了document.write来插入页面内容，它就不能被往下移动了。这里可能还会有作用域的问题。很多情况下，都会遇到这方面的问题。
      一个经常用到的替代方法就是使用延迟脚本。DEFER属性表明脚本中没有包含document.write，它告诉浏览器继续显示。不幸的是，Firefox并不支持DEFER属性。在Internet Explorer中，脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟，那么它就可以移到页面的底部。这会让你的页面加载的快一点。

24、剔除重复脚本
      在同一个页面中重复引用JavaScript文件会影响页面的性能。你可能会认为这种情况并不多见。对于美国前10大网站的调查显示其中有两家存在重复引用脚本的情况。有两种主要因素导致一个脚本被重复引用的奇怪现象发生：团队规模和脚本数量。如果真的存在这种情况，重复脚本会引起不必要的HTTP请求和无用的JavaScript运算，这降低了网站性能。
      在Internet Explorer中会产生不必要的HTTP请求，而在Firefox却不会。在Internet Explorer中，如果一个脚本被引用两次而且它又不可缓存，它就会在页面加载过程中产生两次HTTP请求。即时脚本可以缓存，当用户重载页面时也会产生额外的HTTP请求。
      除增加额外的HTTP请求外，多次运算脚本也会浪费时间。在Internet Explorer和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。
      一个避免偶尔发生的两次引用同一脚本的方法是在模板中使用脚本管理模块引用脚本。在HTML页面中使用<script />标签引用脚本的最常见方法就是：
      <script type=”text/javascript” src=”menu_1.0.17.js”></script>
在PHP中可以通过创建名为insertScript的方法来替代：
      <?php insertScript(”menu.js”) ?>
为了防止多次重复引用脚本，这个方法中还应该使用其它机制来处理脚本，如检查所属目录和为脚本文件名中增加版本号以用于Expire文件头等。

25、减少DOM访问
      使用JavaScript访问DOM元素比较慢，因此为了获得更多的应该页面，应该做到：
缓存已经访问过的有关元素
线下更新完节点之后再将它们添加到文档树中
避免使用JavaScript来修改页面布局

      有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章“高性能Ajax应该程序”。

26、开发智能事件处理程序
      有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation（事件代理）是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。
      你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。
      你可能会希望用DOMContentLoaded事件来代替onload，但是在所有浏览器都支持它之前你可使用YUI 事件应用程序中的onAvailable方法。
      有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章“高性能Ajax应该程序”。

四、图片、Coockie与移动应用
我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。除此之外，图片和Coockie也是我们网站中几乎不可缺少组成部分，此外随着移动设备的流行，对于移动应用的优化也十分重要。这主要包括：
Coockie:
减小Cookie体积
对于页面内容使用无coockie域名

图片：
优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存

移动应用：
保持单个内容小于25K
打包组件成复合文本
27、减小Cookie体积
      HTTP coockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以减少用户的响应时间十分重要。
有关更多信息可以查看Tenni Theurer和Patty Chi的文章“When the Cookie Crumbles”。这们研究中主要包括：
去除不必要的coockie
使coockie体积尽量小以减少对用户响应的影响
注意在适应级别的域名上设置coockie以便使子域名不受影响
设置合理的过期时间。较早地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。

28、对于页面内容使用无coockie域名
      当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie不会做任何地使用。因此他们只是因为某些负面因素而创建的网络传输。所有你应该确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容。
      如果你的域名是www.example.org，你可以在static.example.org上存在静态内容。但是，如果你不是在www.example.org上而是在顶级域名example.org设置了coockie，那么所有对于static.example.org的请求都包含coockie。在这种情况下，你可以再重新购买一个新的域名来存在静态内容，并且要保持这个域名是无coockie的。Yahoo!使用的是ymig.com，YouTube使用的是ytimg.com，Amazon使用的是images-anazon.com等等。
      使用无coockie域名存在静态内容的另外一个好处就是一些代理（服务器）可能会拒绝对coockie的内容请求进行缓存。一个相关的建议就是，如果你想确定应该使用example.org还是www.example.org作为你的一主页，你要考虑到coockie带来的影响。忽略掉www会使你除了把coockie设置到*.example.org（*是泛域名解析，代表了所有子域名译者dudo注）外没有其它选择，因此出于性能方面的考虑最好是使用带有www的子域名并且在它上面设置coockie。

29、优化图像
      设计人员完成对页面的设计之后，不要急于将它们上传到web服务器，这里还需要做几件事：
你可以检查一下你的GIF图片中图像颜色的数量是否和调色板规格一致。 使用imagemagick中下面的命令行很容易检查：
identify -verbose image.gif
如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。
尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。由于浏览器支持有限，设计者们往往不太乐意使用PNG格式的图片，不过这都是过去的事情了。现在只有一个问题就是在真彩PNG格式中的alpha通道半透明问题，不过同样的，GIF也不是真彩格式也不支持半透明。因此GIF能做到的，PNG（PNG8）同样也能做到（除了动画）。下面这条简单的命令可以安全地把GIF格式转换为PNG格式：
convert image.gif image.png
“我们要说的是：给PNG一个施展身手的机会吧！”
在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。例如：
pngcrush image.png -rem alla -reduce -brute result.png
在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息（如EXIF信息）：
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30、优化CSS Spirite
在Spirite中水平排列你的图片，垂直排列会稍稍增加文件大小；
Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
便于移动，不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，而1000×1000就是100万像素。
31、不要在HTML中缩放图像
      不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要：
<img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />
那么你的图片（mycat.jpg）就应该是100×100像素而不是把一个500×500像素的图片缩小使用。

32、favicon.ico要小而且可缓存
      favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一个404 Not Found的响应。由于是在同一台服务器上，它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序，例如在IE中当你在onload中请求额外的文件时，favicon会在这些额外内容被加载前下载。
      因此，为了减少favicon.ico带来的弊端，要做到：
文件尽量地小，最好小于1K
在适当的时候（也就是你不要打算再换favicon.ico的时候，因为更换新文件时不能对它进行重命名）为它设置Expires文件头。你可以很安全地把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。

Imagemagick可以帮你创建小巧的favicon。

33、保持单个内容小于25K
      这条限制主要是因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重要。
      查看更多信息，请参阅Wayne Shea和Tenni Theurer的文件“Performance Research, Part 5: iPhone Cacheability – Making it Stick”。

34、打包组件成复合文本
      把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组件（切记：HTTP请求是很奢侈的）。当你使用这条规则时，首先要确定用户代理是否支持（iPhone就不支持）。

转自：http://blog.csdn.net/starxu85/archive/2008/05/15/2449421.aspx

　　如果你想最大化你的服务所带来的效益，你就必须最大化你网站表单的成功率。仅仅简单的让用户在你网站上注册是不够的，除非你有能够让访问你网站的人一看就映像深刻的点子。为了让服务达到最大化的体现，我们设计师需要提供用户一个良好的用户体验。我们需要邀请用户，为他们描述服务产品有多少好，给他们解释为什么他们需要填那些表单并且暗示他们会因此得到利益的回报。当然，我们也应该做的非常方便让用户来参与。

　　但是设计有效的页面表单不是件容易的事情。有个不争的事实就是：没人喜欢填表单——无论是线上还是线下的。因此，作为设计师我们需要找出能够让表单百分百简单、直接甚至无痛苦的正确的设计决策。

　　但是怎么样才能准确地找出这些决策？布局上那些链接应该放在表单的什么位置？我们应该怎么设计它？我们应该怎么样高亮标签，应该怎么样排列他们？页面表单设计样式怎么样才符合现代化的网站？我们拿这些问题问我们自己，并且通过实施调查来得到这些结果。

　　下面我们介绍一下现在互联网web表单设计样式的调查结果。这些结果是分析了100个拥有和web表单相关流程的网站而得出的。我们决定从注册表单开始。

　　注册表单设计调查

　　调查的目的主要是提供给那些凭直接来判断有效性的设计师和开发人员参考依据。我们也会介绍一些如何让web表单成为完美的友好用户界面的指导方针。

　　我们已经选择了100个和web表单有关的大型网站。这些网站是根据博客搜索和Alexa排名以及搜索引擎中的受欢迎程度等方面去考虑选择的。这些网站直接商业目标的影响普遍和他们的web表单相关，因此在流程中需要指定为高优先级进行设计。尤其注册表单是为解释为什么许多评论表单是来自于社会类型的网站的关键。

　　我们关注注册表单是想把更多关键表单单独开来（例如校验表单）。然后我们分别完成每个被选择网站的注册表单并且分析这些表单的设计方法。

　　我们在每个表单中利用一个特殊的Email账户和特殊的用户名，为了使调查尽可能地具有广泛性，我们指出29个在设计web表单时会碰到的不同的设计问题和疑问。

　　我们将它们分类并试图找出相似的设计方针和设计思路。我们试图从可用性观点上着手，不断关注两者的正面和反面的例子并将他们陈列在调查结果中。

　　请注意这个文章不是关于校验表单——那是另外一个讨论的话题，我们把它独立开来看待成一个即将要讨论的文章。我们要感谢Wufoo为我们提供构架来引导我们的调查。

　　1.表单的安置

　　1.1注册表单链接的标题是怎么样的？

　　当用户想要加入网站是，用户会寻找正确的短语，用户知道它们应该是“sign- up”，“register”，“join”，“join”，“become a member”或者“creat an account”等。显然，用户期望他们其中之一的链接可以链到注册表单。不幸的是，情况不一定是这样的。

　　从图表可见，最受欢迎的标题是“Sign up”（40%），接着是“Join”（18%），“Register”（18%）以及“Creat account”（17%），我们观察到极少数有类似于我们去年看到的按钮那样即大，又闪亮，并且写着“start here”的字样。显而易见，设计师与其设计并强调服务的功能性还不如试图去表达信息。

　　1.2注册表单的链接放在哪儿？

　　当用户第一次访问一个站点，他们试图找出单独布局块是代表什么。他们的眼睛运动是跳跃的，并且用户试图了解哪个区域是更重要的，他们想要的内容可能被放在什么地方。为了满足用户体验，设计师需要帮助用户直观地知道哪些是在开始使用服务前所需要做的事。

　　如果用户找不到通往注册表单的链接，他可能就不会注册你的服务。因此让链接尽可能地显而易见是最关键的。那么设计师应该把“注册”的链接放在什么地方才会让用户感觉更可接近？

　　根据我们的调查，这个注册链接

• 59%的网站是放在网站的顶部（其中76%是被放在右上角）
• 21%的网站是放在首页的突出位置（链接或者表单自己被放在首页上）
• 有9%是被隐藏在顶部“登陆”链接之后（例如：Craigslist）

　　实际上注册链接很少被放在侧边栏上（7%-Propeller,Xing），但是4%的站点为用户直接提供服务，只有在用户需要保存设置的时候才需要用户进行注册。

　　2.表单的设计

　　2.1需要简化注册表单的样式吗？

　　当用户点击了注册链接之后，他很有可能想要注册你提供的服务。更重要的是，他并没有点击那些探索更深导航操作的链接或者具有吸引力的闪亮的广告链接。

　　因此，设计师尝试去掉所有没必要的详细资料以及不能帮助用户完成表单的描述。常常只是呈现一个logo和表单自身，没有任何的导航操作和附加信息。想法：用户必须尽可能地关注在他要去完成的任务上。任何会分散用户注意力的因素不得不被删除。

　　因此，设计师经常使用“最小化”的布局来构建注册表单。根据我们的调查，61%的web表单和普遍的页面相比更简单（例如：MovableType, Livejournal, Amazon, Yandex.ru）

　　根据雅虎的注册表单可以看出，访问者仅仅需要填写账户信息即可，没有别的干扰因素去分散用户的注意力。注意表单中的语气和语义都是吸引人的对话式，这既简单又友好。

　　Flixster是个典型的反面例子，它把表单塞得很满，一点也不尊重它的访问者。注册页面上一下子提供了每种可能的操作导航，并且登陆页面上右边的广告比登陆表单还要突出。这样一点也不友好，Photobucket应该是我们见过的第二拥挤的web表单。

　　2.2需要提供任何附加信息吗？

　　许多设计师试图通过类似于帮助、信息内容要求甚至是版权申明的附加信息来鼓励访问者主动填写表格。但是它不同于点对点，在大部分例子中注册的好处依然是通过表单来体现。

• 41%的表单告诉用户注册的好处
• (MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com)
• 28%仅仅是单纯的注册页面，没有任何附加信息
• (Pownce, DeviantArt, Dailymotion)
• 11%告诉用户需要多久时间来填写。
• (Threadless, Newsvine, Wordpress)

　　只有很少一部分（6%）网站正面提及在注册过程中所需要填写的信息。一些步骤中会提供一些警告（8%）和示意（6%，例如37signals, Bloglines）

　　2.3单页表单VS多页表单

　　调查结果中，93%的表单是单页表单。显然地，设计师试图帮助用户尽可能快速和无痛苦地完成注册流程。只有一些网站利用多页表单试图把探索用户参数选择结合在注册过程中。

　　比如，Meebo把一个完整的注册过程整合在一张注册表单中，并且通过一个弹出框的形式为用户提供注册向导。这个表单由6个页面组成，用户通过一些附加信息的选择从而进行他们账户的设置。

　　2.4输入框标附加信题需要高光吗？

　　62%的注册表单用加粗的方式去高光输入框的标题。为了引人注目而不止一个的使用斜体去达到同样的效果。为了让标签能够更加可见，20%的注册表单用色彩，18%的用纯文本。

　　Large version

　　2.5标签对齐

　　老实说，我们已经预料到可能对齐是一个很强的趋势 。但是在我们看来，标签对齐的趋势已经不再那么强烈了。

• 在调查中41%的网站使用标签右对齐  (YouTube, Facebook, Metacafe)
• 30%的注册表单使用顶端对齐　(Behance.net, Wufoo, Tickspot, DZone)
• 29%使用的是左对齐 (Digg, Ning, Wykop.pl, 43things, StupZ).

　　根据“Matteo Penzo的标签放置研究结果”（1996）和“Luke Wroblewski的发现”（PDF），标签顶端对齐能够戏剧性地减少完成时间因为它们几乎不需要眼睛的注视。如果你想要达到相同的目的但是只有一块受实际区域制约的垂直屏幕，右对齐则会更好一些。还有以防你的表格要求人们扫描标签去了解什么是必须的（不熟悉或者高级的数据），左对齐则是最好的。

　　2.6有多少必填区域？

　　当进行一个调查时，我们已经注意到表单中的必填项越来越少了。几年前，设计师要求访问者填写他们的姓名、地址、城市和个人兴趣，但现在仅仅只需要登录名、密码和确认密码。

 　　我们发现54%的表单要求用户最多填写5个输入框（其中6%的网站在使用服务前根本不需要注册）。34%的表单使用6-8个输入框，然而有12%的网站顶着用户的忍耐度让他们完成超过9个的必填项。

　　2.7有多少可选项？

　　和上面发现的类似，我们注意到大多数网站避免可选项并且要求用户在完成注册流程之后补全可选项。其中62%的表单根本就没有可选项，还有98%的表单有少于5个的可选项。

　　2.8垂直或者水平的安排区域

　　在这个方面，垂直无阻碍延伸的垂直布局区域是注册表单表现出强大趋势。86%的网站把输入框垂直布局。除此以外，15%的布局更强调利用漂亮且吸引人的视觉设计来让访问者在填写表单时感到更舒适。

　　Box.net提供了一个简单的垂直布局的输入区域。当用户输入数据的时候，他们的眼睛固定在纵轴输入框左侧的交叉点上。

　　Mint是一个横向布局的注册表单。当用户输入数据的时候，他们的眼睛需要跳来跳出。

　　更多的发现

• 调查结果中18%的注册表单旁边都会有登录表单或者登录连接。（例如, YouTube, Reddit, Digg, Lulu, Metacafe）
• 78%的注册表单没有用星号或者高光去表示必选框；大多数情况无论星号或者其他形式的高光都不会被使用。
• 9%的注册表单用流程指示来告诉用户他们进行到哪一步了，并且告诉他们哪些步骤是完成注册的必填项。
• 85%的站点更喜欢用尽可能简单的web表单。
• 区域通常都是用空白区来群组和拆分的，有时边框的用途也和空白区一样（22%），还有9%的情况是利用不同的背景色来区分。

　　概要

　　让我们来为这个web表单设计样式调查的第一部分做一个总结。请记住，我们只考虑注册表单。

• 注册链接的标题大多数是“sign up”（40%）并且被放在右上角。
• 注册表单为了避免分散用户的注意力而使用简单的样式。
• 93%的注册表单是单页表单。
• 41%的注册表单通过解释注册的优势来吸引用户注册。
• 62%的输入框标题是通过加粗高亮的。
• 标签不是都排成一条直线的。
• 设计师试图不用必填项和可选项。
• 86%的注册表单更喜欢用垂直布局的表单。

null

上面的“弯管”体现了这个字体的结构。这一点很重要。为了文本的易读，我们应该采用字形尽量简单的字体，而不需要太多复杂的细节。这些细节会让阅读者分心，我们应该让读者关注文本的内容而非字体。

2. The Weight 字重

当我们讨论字体的“重量”时，我们指的是字符之间的一种一致性关系，以及页面文本流的整体“亮度”。如果你为大段文字设置一种很纤细的字体，阅读起来就会很费力，没有人愿意去读它。

3. The Contrast 粗细对比

粗细对比指的是垂直笔画和水平笔画之间的粗细差异-字符最粗部分和最细部分的差异。Bodoni 和 Didot 是粗细对比很强烈的字体。如果你看到 Bodoni 排版的文本的复印件的复印件的复印件，你就会发现你已经看不见水平笔画了。一款设计精良的正文字体应该能经受反复多次的复印。它的笔画应当是结实有力而不粗糙。
4. The axis 轴向

我认为字体的轴向设置同样会影响阅读。正文字体的主流是垂直笔画，如果轴向是倾斜的，视线沿文本方向流动的时候就会造成干扰。如果一款字体使用了一种以上的轴向，那么这一行文本看起来就好像在跳舞，这样是很难阅读的。如果你采用垂直的轴向，字符就不会跳舞。

5. x height x高度

基线到 x高度之间的区域包含了大部分的可读信息（75%的小写字母）。在阅读正文时这是非常重要的区域。上升部和下降部如果很长，就必然会导致 x高度很小。如果你比较例图中上升部长度不同的两款字体，你就会看出后者的 x高度更大，因而它也就更易于识别。你可以对比看看 Times New Roman 和 Mrs. Eaves 这两款字体的区别。
6. Capital letters height 大写字母高度

旧式的字体设计中上升部和大写高度是一致的。有些字体中大写高度要更大一些… 那么大小写连排的时候通常就会很难看。比如我写一个‘Garamond’，这个“G”看起来就象是一只恐龙，而后面的“a”看上去就象是它的猎物…
7. Endings and details 末端和细节

当我们在大字号下面使用一个字体时候(比如说一张海报)，一切都被放大。所有设计上的细节都变得很明显，同样明显的还有它的瑕疵。很多字体的绘制其实是很糟糕的。身为设计师，这是我们所无法忍受的。

8. Text and texture 文本和版面纹路

从远处看，文本块就像是一张有纹路的织物。这种纹路应该是均匀的，那些特别突出的字符就像污点一样会分散人的注意力。

9. Degree of the Counter Opening 字谷开放的程度

很多字体的设计中，字谷都封的太死了。这会导致识别困难，有人会把这个“c”当成一个“o”。但是，假如字谷过于开放（象 Frutiger 那样），内外空间的界限又会变得模糊，这样便产生大量的白空间，看上去会很难看。

 
10. The Fish Effect 鱼眼效应

当内部空间明显大于字符间距时，这种效应就很突出。因此当一个圆形字母和一个直笔画的字母连排时，看上去就会很怪异。

11. External counter 外部空间

一些小细节可以让一款正文字体更易于识别。如果外部空间经过很好的设计，文本就更易于阅读。想想小写“n”中竖笔和弧线的连接部分，或是‘rn’ 和‘m’的区别。

12. Internal counter 内部空间

如果‘a’ 或‘e’的字“眼”过小，在小字号的时候它们可能根本就等于没有。在大多数语言中这些都是最常用的字母，所以这可不是什么小问题。
13. Is the set complete? 字符集是否完整

不知道有多少次，我们发现我们所用的字库竟然缺少一些字符，并且总是到我们的设计将要完成的时候才发现。真恐怖！我们不得不改换字体然后重新校对全部的文本。许多字体设计师会漏掉一些字符，诸如“ñ”、重音符、波浪线、句号、逗号甚至是数字… 所以在你使用一个字体之前务必检查它的完整性。
14. The family 字族

还有一个重要的事情是，检查字族是否足够丰富，是否包含了不同的磅数、粗细以及意大利体等等。确定它的意大利体和常规版本一样易于阅读。它们有时会包含许多洛可可风格的细节。
15. Letter spacing 字符间距

      有些字体的字间距很糟糕，甚至根本就不设置字间距，它们当然不会有什么好的效果。一个好的设计师会校正那些不太好的字间距，但假如全部的字间距都很糟糕，那你就有得忙了。当然有些软件会有一些辅助功能，但永远比不上一个好的字体设计师所做的。所以尽量采用那些字间距和量度合适的字体。

Web 2.0 Badges – .一套免费的超酷web小图标

Mycoolbutton – 简洁的web2.0按钮生成器

Stripe Generator – 专业的流行web2.0 stripe生成器

Ajax loading - web2.0 loading 图片生成器

Webscriptlab – ajax的loading图片生成器

Roundedcornr – 圆角在线生成器

Web 2.0 logo creatr – 简洁的web2.0风格logo生成器

http://creatr.cc/creatr/ – another simple web 2.0 logo creator.另一个简洁的web2.0logo生成器

Web 2.0 Free Logo Generator 免费web2.0 logo生成器

Web20generator – web2.0网页模板生成器

Buttonator – 在线按钮生成器,提供了特殊功能

Web 2.0 Stylr - web2.0风格的logo发生器.

http://lab.rails2u.com/bgmaker/ - 在线背景图像生成器

head区必须加入的标识

公司版权注释 <!— The site is designed by yourcompany,Inc 03/2001 —>

网页显示字符集 例如：
简体中文：<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=gb2312″>
繁体中文：<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=BIG5″>
英 语：<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=iso-8859-1″>

原始制作者信息 <META name=”author” content=”webmaster@xiamian.com“>

网站简介 <META NAME=”DESCRIPTION” CONTENT=”这里填您网站的简介”>

搜索关键字 <META NAME=”keywords” CONTENT=”关键字1,关键字2,关键字3,…”>

网页的css规范 <LINK href=”style/style.css” rel=”stylesheet” type=”text/css”>

网页标题 <title>这里是你的网页标题</title>

head区可以选择加入的标识

设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<META HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”>

禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>

用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV=”Window-target” CONTENT=”_top”>

自动跳转。
<META HTTP-EQUIV=”Refresh” CONTENT=”5;URL=http://www.yahoo.com”>
5指时间停留5秒。

网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<META NAME=”robots” CONTENT=”none”>
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。

收藏夹图标
<link rel = “Shortcut Icon” href=”favicon.ico”>

JS调用规范

所有的javascript脚本尽量采取外部调用
<SCRIPT LANGUAGE=”JavaScript” SRC=”script/xxxxx.js”></SCRIPT>

CSS书写规范

所有的CSS的尽量采用外部调用
<LINK href=”style/style.css” rel=”stylesheet” type=”text/css”>

书写时重定义的最先，伪类其次，自定义最后（其中a:link a:visited a:hover a:actived 要按照顺序写）便于自己和他人阅读。

为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。

CSS推荐模板。

<style type=”text/css”>
<!—
p { text-indent: 2em; }
body { font-family: “宋体”; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table { font-family: “宋体”; font-size: 9pt; line-height: 20px; color: #000000}
a:link { font-size: 9pt; color: #0000FF; text-decoration: none}
a:visited { font-size: 9pt; color: #990099; text-decoration: none}
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active { font-size: 9pt; color: #FF9900; text-decoration: none}
.blue { font-family: “宋体”; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
–>
</style>

body标识

为了保证浏览器的兼容性，必须设置页面背景<body bgcolor=”#FFFFFF”>

font-style设定斜体，比如font-style: italic;
font-weight设定文字粗细，比如font-weight: bold;
font-size设定文字大小，比如font-size: 12px;（或者9pt，不同单位显示问题参考CSS手册）
line-height设定行距，比如line-height: 150%;
color设定文字颜色（注意不是font-color），比如color: red;
font-family设定字体，比如font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;（这是通用的写法）

以上都可以写在一行font属性里（除了color属性需要单独写）：
font: italic bold 12px/150% “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

2、如何控制段落排版 —— 使用margin，text-align

中文段落使用<p>标签，左右（相当于缩进）、段前段后的空白，都可以用margin。比如：
p{
 margin: 18px 6px 6px 18px; /*分别是上、右、下、左，十二点开始的顺时针方向*/
}
文字的对齐方式用text-align，比如：
p{
 text-align: center;  /*居中对齐*/
}
对齐方式还有left、right和justify（两端对齐）

PS.谈起margin，我习惯于在写CSS的时候为所有的标签定义margin: 0; 因为时而出现由于默认的margin值导致页面排版问题，而自己找不到原因（特别注意的是ul/ol/p/dt/dd等标签）

3、竖排文字 —— 使用writing-mode

writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。
比如：
p{
 writing-mode: tb-rl;
}
可以结合direction排版。

4、项目符号的问题 —— 使用list-style

在CSS里项目符号有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower- roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字 母）、none（无）。比如设定一个列表（ul或ol）的项目符号为方块，如：
li{
 list-style: square;
}
另 外list-style还有一些值，比如可以采用一些小图片作为项目符号，在list-style下直接写url(“图片地址”)就可以了。注意如果一个 项目列表的左外补丁（margin-left）设为零的时候，list-style-position: outside（默认是outside）的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小，圆点和方块始终是那么点（list-style的大小是根据内容的font-size决定的）。并且不能设定垂直方向上的对齐。

5、首字下沉 —— 使用:first-letter

伪对象:first-letter配合font-size、float可以制作首字下沉效果。
比如：
p:first-letter{
 padding: 6px;
 font-size: 32pt;
 float: left;
}

6、首行缩进 —— 使用text-indent

text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写：
p{
 text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
}
如果font-size是12px的话，那么text-indent: 2em则缩进24px。

7、关于汉字注音 —— 使用ruby标签和ruby-align属性

比如说<ruby>注音<rt style=”font-size: 11px;”>zhu yin</rt></ruby>，可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的，具体可以自行查阅 ruby-align项。

8、固定宽度汉字截断 —— 使用text-overflow

用后台语言可以对从数据库里的字段内容做截断处理，比如说截12个汉字（之后用省略号）。但是有时还需要html标签的过滤等，而用CSS来控制则没有这个问题。比如对列表应用以下样式：
li{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
不过只能处理文字在一行上的截断，不能处理多行。

9、固定宽度汉字（词）折行 —— 使用word-break

举个例子，比如说要在一个固定宽度容器里面显示很多地名（假设以空格分隔），为了避免地名中间断开（即一个字在上面而另一个字折断到下一行去了）。则可以使用word-break。比如：
<div style=”width:210px;height: 200px;background: #ccc;word-break:keep-all”>
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
</div>
值得注意的是里面的空格不能以&nbsp;代替（最少要有一个软空格）。

10、关于box的hack —— 只用margin
我 发现关于盒模型的hack，主要是因为用了固定的width和padding造成的。这样IE里面会多计算width的值，所以习惯于在固定宽度的div 里面嵌套一个div，里面那个div有margin值但是没有width和height。这样可以模拟实现padding的效果，语义上基本也过得去。

11、字符缩进妙用 —— text-indent
比如说list元素，如果前面不用list-style-image（因为有时候比较麻烦），而用了background定义，那么为了避免padding带来的宽度上的错误，可以使用text-indent。不仅仅是list，可以是一些title级的东西，呵呵。另外text-indent也经常用来做Image Replacement。