常用栅格布局方案

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

 

 

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

css_grids示例

页宽1000px

• 示例1-1000_20_5_5.html

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

• 示例2-1000_20_10_10.html

20列的组合(每列30px)，20像素间隔，实际宽度980px

• 示例3-1000_25_5_5.html

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

• 示例4-1000_25_10_10.html

25列的组合(每列20px)，20像素间隔，实际宽度980px

页宽990px

• 示例1-990_11_5_5.html

11列的组合(每列80px)，10像素间隔，实际宽度980px

• 示例2-990_18_10_10.html

18列的组合(每列35px)，20像素间隔，实际宽度970px

• 示例3-990_18_5_5.html

25列的组合(每列45px)，10像素间隔，实际宽度980px

• 示例4-990_33_5_5.html

33列的组合(每列20px)，10像素间隔，实际宽度980px

页宽980px

• 示例1-980_14_5_5.html

14列的组合(每列60px)，10像素间隔，实际宽度970px

• 示例2-980_14_10_10.html

14列的组合(每列50px)，20像素间隔，实际宽度960px

• 示例3-980_28_5_5.html

28列的组合(每列25px)，10像素间隔，实际宽度970px

页宽960px

• 示例1-960_12_5_5.html

12列的组合(每列70px)，10像素间隔，实际宽度950px

• 示例2-960_12AND16_10_10.html

12列或16列的组合(每列60px或40px)，20像素间隔，实际宽度940px

转载于:https://www.cnblogs.com/pigtail/archive/2013/06/05/3119159.html