用960网格系统布局网页 1

原创
2014/03/12 16:39
阅读数 3.6K

作者:k

简介

960px 网格系统 , 也称 960 栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局. 。该无疑是非常好的网格系统, 因为相当灵活. 它帮助网页设计者快速地构造以下栏栅数目的布局原型: 9 x 3, 3 x 3 x 3x3, 4 x 4 x 4 , 10 x 2 等. 960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用。如新浪、网易、搜狐等

存在的缺点

问题在于 960 网格系统槽空间和内容宽度. 除去外边距, 实际的内容区域只有 940px. 以往能很好被使用是因为大部分设计者使用 12px 的字号. 而现在大多设计者喜欢将字体大小设为 13px, 甚至更大. 既然文字变大。

wps_clip_image-25890

下载地址:960.gs

wps_clip_image-13425

在PS中导入960网格系统动作方法:

1. 在PS中打开动作面板:

wps_clip_image-24434

2. 解压下载的960网格系统的资源文件后,打开app_plugins >photoshop 目录下的960_GRIDS.atn

wps_clip_image-22736

3. 使用960网格系统创建网格模版

例如:创建12格模版,首先选中12栏网格系统,然后点击播放选中的动作.

wps_clip_image-28162

默认给我们创建的大小是1020*700一般不够用可用通过快捷键(ctrl+alt+c画布大小)

wps_clip_image-6458wps_clip_image-19229

容器宽度的计算方法:

从最左边的参考线到最右边的参考线为960px

wps_clip_image-32513

以12栅格为例

wps_clip_image-6683

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
8 收藏
0
分享
返回顶部
顶部