首页 > 代码库 > 关于960框架小谈
关于960框架小谈
CSS框架是一种你能够使用在你的web项目中概念上的结构，是别人已经写完的，而且很完善的CSS定义集合。CSS框架一般是CSS文件的集合，包括基本风格的字体排版，表单样式，表格布局等等
————简单的来说就是站在巨人的肩膀上面，利用别人写好的东西，不用自己在麻烦一次
浏览器不兼容的问题-----这一直是一个心痛的问题
因为在不同的浏览器中所得到的网页显示效果是不同的，这就给网页设计限制了很大的发展空间，虽然有很笨拙的方法去避免这种无法兼容的尴尬
男一号——960grid
聪明的网页设计者发现，其实无论在哪一个浏览器里，也无论是否宽屏电脑，整个网页只要让它占据正中的位置不就行了吗
聪明的前辈就发现只要是960px就行了，让整个网页显示在正中间，不会跑偏。所以，在html+css中遇到的棘手的浏览器不兼容的问题在960的严格限制下就好多了。
由于电脑显示器有方屏、宽屏，宽屏又分16:9和16:10。分辨率更是多种多样，这么多不同模式下得用户如何能看到外观整齐、一致的网站呢？人们发现一个奇妙的事情：960px的宽度是Very Good！无论什么屏，那种分辨率都通吃。
现在有人专门开发了一组网站架构CSS规则，只要遵守这些简单的规则（其实就是class类），你就能快速设计出960px宽度的网页结构来。
这，就是960Grid。
官网：http://960.gs/
如何使用960Grid框架？
（1）在html文件中引入相关的外部CSS文件：
主要有是那个960.css为主要排版样
还有两个css文件：reset.css和text.css，它们的主要作用是为了消除浏览器间显示差异准备的，前者消除了html标签在各浏览器间的差异，而后者则主要针对的是字体。
（2）定义一个DIV大容器，放下整个页面：
grid其实就是一个容器，在这个容器里，已经给分好了“块，所以这个容器就给平均分成了块，有12和16两种，我们用.container_12 和 .container_16来区分
简而言之就是将这960分成12或者16块，到底是用12列的还是16列的这就要你来规定了
div class="container_12"></div>——12块
<div class="container_12">
<div class="grid_12"></div>-------这一块使用了一个12列的grid
</div>
划线后数字就是该DIV所占的列数。当然为了布局方便，我们一定会加入更多的class或id的，最后如下：
<div class="container_12">
<div class="grid_12 logo"></div>
</div>
案例2：将网页均匀的分开
<div class="container_12">
<div class="grid_3 first">第一块</div>
<div class="grid_6 second">第二块</div>
<div class="grid_3 three">第三块</div>
</div>
css
.first{
height: 200px;
}
.second{
height: 200px;
}
.three{
height: 200px;
}
我们可以很明确的看到，两个之间有空缺，这是为什么呢？
因为平分了12列，每两列之间都会有一个留白，就是所谓的margin，在默认的情况下，每一列的左右都会留出10px的白，那么相邻的两列之间的margin就是20px
alpha和omega
alpha是去除左边的margin，omega是去除右边的margin
然后要是两边都想去除呢？
<div class="grid_3 first omega">第一块</div>
<div class="grid_6 second alpha omega">第二块</div>
<div class="grid_3 three alpha">第三块</div>
那如果我不想在同一行完成呢
尝试一下——
<div class="clear"></div>
为了清除它对身后的CSS设置影响，建议在每个横向DIV大块做完之后，都加上class="clear"进行收尾。
<div class="grid_3 first omega">第一块</div>
<div class="clear"></div>
<div class="grid_6 second alpha omega">第二块</div>
<div class="clear"></div>
<div class="grid_3 three alpha">第三块</div>
注意了：
<div class="grid_12 nav">——还记得这个玩意吗
<ul>...</ul>
</div>
关于960框架小谈