IT北瓜

      960 Grid System是一个非常棒的布局辅助设计系统，以960PX为基准宽度提供了12列和16列两种布局模式（PS：目前官方已经提供了24列的布局模式，相信作者以后还会提供更多的布局模式）。

      1：alpha与omega

      960 Grid System的布局宽度为960PX，但由于每列左右均由10PX的margin（外补丁），因此内容宽度实际为940px。

/*
alpha：用于清除左边10px的margin
omega：用于清除右边10px的margin
*/

      PS：从作者取alpha与omega这两个名字可以想象一下或许作者很热爱希腊文化。alpha（α）在希腊字母表里，它是第一个字母，读作“阿尔法”（阿拉法），代表开始；omega（γ）在希腊字母表里，它是最后一个字母，读作“欧美噶”（俄梅嘎），代表终了。

     2：prefix_XX与suffix_xx

/*
用于在每个单元网格的前面或后面添加空白的列（栏）
*/
/*
用法：
<div class="grid_1 prefix_15">IT北瓜</div>
*/

      3：clear与hr

/*
用于清除层的浮动
*/
/*
用法：
<div class="clear"></div>
*/
/*
但假如你查看过官网主页的源代码你会发现，作者用的是<hr />
*/
/*
用法：可参考官网主页的源代码
<hr />
*/

     4：push_xx与pull_xx

/*
这是2009-06-29更新新增的类，用于重新定制布局顺序
*/
/*
用法：引用官网主页源代码
*/
<h1 class="grid_4 push_4">
    960 Grid System
</h1>
<!-- end .grid_4.push_4 -->
<p id="description" class="grid_4 pull_4">
    <a href="files/960_download.zip">Download</a> &larr; Templates for <a href="http://www.adobe.com/products/fireworks/">Fireworks</a>, <a href="http://www.adobe.com/products/indesign/">InDesign</a>, <a href="http://www.inkscape.org/">Inkscape</a>, <a href="http://www.adobe.com/products/illustrator/">Illustrator</a>, <a href="http://www.omnigroup.com/applications/omnigraffle/">OmniGraffle</a>, <a href="http://www.adobe.com/products/photoshop/">Photoshop</a>, <a href="http://office.microsoft.com/en-us/visio/default.aspx">Visio</a>, <a href="http://www.microsoft.com/expression/products/Design_Overview.aspx">Expression Design</a>. Sketch PDF. CSS code. The 960.css file is 5.4 KB. View <a href="http://bitbucket.org/nathansmith/960-grid-system/">repository</a>.
</p>
<!-- end #description.grid_4.pull_4 -->
<hr />
<div class="grid_6">
    <p>
        <a href="http://www.spry-soft.com/grids/"><img src="img/tool_css.gif" alt="Custom CSS generator" width="460" height="60" /></a>
    </p>
</div>
<!-- end .grid_6 -->
<div class="grid_6">
    <p>
        <a href="http://gridder.andreehansson.se/"><img src="img/tool_bookmark.gif" alt="Grid overlay bookmark" width="460" height="60" /></a>
    </p>
</div>
<!-- end .grid_6 -->

      5：container_xx与grid_xx

/*
这是该系统最基本最重要的用法，其中xx代表列数
*/
/*
用法：
*/
<div class="container_12">
    <div id="sidebar" class="grid_2">sidebar</div>
    <div id="content" class="grid_10">
        <div id="main_content" class="grid_6 alpha">main content</div>
        <div id="photos" class="grid_2">photo’s</div>
        <div id="advertisements" class="grid_2 omega">advertisement</div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>