网页页面规格的金子占比:960 Grid System(网格设计

阅读  ·  发布日期 2021-02-21 07:04  ·  admin

960 Grid System是应用固定不动宽度960pixel(像素)置中对齐画面的方法展现在网页页面上,除去上下两侧各10pixel的室内空间,留下正中间940pixel的区块以20pixel做为间距分栏。在室内空间设计方案上,可随便合拼多栏做为版面配备及网页页面规格的设置,合拼出来的栏宽也不容易有畸零数,有益于CSS中DIV宽度的设置。

图:960 Grid System - Demo (12栏)

960grid分成12栏与16栏两种,在其中因12能被3、4、6整除,能创建3栏、4栏、6栏的版面配备,在应用上较为灵便,下列以12栏的款式作为示范性。

仅有左栏的规格设置

一般应用于内页设计方案:左方边栏+关键內容。

另外有上下栏的规格设置

普遍于部落格的版面设计方案,应用于另外有上下两个选单的情况下。

3栏的规格设置

一般用在主页或网站正下方的自订区块(user-custom),可置放迅速连结、全新信息、广告宣传讯息…。

4栏的规格设置

一般用在主页或网站正下方的自订区块(user-custom),可置放迅速连结、全新信息、广告宣传讯息…。


填补:

CSS架构早已出現很长期了,有关这些架构的用途也被大家探讨了许多遍了。有人说,CSS架构不足优秀,也有人说这些架构大大的节约了她们的开发设计時间。在此,大家将已不探讨这个难题。

  前段時间,我掌握到了CSS架构。历经对Malo、BluePrint和960做了试验比照后,我得出1个结果:我最喜爱960CSS架构。

  本实例教程将解释这个架构的基础基本原理,这样你便可以用960来迅速进到开发设计。(注:960网格系统软件官网)

基础基本原理

  你务必了解1些基础基本原理来“学习培训这个架构是怎样工作中的”。你能够根据试验(或是用firebug)来学习培训它,但是我也可能在这里为你详细介绍它。让大家刚开始吧。

不必编写960.css文档

  最先是1个小提醒:不必编写960.css文档,不然,未来你将不可以升级这个架构。由于虽然大家必须合理布局大家的HTML,大家将建立1个单独的CSS文档。

载入网格

  由于大家可使用1个外界文档的CSS编码,大家务必在大家的HTML网站中载入它们,大家能够根据下列编码来完成:

  这些做好了以后,大家务必加上大家自身的CSS文档。比如,你能够叫这个文档为style.css或site.css或其它任何姓名。用下面编码引入这个文档:


器皿

  在960架构中,你能够挑选名为.container_12和.container_16的两个器皿class。她们全是960px的宽度(这便是为何叫960),它们的不一样是分的列数不一样。.container_12被切分为12列,.container_16被切分为16列。这些960px宽的器皿是水平垂直居中的。

网格/列

  有许多列宽可供挑选,并且在这两个器皿里,这些宽度也不同样。你能够根据开启960.css文档来查询这些宽度。可是这针对设计方案1个网站来讲是无须要的。有1个小窍门可让这个架构更为易用。

例如,你要想在你的器皿里建多列(叫sidebar/content)。你能够这样做:

 

sidebar

 

main content


  能够看到,你的第1列(grid_4)的数据再加第2列(grid_8)的数据恰好是12。也便是说,你无须了解每列的宽度,你能够挑选列宽根据1些简易的数学课测算。

  假如大家要建1个4列的合理布局,编码能够是这样的:


 

sidebar

 

main content

 

photo’s

 

advertisement


  正如你所看到的那样,这个系统软件仍然很完善。可是假如你想应用嵌套循环的列的话,你会发现它是有难题的。例如,假如后边3列都属于content列:


 

sidebar

 

 

main content

 

photo’s

 

advertisement

 


你会发现这移位了,但是无需心急,这更是大家下1节要说的。

间隔

  默认设置状况下,每列之间都有间隔。每个grid_(这里意味着数据)class上下都有10个像素的间隔。也便是说,多列之间,一共有20px的间隔。

  20px间隔对建立1个有充足宽的空白间隔的合理布局来讲是很棒的,它可让1切看起来很当然。这也是我喜爱应用960的缘故之1。

  在上面的事例中,大家遇到了个难题,如今大家就来处理它。

  难题是,每列都有上下边距。而嵌套循环的3列中,第1列和最终1列是不必须边距的,处理方式是:


 

sidebar

 

 

main content

 

photo’s

 

advertisement

 


  大家能够简易的加上”alpha“款式来去掉左侧的间隔,加上“omega”款式来除去右侧的间隔。这样大家不久建立的这个事例在任何访问器里边就很完善了(自然包含IE6)。

款式

  好了,你如今早已彻底掌握假如用960架构来建立1个网格合理布局的基础基本原理了。自然,大家还可以加上1些款式到大家的合理布局中。


 

sidebar

 

 

main content

 

photo’s

 

advertisement

 


  由于CSS应用特点来明确哪个款式申明具备高于其它款式的优先选择级。”id“比class更关键。

  用这类方式,大家能够在自身的文档中重新写过那些被class设置的标准(例如宽度,padding,边框等)。



填补

  下列是我做的1个简易的检测网页页面,编码以下:


TEST Page

 

 

 

0

 

00

 

 

a

 

b

 

c

 


  下列是960官方的案例文本文档,能够看看它的网格是怎样写的:

 

 Travis Isaacs | My Life In Pixels

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

» 本文连接详细地址: » 转载请注明出处,感谢。
您必须大家为您出示企业网站建设服务吗?

大家将在24小时以内与您获得联络
或致电010⑹2199213 400⑹97⑻610资询