方便快捷的布局法——利用960GS框架

    今天经理告诉我一个非常好用的一个布局框架！利用960GS框架制作页面，几乎不用再写兼容性，再也不用为兼容各种浏览器而头疼了！记下来大家一起分享下！~

    1. 960GS框架官网：960.gs， http://960.gs/demo.html

   2. 非常有用的讲解视频页面链接：http://www.56.com/u36/v_NTc3OTE3Mzc.html

   3.  使用步骤

第一步：

下载960GS框架，进入网站960.gs，点击页面头部的“Download”下载

第二步：

在html代码中引入3个需要使用的css文件

<link rel="stylesheet" type="text/css" href="css/960.css"/>

<link rel="stylesheet" type="text/css" href="css/reset.css"/>

<link rel="stylesheet" type="text/css" href="css/text.css"/>

第三步：

来试试效果

在body中添加如下代码

    <div class="container_12 clearfix">

    <div class="grid_1">960网格布局系统</div>

      <div class="grid_1">960网格布局系统</div>      

<div class="grid_1">960网格布局系统</div>

<div class="grid_1">960网格布局系统</div>

        <div class="grid_1">960网格布局系统</div>

        <div class="grid_1">960网格布局系统</div>

        <div class="grid_1">960网格布局系统</div>

        <div class="grid_1">960网格布局系统</div>

        <div class="grid_1">960网格布局系统</div>

        <div class="grid_1">960网格布局系统</div>

        <div class="grid_1">960网格布局系统</div>

        <div class="grid_1">960网格布局系统</div>

</div>

第四步：

自己拷贝代码看看效果如何 

    可以看到这里将整个页面均分成了12等份

 

    OK，到这里，我们只是做了一个960GS的例子。下面该是了解下960GS的基本知识了。

 

4. 下面是有关960GS的一些基本知识，请务必掌握这些原则。

• 页面宽度：960px
• 容器：container_X，后面的X表示的数字，例如container_12表示将页面进行12等份，container_16表示将页面进行16等份。960GS中有12、16、24、32四种布局方式。
• 网格：grid_Y , 后面的Y同样表示数字，例如grid_1表示第一等份，如果容器为12等份，则Y的最大值为12。Y表示的第几等份，也可以说是第几列。
• Margins：每个grid_Y类都有10px的左margins和右margins，也就是说两列之间的margin和是20px。有时候我们不需要这些margin，在grid_Y后面添加上alpha去除左边margin，在grid_Y后面添加omega去除右边margin。
• 范例：去除左边的margin
• <div  class="grid_1  alpha">grid_1</div>
• 范例：去除右边的margin
• <div  class="grid_1  omega">grid_1</div>
• 添加样式：Styling
• 开发网站，我们不可能全部都使用960GS的样式，我们还需要添加一些自己的样式进去，由于CSS使用优先级的形式来觉得如何解释样式，而id要比class的优先级高。这样我们就可以在我们的独立CSS文件中以id选择符创建个性化的样式了。如果凑巧有的样式属性与960相同但值又不同，浏览器会优先选择你的css文件中的样式。