登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

960 Grid System 样式讲解  

2011-02-09 14:00:41|  分类: 网页设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

960 Grid System(960gs)是一个为了简化webUI设计工作流程而出现的宽度为960像素的工具。它包含两个版本,12列和16列,这两个版本可以单独使用也可以放一起使用。

  • container_12和container_16,用于最外层的div,它们确定页面采用12列布局还是16列布局。
  • grid_*,代表n列宽。12列对应1~12,16列对应1~16。使用时,一行内的grid数值之和等于container数值。
  • clear,清除上一行的样式,一般在分行时使用。
  • push_*和pull_*,将div往内推或往外拉n列宽。
  • prefix_*和suffix_*,在div的前后留n列宽空白。
  • alpha和omega,分别应用到内嵌表格的第一个和最后一个,其目的是为了去掉表格之间的空白。因为框住内嵌表格的外部表格本身已经有了自己与其他表格之间的空白,因此内嵌表格和外部表格之间的空白一般是不美观,不必要的。

在使用时需注意960 GS的限制:

  • 页面的宽度限制为960px。
  • 上述class只限定了div的宽度,高度由开发者自行控制。
  • 只提供了12列、16列和24列布局。
  • 功能单一,只聚焦简化布局。

总结如下:

 A、margin参数是alpha和omega;
    B、padding参数是prefix和suffix;
    C、脱离文档流移动参数是push和pull;
    D、clear是块回车换行

  评论这张
 
阅读(502)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018