关于960框架小谈

  CSS框架是一种你能够使用在你的web项目中概念上的结构,是别人已经写完的,而且很完善的CSS定义集合。CSS框架一般是CSS文件的集合,包括基本风格的字体排版,表单样式,表格布局等等

————简单的来说就是站在巨人的肩膀上面,利用别人写好的东西,不用自己在麻烦一次

浏览器不兼容的问题-----这一直是一个心痛的问题

因为在不同的浏览器中所得到的网页显示效果是不同的,这就给网页设计限制了很大的发展空间,虽然有很笨拙的方法去避免这种无法兼容的尴尬

 

男一号——960grid

聪明的网页设计者发现,其实无论在哪一个浏览器里,也无论是否宽屏电脑,整个网页只要让它占据正中的位置不就行了吗

聪明的前辈就发现只要是960px就行了,让整个网页显示在正中间,不会跑偏。所以,在html+css中遇到的棘手的浏览器不兼容的问题在960的严格限制下就好多了。

 

由于电脑显示器有方屏、宽屏,宽屏又分16:916:10。分辨率更是多种多样,这么多不同模式下得用户如何能看到外观整齐、一致的网站呢?人们发现一个奇妙的事情:960px的宽度是Very Good!无论什么屏,那种分辨率都通吃。

        现在有人专门开发了一组网站架构CSS规则,只要遵守这些简单的规则(其实就是class类),你就能快速设计出960px宽度的网页结构来。

        这,就是960Grid

        官网:http://960.gs/

 

如何使用960Grid框架?

1)在html文件中引入相关的外部CSS文件:

主要有是那个960.css为主要排版样

还有两个css文件:reset.csstext.css,它们的主要作用是为了消除浏览器间显示差异准备的,前者消除了html标签在各浏览器间的差异,而后者则主要针对的是字体。

2)定义一个DIV大容器,放下整个页面:

 

 grid其实就是一个容器,在这个容器里,已经给分好了“块,所以这个容器就给平均分成了块,有1216两种,我们用.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所占的列数。当然为了布局方便,我们一定会加入更多的classid的,最后如下:

<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

alphaomega

alpha是去除左边的marginomega是去除右边的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>

 

 

你可能感兴趣的:(框架)