Monthly Archives: October 2009

使用Grid 960 CSS框架快速设计

Grid 960是一个快速实现定位web页面的位置(主要是宽度)的CSS Framework.路人甲:为什么要使用CSS框架?我只听说过PHP框架,java框架,ruby框架,怎么还有CSS框架? 我解释一下,Grid 960框架是一个把页面的宽度分为12栏或者16栏,在12栏模式下,最宽的div就是grid_12,其余的按照从grid_11一直到grid_1:

  1. 60px
  2. 140px
  3. 220px
  4. 300px
  5. 380px
  6. 460px
  7. 540px
  8. 620px
  9. 700px
  10. 780px
  11. 860px
  12. 940px

为什么grid_12的宽度只是940px?原因是每个层还有左右border的宽度,不会直接占用960的宽度.之所以使用960px作为页面的的最佳宽度是为了兼容目前所有的分辨率,比如说还有很多使用1024分辨率的显示器,即使使用宽屏显示器也能比较好的显示效果.在设计页面之前,肯定要大致固定页面中各个div的宽度和位置,比如下面的例子:
[cc lang=”html”]

940px
460px
460px

[/php]
这样一个大致的页面骨架就建立了,一个宽度是940px的nav层,下面是两个460px的层.
Grid-960-css

还有一个窍门,想nav这样占满真个宽度的div很简单,但是如果某几个div占用一个高度的时候,只要把所有grid_X代表的数字加上去,总和是12就可以了.

紧紧固定了div的宽度还有不够,还要仔细的使用css修饰页面才行.
[cc lang=”html”]

  • Articles
  • Topics
  • About
  • Editors
  • Contact

[/php]
修改div属性也不用更改grid_12的属性,仅使用css的命名规则的技巧就可以了,重新定义一个navbar的css定义:
[cc lang=”css”]div#navbar ul {
list-style: none;
display: block;
margin: 0 10px;
}

div#navbar ul li {
float: left;
margin: 0 1.5em;
font: bold 1em Arial;
}[/php]