网页栅格系统研究（4）：技术实现
作者：玉伯 来源：Taobao.com UED Team 发布时间：2008-11-06 11:44:00
标签：栅格系统,栅格,框架,css
前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。
Blueprint的实现
Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面：
以上三栏布局的代码为：
<style type="text/css"> .container { margin: 0 auto; width: 950px } .span-8 { float: left; margin-right: 10px } div.last { margin-right: 0 } hr { clear: both; height: 0; border: none } </style> <div class="container"> <div class="span-8"></div> <div class="span-8"></div> <div class="span-8 last"></div> <hr /> </div>
上面是基本功能，Blueprint还支持append-n, prepend-m, border等“高级”功能，这些就不细说了。Blueprint的特点简单总结如下：
采用浮动来实现布局，简单明了
950两侧没有margin, 最后一列的class需要加上
last采用额外标签来清除浮动
960.gs的实现
谈到960栅格系统，不得不提960.gs. Nathan Smith在这篇文章中，详细阐述了他的想法和设计思路。这里有个demo页面，核心代码很简单：
<style type="text/css"> .container_12 { margin: 0 auto; width: 960px } .grid_4 { float: left; margin: 0 10px } </style> <div class="container_12"> <div class="grid_4"></div> <div class="grid_4"></div> <div class="grid_4"></div> <div class="clear"></div> </div>
上面就构建了三栏布局：
有意思的几点：
margin是均匀放在950两侧的
所有grid除了宽度不同，左右边距都一致
margin: 0 10px;代码简单清晰，起始和结束列不需要添加额外class
很明显，Blueprint和960.gs都是采用浮动来实现布局的，主容器需要添加额外标签来清除浮动（可以参考这里）。当然，这也不是什么大问题，请看这篇文章的总结，不添加额外标签也可以清除浮动。
0
投稿猜你喜欢
- 网上大部分的免费asp程序使用的是access数据库。但是access数据库作为一个中小型的单机数据库系统，在承担访问量、数据量大的网站应用
- 因为主键可以唯一标识某一行记录，所以可以确保执行数据更新、删除的时候不会出现张冠李戴的错误。当然，其它字段可以辅助我们在执行这些操作时消除共
- 有的时候取出全部数据库记录也许正好满足你的要求，不过，在大多数情况下我们通常只需得到部分记录。这样一来该如何设计查询呢？当然会更费点脑筋了，
第一种方法： 代码如下:Minimsdn.com为您提供的代码: -- Turn ON [Display IO Info when exec- 今天一个同事报告一个问题，表都不能使用了,检查了一下，发现问题 db2 => select * from testACTNO ACTK
- 可能有些地方翻译得不好，请见谅在这个冠冕堂皇的标题之下，我想回答一个土方，有人在博客提出很久了。该土方很好的描述了很多图标设计师所面临的典型
- “没 Javascript 就会死”的页面通常都会加入 noscript 标签用于提示用户开启脚本支持。 然而在 IE8 下，如果在 nos
- 如何获知用户的IP？<％ Dim ValidLog ' 日志变量 Valid
- 打开VB6，新建ActiveX DLL 2、在工程引用中加入Microsoft Active Server Pages Object Lib
- 好不容易有些空余时间，便拿来写自己的CSS选择器引擎了，这个CSS选择器引擎的目标只有三个：速度要快代码要精简要支持CSS3的选择器。希望通
- 1.SQL Server对于SQL Server 2000来说，它提供了两个全新的函数(IDENT_CURRENT,SCOPE_IDENTI
- 如何在线删除表或索引？ <％Set conn1 = Server.CreateObject(&
- 负责Web编写的前端人员，都清楚可以通过W3验证服务功能，来在线验证自己编写的XHTML代码是否正确，在验证期间，最容易出现的错误往往都是在
- 有两张表a表id val 1 a 2 b 3 c 4 d 5 e b表 a_id val 1 null 2 null 3 null 4 nu
- 一共4个页面：form.asp; chk.asp; num.asp; count.asp得到一个随即数字。加密
- 之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看
- 下面的这个函数实现的功能是列出某文件夹下的所有文件，以文件名字母排序，先数字后字母再到中文。<％
- 使用sql语句删除数据库中重复记录的两个方法如下：方法一declare @max integer,@id in
- 随着网络的发展，网速和机器速度的提高，越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解
- 1、现象a.用localhost访问，正常b.用IP地址访问，则出现403错误2、分析a.怀疑是ACL问题，设置Everyone为完全控制，
