css+960

        对于css我在去年就接触过，当时仔细的从头到尾学了一遍，看了教程也看了网上很多人的学习体会，说实话对我学习帮助很大，不能说学的很透彻，但最基本的东西难不住我，加上在学css之前老师给我的建议先学的html，这样再去看css的框架美化就相对来说容易很多，所以当时按照书来学习然后做了几个简单的小例子觉得html+css真的太配了，随着学习的深入，特别是遇到浏览器不兼容的问题的时候，html+css又似乎有点逊色了，因为在不同的浏览器中所得到的网页显示效果是不同的，这就给网页设计限制了很大的发展空间，虽然有很笨拙的方法去避免这种无法兼容的尴尬，但是对于网页设计者来说，解决这个问题才能更好的发展，就在此时，老师给我们介绍了一种非常好的方法，就是960grid，聪明的网页设计者发现，无论在哪一个浏览器里，也无论是否宽屏电脑，整个网页只要让它占据正中的位置不就行了吗？他就不会再跑偏了，那么究竟这个正中的位置大小是多少呢，聪明的前辈就发现只要是960px就行了，让整个网页显示在正中间，不会跑偏。所以，在html+css中遇到的棘手的浏览器不兼容的问题在960的严格限制下就好多了。

        初步接触960时，我错过了和大家一起学习的机会，因此，在我得知世界上竟然还有这样神奇的一个东西之后，我上网查了一下，学习了学习，发现真的挺不错的。比较简单，不复杂，容易接受。

         首先，我去了960 Grid System看了看，下载了960的文件，里面包含了很多的文件，其中就有css的文件包，其中就有个960.css，后来上网上看到有位网友提到，“不要编辑960.css文件，如果你修改了它，那么你今后将无法更新这个框架。”看来这个960的框架已经有人给我们写好了，我们直接拿过来用就行了。只是需要在编辑的时候调用就行了，这样就省了写代码的时间。在调用的时候只要输入这几行代码就行了：

 
 

        grid其实就是一个容器，在这个容器里，已经给分好了“块”，我们看网页其实他就是几个块嘛，所以这个容器就给平均分成了块，有12和16两种，我们用.container_12 和 .container_16来区分，简而言之就是将这960分成12或者16块，这是对从上到下整个网页来说的，因此用列来说更为合适，到底是用12列的还是16列的这就要你来规定了，然后再看你到底是要怎么安排你的布局了，比如，你要将一个12列的容器就分成三部分，然后代码就可以这么写：

 

3″>这是第一块

 

6″>这是第二块

 

3″>这是第三块

  

看出来了吧，只要你分的每块占得总数加起来是你要的容器大小就行了，当然，一般来说选择的都是12列的容器。当然，仅仅靠这点还不足以将我们想要的表现出来，因为平分了12列，每两列之间都会有一个留白，就是所谓的margin，在默认的情况下，每一列的左右都会留出10px的白，那么相邻的两列之间的margin就是20px，但是整个网页的最左和最右是不用留白的，如何将最左边和最右边的margin的留白去掉呢，那就用到了两个属性了，就是alpha和omega，alpha是去除左边的margin，omega是去除右边的margin，这样下来，就能将页面对齐了，那么代码就成了

 

3″alpha>这是第一块

 

6″>这是第二块

 

3″omega>这是第三块

  

当然，还有两对属性用来安排页面，一对是prefix和suffix，在英语的解释中，prefix是前缀的意思，suffix是后缀的意思，我从汉语的解释上理解就是将你要动得内容放到块前面或者后面，另一对是pull和push，这一对就更简单了，拉和推，就是将要动的块往哪边pull和push了，但是这是一个抽象的概念，不像所谓的前和后那么容易理解，那天老师在给别人演示时我也上前听了一下，原来要理解这个也不难，到底要怎么pull，怎么push也是有说法的，以我们人的视觉去看网页从左到右，那么将东西往右那就叫push，往左就是pull，这完全是一种习惯的养成。听了老师的解释就明白了很多，他的属性设置和alpha，omega是一样的。

        就这么用960是不行的，因为你这样一来就把整个页面都分了，在下面的部分也许不能这么分布，所以又用到了另一个属性，就是清除属性，clear，在一部分结束时下面加上

作为清除指令就能保证下面的部分不受上面的影响了。

       总而言之，言而总之，使用960还是很方便的，当然现在学的还只是960的一部分东西，希望能继续学习使用960，并不断学习发现新的东西，然后跟大家一起分享。