当你看着上面这些图，把每个深蓝色的条块当成是960栅格系统中的一个CSS类。如果你需要创建一个宽度和那些深蓝条相同的区域，你只需要把相应的类值放进你的div里，就行了！

类都简单根据它们的大小来命名，grid_1是最窄的，grid_12是最宽的（16栏中grid_16是最宽的）。

重新再来看上面那两张图，不过这次不要考虑宽度，想想它们各自所代表的CSS类。

这样的命名系统使它能在短时间内搞定复杂的布局。要填充一个页面的宽度，只需要记住类的数字加起来等于12（12栏）或者16（16栏）就行了。

比如说，使用12栏的版本，如果需要3个并排的文字分区形成3栏式布局，只需要为每一个分区赋予grid_4的类使它们加起来等于12.

相同的，如果采用16栏版本，想要4列并排的布局，那也是每列赋予grid_4的类，加起来等于16.

为了确保调用正确，记得把你放12栏元素的div加一个名为container_12的类，同样为16栏元素的div加一个名为container_16的类。

如果你从来没有用过960栅格系统，我相信你现在一定已经明白原来使用栅格系统快速建立布局是如此简单的事。

左右移动

通过push和pull CSS class，可以实现横向的移动每一个栅格系统里的元素。

以下面两个布局为例，前一个是标准的使用grid_3 class的4栏布局，后一个则是分别对第一列使用了push对最后一列使用了pull的效果。

你可以随心所欲定义移动的长度，如果想向右移动2列，那就是push_2,以此类推。

push/pull的设定对用html来呈现页面也有很大的影响。

举个例子，在下面这个布局中，想像logo处是网站的logo，它是整个页面上的第一个元素。作为页面上最重要的元素，你希望在html里把它放在首位。但视觉上，你又希望它呈现在页面的顶部中间。

在使用push/pull之前，

如果要使logo在视觉上居中，你需要这样写：

<div class=”grid_6 push_3″>
<p>logo</p>
</div>

<div class=”grid_3 pull_6″>
<p>text column</p>
</div>

<div class=”grid_3″>
<p>text column</p>
</div>

<div class=”grid_12″>
<p>big box</p>
</div>

然后你就得到了这样的布局：

既保证了logo在html中居首位，又保证了视觉上logo居中。

大片空白区域

你会发现你经常希望创建一些空白区域，这时候你可以使用prefix和suffix的class，使用方式和push/pull相同。

比如你想在一个元素前留下一列宽的空白区，就用prefix_1的class，如果空白在后面，就用suffix_1.

上面是用了suffix_3在grid_6之后创建了一个宽度为3列的空白区。

开始和结尾

最后一点，你可能会用到alpha和omega类，表明栅格中的子栅格，alpha是第一个子栅格，omega则是最后一个。本质上，这些类提供了合适的外边距，方便在栅格之间再构建栅格单元。

回顾一下

学完上面这些内容，你现在可以称之为一个960栅格系统专家了。

有5个概念你需要记住：

1.  12格使用container_12的类,16格使用containeer_16的类。

2.  使用class grid_1,grid_2,grid_3…来设定你的列宽，如果想横向填满页面，确保数字加起来等于12或16.

3.  使用push/pull来单独移动每个栅格，不会影响到html里写入的位置。

4.  使用profix/suffix来创建空白区域。

5.  使用alpha/omega为嵌入的栅格设定外边距。

960栅格系统里同样包含一份CSS Reset，它是基于更为流行的Eric Meyer CSS reset创建的，如果你喜欢就留着，不喜欢就扔了吧。

为什么我需要一个网格系统？

960栅格系统和其他类似的工具提供了快速简便的方法来用CSS创建基于网格的布局。它们提供经过跨浏览器测试后的优化的预设列宽来给你放进内容。

在CSS3之前，要想不通过冗长的数学运算就把页面分好栏，几乎不可能。

例如，如果你有一个1000像素宽的容器，你想分成三列，那每栏就是333又1/3像素（不是个舒服的整数）。此外，这样分出来的列会彼此撞上，因此又需要每边加上外边距。如果每列设定一个10px的外边距，就必须把每列的宽度各减少20px。这样就是3列，每列313px，加上每边10px的外边距。即便如此，整个的宽度也只有999px，而不是1000px.

3栏下面又想分个4列，那你就得从新算过。从1000px里减去外边距的80px，再把剩下的920px除以4，得到每列宽度230px.

最后，如果你想给页面加上一个占页宽1/3的侧边栏，你需要给你的内容区留下750px，侧边栏250px，减去外边距40px，得到一个730px的内容区和230px的侧边栏。

晕了么？

别的设计师也这样晕过。当然这不是什么复杂的火箭科学，但你一定不会想在接手每个项目后一遍遍重复这个过程。

解决方案？找别人来搞定这些疯狂的列宽，把它们全丢进CSS文件里，你只需要免费下载就行了。（这个人正是Nathan Smith，960栅格系统的创建者）

960栅格系统

960栅格系统，简单来讲，就是用960宽度的网格来布置网站的方法。

使用960宽度的原因在于，考虑进列宽和外边距的因素后，以960来分，可以得到多种干净的整数列宽。而且，它在大多数屏幕上有不错的现实效果。

960栅格系统有两种主要变体：12列格和16列格（24列格也同样包含在内，以便万一有额外的需要）。

