常用栅格布局方案

页面的布局方式是页面构成的主骨架,其重要性你们懂的~
拿到一个PSD,一般情况下你会:
看整体布局方式,是列式布局还是通栏式布局? 列式布局是2列还是3列? 通栏式布局一共有多少个通栏?每个通栏有多少列?
总的来说,看PSD就要像看MM,先要知道她PP大还是MM大。。。
所以在切页面前,先要写页面的主要布局的代码,和建楼房先搭地基的道理是如出一辙滴。布局代码确定后,再开始在布局上做“填空”游戏。
布局对于设计师来说也很重要,当开发员和设计师都遵循统一的布局规范时,可以大大的降低两者的沟通成本。同时保证页面风格的统一性。

 

 

下面介绍的布局方案的示例代码使用gridsystemgenerator 参照960gs框架自动生成。

页宽1000px

20列的组合(每列40px),10像素间隔,实际宽度990px
20列的组合(每列30px),20像素间隔,实际宽度980px
25列的组合(每列30px),10像素间隔,实际宽度990px
25列的组合(每列20px),20像素间隔,实际宽度980px

页宽990px

11列的组合(每列80px),10像素间隔,实际宽度980px
18列的组合(每列35px),20像素间隔,实际宽度970px
25列的组合(每列45px),10像素间隔,实际宽度980px
33列的组合(每列20px),10像素间隔,实际宽度980px

页宽980px

14列的组合(每列60px),10像素间隔,实际宽度970px
14列的组合(每列50px),20像素间隔,实际宽度960px
28列的组合(每列25px),10像素间隔,实际宽度970px

页宽960px

12列的组合(每列70px),10像素间隔,实际宽度950px
12列或16列的组合(每列60px或40px),20像素间隔,实际宽度940px
posted @ 2013-06-05 16:24  穆乙  阅读(2731)  评论(0编辑  收藏  举报