关于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>

 

 

转载于:https://www.cnblogs.com/weiqingyang/p/4090476.html