960网格系统的使用

  

 

 

     虽然开始要费时间学习， 但是磨刀不误砍柴工，学习CSS框架能够节省更多的开发时间，显著提高工作效率。下面是作用960网格系统的方法。

• 去官方下载960 Grid System，并解压到本地目录(比如css)。
• 按照顺序引用三个CSS文件。

 

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

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

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

 

 

 

 

 

 

 

 

• 定义Containers(容器)，分为两种12(每份80px)和16(每份60px)等分，总宽度为960px。

 

<div class="container_12"> 
<div class="container_16"> 

 

 

 

 

• 在容器内定义Grids (网格)。网格的总数必须等于container(容器)的数量

 

<div class=″container_16″>

    <div class=″grid_4″>宽度为：60px*4=240px-20px=220px(20px为左右各10px间隙)</div>

    <div class=″grid_12″>宽度为：60px*12=720px-20px=700px(20px为左右各10px间隙)</div>

</div>

 

 

 

 

• 设置网格的Margins（间隙）。

      alpha类：左边间隙为0，margin-left: 0; omega类：右边间隙为0，margin-right: 0;

使用方法:

<div class=”grid_2 alpha”>左边间隙为0</div>

<div class=”grid_2 omega”>右边间隙为0</div>

 

•  留空

prefix：左边留空 suffix：右边留空

代码如下:

 

<div class="container_16">

<div class="grid_1 prefix_13 suffix_2">

    <p>

        宽度为40px，左留空13*60px=780px；右留空2*60px=120px

    </p>

</div>

</div>

 

• 清除浮动

块与块之间必须添加"clear"以清除浮动

 

<div class="container_16">

    <h2>

        16 Column Grid

    </h2>

    <div class="grid_16">

        <p>

            940px

        </p>

    </div>

    <!-- end .grid_16 -->

    <div class="clear"> </div>

    <div class="grid_1">

        <p>

            40px

        </p>

    </div>

    <!-- end .grid_1 -->

    <div class="grid_15">

        <p>

            880px

        </p>

    </div>

</div>

 

• 自定义样式。

 

<div class=”container_12″>
<div id=”sidebar” class=”grid_2 alpha”>sidebar</div>
<div id=”content” class=”grid_6″>main content</div>
<div id=”comments” class=”grid_2 omega”>comments</div>
</div>

 

由于CSS使用优先级的形式来觉得如何解释样式，而id要比class的优先级高。这样我们就可以在我们的独立CSS文件中以id选择符创建个性化的样式了。如果凑巧有的样式属性与960相同但值又不同，浏览器会优先选择你的CSS文件中的样式。

 

 

此文由站长百科用户Zhou3158于2010年2月3日 (星期三) 07:32最后更改于站长百科

地址: http://www.zzbaike.com/wiki/960%E7%BD%91%E6%A0%BC%E7%B3%BB%E7%BB%9F%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95。