首页 > 知识•资讯 > 网页尺寸的黄金比例:960 Grid System(网格设计) > 正文

网页尺寸的黄金比例:960 Grid System(网格设计)

2017/8/25 0:00:00 · 稿源:传诚信

960 Grid System是使用固定宽度960pixel(像素)置中对齐画面的方式呈现在网页上,去除左右两边各10pixel的空间,留下中间940pixel的区块以20pixel作为间隔分栏。在空间设计上,可随意合并多栏作为版面配置及网页尺寸的设定,合并出来的栏宽也不会有畸零数,有利于CSS中DIV宽度的设定。

01.jpg

图:960 Grid System - Demo (12栏)

960grid分为12栏与16栏两种,其中因12能被3、4、6整除,能建立3栏、4栏、6栏的版面配置,在使用上较为灵活,以下以12栏的样式做为示范。

只有左栏的尺寸设定

通常使用于内页设计:左方边栏+主要内容。

02.jpg

同时有左右栏的尺寸设定

常见于部落格的版面设计,使用于同时有左右两个选单的时候。

03.jpg

三栏的尺寸设定

通常用在首页或网站下方的自订区块(user-custom),可放置快速连结、最新消息、广告讯息…。

04.jpg

四栏的尺寸设定

通常用在首页或网站下方的自订区块(user-custom),可放置快速连结、最新消息、广告讯息…。

05.jpg


补充:

CSS框架已经出现很长时间了,关于这些框架的用处也被我们讨论了很多遍了。有人说,CSS框架不够先进,还有人说这些框架大大的节省了他们的开发时间。在此,我们将不再讨论这个问题。

    前段时间,我了解到了CSS框架。经过对Malo、BluePrint和960做了实验对比后,我得出一个结论:我最喜欢960CSS框架。

    本教程将解释这个框架的基本原理,这样你就可以用960来快速进入开发。(注:960网格系统官方网站点击进入

基本原理

    你必须知道一些基本原理来“学习这个框架是如何工作的”。你可以通过实验(或者是用firebug)来学习它,不过我也将会在这里为你介绍它。让我们开始吧。

不要编辑960.css文件

    首先是一个小提示:不要编辑960.css文件,否则,将来你将不能更新这个框架。因为尽管我们需要布局我们的HTML,我们将创建一个独立的CSS文件。

加载网格

    因为我们可以使用一个外部文件的CSS代码,我们必须在我们的HTML网站中加载它们,我们可以通过以下代码来实现:

    这些做好了之后,我们必须添加我们自己的CSS文件。例如,你可以叫这个文件为style.css或site.css或者其它任何名字。用下面代码引用这个文件:


容器

    在960框架中,你可以选择名为.container_12和.container_16的两个容器class。他们都是960px的宽度(这就是为什么叫960),它们的不同是分的列数不同。.container_12被分割为12列,.container_16被分割为16列。这些960px宽的容器是水平居中的。

网格/列

    有很多列宽可供选择,而且在这两个容器里,这些宽度也不相同。你可以通过打开960.css文件来查看这些宽度。但是这对于设计一个网站来说是不必要的。有一个小技巧可以让这个框架更加易用。

比如,你想要在你的容器里建两列(叫sidebar/content)。你可以这样做:

  1.     

    sidebar

  2.     

    main content


    可以看到,你的第一列(grid_4)的数字加上第二列(grid_8)的数字正好是12。也就是说,你不必知道每一列的宽度,你可以选择列宽通过一些简单的数学计算。

    如果我们要建一个4列的布局,代码可以是这样的:


  1.     

    sidebar

  2.     

    main content

  3.     

    photo’s

  4.     

    advertisement


    正如你所看到的那样,这个系统依然很完美。但是如果你想使用嵌套的列的话,你会发现它是有问题的。比如,如果后面三列都属于content列:


  1.     

    sidebar

  2.     

  3.         

    main content

  4.         

    photo’s

  5.         

    advertisement

  6.     


你会发现这错位了,不过不用着急,这正是我们下一节要说的。

间距

    默认情况下,每列之间都有间距。每一个grid_(这里代表数字)class左右都有10个像素的间距。也就是说,两列之间,总共有20px的间距。

    20px间距对创建一个有足够宽的空白间距的布局来说是很棒的,它可以让一切看起来很自然。这也是我喜欢使用960的原因之一。

    在上面的例子中,我们遇到了个问题,现在我们就来解决它。

    问题是,每一列都有左右边距。而嵌套的三列中,第一列和最后一列是不需要边距的,解决方法是:


  1.     

    sidebar

  2.     

  3.         

    main content

  4.         

    photo’s

  5.         

    advertisement

  6.     


    我们可以简单的添加”alpha“样式来去掉左边的间距,添加“omega”样式来去除右边的间距。这样我们刚刚创建的这个例子在任何浏览器里面就很完美了(当然包括IE6)。

样式

    好了,你现在已经完全了解如果用960框架来创建一个网格布局的基本原理了。当然,我们也可以添加一些样式到我们的布局中。


  1.     

    sidebar

  2.     

  3.         

    main content

  4.         

    photo’s

  5.         

    advertisement

  6.     


    因为CSS使用特性来确定哪一个样式声明具有高于其它样式的优先级。”id“比class更重要。

    用这种方法,我们可以在自己的文件中重写那些被class设定的规则(比如宽度,padding,边框等)。



补充

    以下是我做的一个简单的测试页面,代码如下:


  1. TEST Page

  2.     

  3.         

  4.             

    0

  5.             

    00

  6.         

  7.         

    a

  8.         

    b

  9.         

    c

  10.     


    以下是960官方的实例文档,可以看看它的网格是如何写的:

  1.     

  2.      Travis Isaacs | My Life In Pixels

  3.     

  4.     

  5.     

  6.     

  7.     

  8.     

  9.     

  10.         The work & thoughts of Travis B. Isaacs

  11.         

  12.             

  13. Work

  14.             

  15. Thoughts

  16.             

  17. Photography

  18.             

  19. About

  20.             

  21. Contact

  22.             

  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354