960框架

Posted 2020-09-25

首先当然要去官网下载相关文件
（1）在html文件中引入相关的外部CSS文件：

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

在这必须解释一下，960.css为主要排版样式，缺它肯定不行。还有两个css文件：reset.css和text.css，它们的主要作用是为了消除浏览器间显示差异准备的，前者消除了html标签在各浏览器间的差异，而后者则主要针对的是字体

（2）定义一个DIV大容器，放下整个页面：

<div class="container_12">
</div>

在960框架中，你可以选择两种类名为.container_12 和 .container_16的容器。这两种容器都是960px的宽度(这就是为什么叫做960 grid),但他们的不同之处是它们包含不同数量的列。顾名思义，.container_12的容器被分为12列，而 .container_16被分为16列。这两种960px宽的容器都是水平居中的。

class="clear"，什么时候用呢。当你想换行的时候就使用它，即使一个横行只有grid_5和grid_4，就是说没有占满12列，也可以在其后增加一个让其后的任何内容都从下一行行首开始
  同时，为了清除它对身后的CSS设置影响，建议在每个横向DIV大块做完之后，都加上class="clear"进行收尾

 <div id="container" class="container_12">
        <div id="logo" class="grid_12"></div>
        <div class="clear"></div>
        <div id="left" class="grid_4"></div>
        <div id="main" class="grid_8"></div>
</div>

默认情况下，左右margin都是10px，则列间距为20px，但最左边的容器不需要左margin，最右边的容器不需要右margin，所以要改成这样，用alpha出去左margin，omega除去右margin：

<div id="container" class="container_12">
        <div id="logo" class="grid_12"></div>
        <div class="clear"></div>
        <div id="left" class="grid_2 alpha">左侧导航栏</div>
        <div id="main" class="grid_8">主版块</div>
        <div id="right" class="grid_2 omega">右侧广告栏</div>
        <div class="clear"></div>
</div>