在12列的版本中，最窄的列宽为60px，之后每列增加80px.

因此，可用列宽为60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860和940.

同样的，在16列的版本中，最窄的列宽为40px，之后每列增加60px.

可用列宽为：40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880和940.

（待续。。。）

在费城的Web App Masters Tour上，PA Mark Trammell介绍了Twitter让新用户变成忠实回头客的方法。其间谈到了产品服务的三种层次，分别以磁铁，钩子和胶水来形容。

磁铁：吸引人们去使用某种产品，但无法留住他们。以Twitter为例，名人就是Twitter吸引人们来访的一个强力磁铁，但人们往往不会因此就选择留下

钩子：会把离开的人重新钩回来。家庭成员之间的联系和各领域的专家让人们真正迷上了Twitter

胶水：混合着新闻与消息来源，名人，亲朋好友和本地化商业信息的胶水，只要混合比例适当，才能最终真正粘住用户。

有点意思，摘记下来。

奇艺网内测进入第二阶段，我们也总算拿到了邀请，迫不及待要体验一下这个号称关注用户体验的高清视频网站。

总体感觉奇艺视频画面清晰度高，播放流畅，整体风格清新简洁，相对不足的是，目前内容略显单薄，且网站对带宽要求较高。

Hulu风格，简洁清新

打开奇艺，整个页面感觉清新简洁，确实和Hulu风格很相似。视线很容易就被焦点区轮换播放的高清图片吸引。切换按钮也和hulu的样式相同。焦点区占了首屏一半的区域。值得注意的是，每张大图出现的时候，文字并没有同时出现，而是先出现完整的高清图片，文字再在1秒以后淡入，这在视觉上更让人感觉简洁，同时用户先看到纯粹的图片，也加强了图片本身的冲击力和吸引力。

焦点区右侧上部为推荐视频，下部是奇艺资讯。点缀的绿丝带使暗色调的焦点区生动起来，不那么沉重。仔细看这部分区域是遮盖在头图上层的一个圆角黑板，不会随焦点图的切换而变化，内容和左侧的图片也没有什么关系。这可能会造成某种程度的疑惑，因为根据用户以往的使用经验，会把图附近的文字当做是对图的说明；另外鼠标在黑板上任意位置都可点击，但只有文字高亮的情况下才会进入当前文字所对应的视频，非高亮状态下点击黑板上任意位置都是进入左侧图片对应的视频，或许黑板区域点击区的分割应该更清晰些。

首页栏目布局并未采用Hulu式的由左至右模式，而是由上至下分别为电影、电视剧、纪录片、综艺版块，更符合国内用户使用习惯。每个版块都是左中右三栏式结构，左侧为分类，中间是图文推荐，右侧为点播排行，整体布局简洁明了。

贴心小应用

首页焦点区右上方还有两个贴心的小功能，一个是播放记录，用户之前看过的视频，下次通过点击”播放记录”选项，会提示用户观看过的视频及观看截至时间，点”继续观看”可自动续播，一个月前酷6剧场率先推出自动续播功能，但并没有在用户经常访问的首页提供该功能，只在播放页有此功能，感觉是没有考虑清楚用户的使用路径。因此奇艺网的这个功能可以看成是对酷6剧场该功能模仿基础上的优化。如图，上为奇艺网的播放记录，下为酷6剧场的观看历史

另外一个小应用是”随心看视频”，提供了开心、无聊、悲伤、郁闷四种不同心情的头像，对应推荐不同的视频

高清体验，品质感强

除了首页的高清大图，奇艺的视频默认即为高清模式，看起来确实很清晰，品质感强，另外也有超清、流畅模式供选择。高清模式下，在1M以下带宽下会比较卡，1M以上会感觉很流畅。

突出”看”，简化”评”

播放页的Logo和全局导航变窄了，视觉重心很自然落到视频上。奇艺的视频默认尺寸为640*520。视频下方是视频相关信息，用Tab切换，节省空间；用户评价只有简单的评分功能，并没有开放评论。看来奇艺的重心在”看”，保持单纯，暂时没有加入更多让用户参与互动的功能。整个页面只有一屏多一点，非常简洁。

细节体验优秀

在视频开始自动续播时，奇艺会告诉用户为什么从这儿开始播，并提供”从头观看”的选项。让用户使用起来清楚明了。

在你拖动滑块时，会出现奇艺的吉祥物？加载画面

同时奇艺会很体贴地以为你是想跳过片头片尾，在播放器下方会显示”跳过片头片尾”的提示

另外”关灯”功能可以将页面其他部分全部隐去，变黑，只剩下播放器，让用户看视频时毫无干扰。

此外还有个”分享”功能暂时没有开放。

其他

分类：

奇艺在列表页提供多重分类检索功能，考虑到很多用户习惯使用列表来查找视频，多重条件的检索确实可以优化用户检索流程。

速度：

首页加载速度：非常快，工具测速结果为1.67s

视频播放页加载速度：感觉上需要等待片刻，大约1、2秒的时间，视频开始播放，工具测试结果为3.02s

视频播放：播放感觉流畅，拖动滑块加载时间不太稳定，试了几个不同视频，2-12s不等

——————–邀请函广告分割线——————————————————————————

如果你需要试用邀请，可以留言写下你的email^^