CSS960框架

2053阅读 4评论2011-09-21 10502chenjiao
分类:

昨天学习了css960框架,对其做了相应的练习。能掌握到一多半吧。然后,今天拿马克思主义学院这个网页用所学的知识做练习。
既然要用960做网页,在中有960.css,reset.css和text.css。即
  1. <link rel="stylesheet" href="css/reset.css" />
  2. <link rel="stylesheet" href="css/text.css" />
  3. <link rel="stylesheet" href="css/960.css" />
  4. 下一步是把基本的框架弄懂,然后用一对
  5. .../
    "
    这个大容器把整体的框出来。但它一定要设置成12列或者是16列的形式。此时,添加的每一个div的宽度都是960.
  6. 在每一个类grid_12即没完成一行之后再添加一个
  7. 。在每一行都可以有各种分法,分成多列(<=12列)。但是,哪怕是在某一个列中加那么一点点的东西,比如加border为1px的就不行啦。那么下一列的内容就会被挤到下一行中去。然后,每个class下如有需要,可以继续在它的下面添加N多个div块。到此处,估计对于960框架的基本原理已经掌握了。
  8. 下面是对高级参数的了解。
  9. (1)alpha和omega参数:
  10. <div class="container_12″>
  11.     <div class="grid_2 alpha">左侧导航栏</div>
  12.     <div class="grid_8″>主版块</div>
  13.     <div class="grid_2 omega">右侧广告栏</div>
  14. </div>
  15. 在大容器中又嵌套着这个例子的情况下,写了alpha和omega。假如没有它们两个,那,在左侧导航栏的左侧就会留有20px的大小,右侧广告栏的右侧也会有20px大小的空隙。但如果加上alpha和omega,那么效果就和正常的一样。左右两侧各有10px,即用alpha除去10px的margin,用omega除去10px的margin。
  16. (2)prefix和suffix参数
  17. 用法和(1)的一对参数相同,只是,次对参数是用来处理padding的。prefix是左侧有留白,suffix是右侧有留白。要几行留白就在参数后加_i(i为留白的列数)。
  18. (3)push和pull参数
  19. push是推,pull是拉。关键是在什么位置推拉,就是说那里才是动作的起点?我们浏览网页时几乎都是自左向右看,所以该动作也以左侧为起点,现在想象你就站在最左边。push_i就是把一个块向右推移i个列宽,pull_i就是把这个块向左拉i个列宽。   对其他行不起作用,只影响单独的一行。
最后一个剩下一个参数也是上面提到的:
(4)clear参数
作用是换行,意思是横行占满十二列或者是不想要十二列直接到下一行的情况下,clear就会起到它的作用啦!
一个网页完成以后,发现在ie8下,某些地方不兼容,此处问题很复杂。需要耐心来发现。。。。
上一篇:《日记》布局方法剖析
下一篇:团队协作项目

文章评论