网页栅格系统研究（4）：技术实现（3）
作者：玉伯 来源：Taobao.com UED Team 发布时间：2008-11-06 11:44:00
更多栅格实现
栅格化更多是一种布局思想，实现技术可以千差万别。比如今年冒出来的伪绝对定位，立刻就可以用来实现栅格系统。明城兄弟就尝试了一把。
肯定还有非常多的栅格化实现方案，这里就不一一挖掘了。
双飞翼栅格系统
挺奇怪这个名字？请先阅读这篇文章：渐进增强式布局探讨. 简单说，双飞翼布局是一种布局实现技术，可以利用它来实现一整套栅格系统。
先看test页面：Grids Layout Test.
具体技术细节在渐进增强式布局探讨一文中已经阐述，这里不再重复。有几点需要说明：
这套栅格系统并不能实现所有布局。这和YUI Grids类似，只能实现预定的一些布局。比如三栏布局，目前只加入了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四种情况，这是从淘宝的现有页面中分析总结出来的。对于同一个站点来说，太多不同的三栏比例不是好事（淘宝目前都有点多，以后可能还会进一步统一）。因此如果采用这套栅格系统的话，需要先分析站点，定义出一套合适的比例。这里有个所有比例的自动生成工具：grids_css_generator.html.
关于命名：
.grid-c2-s6表示两栏（c2: column 2）布局，sub栏的宽度是4列（s4: sub width is 4 * 40 -10）. 而.grid-c2-s6f, 最后的f表示两栏布局的第二种情况，即sub和main互换。类似地，.grid-c3-s5e6d表示三栏布局，其中sub栏的宽度是5,extra栏的宽度是6, 最后的d表示是s5e6三栏布局中的第四种情况。为了方便使用，将最常用的两栏布局
.grid-c2-s5用.grid-c2直接表示。同样的，.grid-c3表示.grid-c3-s5e6. 这是淘宝的默认值，其他站点可以根据实际情况修改。这套布局符合渐进增强式工作流程。细心的你可能已经发现，所有两栏布局和三栏布局，HTML中的DOM结构是完全一样的，只有最外层
div的class不同。如果要交换左右栏，只要非常简单的修改下class就可以。实际使用时，两栏布局和三栏布局已经够用。其实有了两栏，其它布局就都可以组合出来。这里有一个尝试性页面：grids_test4_v0.1.html. 组合布局看起来很强大，但实际使用时会把问题搞复杂，不推荐使用，干脆忘掉吧。
最后来看下两个测试页面：两栏布局grid-c2_test.html 和 三栏布局grid-c3_test.html.
目前除了发现在ie6下有个可以忽略的小bug（三栏布局中，main中的超大图片会撑出去），尚未发现其他问题。
小结
栅格系统更多的是一种布局思想，在实际使用时，根据具体需求选用合适的技术来实现即可。需要注意的是，对于栅格的技术实现来说，太灵活未必是件好事，适度灵活最难得。怎么才能适度呢？这需要疯狂实践 + 不断的反思 + 持续的重构 + 悟…
栅格搭好了页面框架，接下来很重要的一件事情就是往里面添加内容模块。让内容模块规范化，让页面生成工业化，对大型站点来说，这是栅格系统最有商业价值的地方。下一篇也是本系列最后一篇将展示栅格系统中的模块化应用。
0
投稿猜你喜欢
登录与注册两个按钮似乎天生就应该是排在一起的，就像很多地方的“确定”与“取消”一样，甚至排在一起的意义远远强于后者。于是长期以来，用户们也形- 关于Mysql的触发器，基本上每个Mysql教程里都有讲到，但是我发现那些教程里讲的都是如何处理其他表的数据。在Mysql中写触发器操作本表
- 今天无意在坛子里看到这样一个求救帖（这里），看了一下，感觉问题比较好解决。但是问题背后的问题却引起了我的反思。把他的页面整理一下看看（为了便
- 在绝大多数查询中，MySQL使用哪种校对规则进行比较是很显然的。例如，在下列情况中，校对规则明显的是“列x的列校对规则”：SELECT&nb
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- 在SQL Server数据库中，主要是通过角色来继承相关的权限。但是，这个权限继承很容易造成权限上的冲突。如现在有个销售员账户SALE1，有
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR，MySQL将使用系统的默认值，通常为/tmp、
- 用户登录验证脚本,Chkpwd.asp<％ '=======用户登录验证脚本======= '
- 一.基本的查询语句，特殊符号||。制定列的别名AS，唯一标示distinct1.字符连接符“||”与“+”符oracle：select &n
- QQWry.dat数据可以去百度搜索最新版本<％'======================================
- 晚上突然间看到大猫的头像在闪动，速度打开一看，发现他问，以前我写button标签的时候有没有写type属性，老实的我只有诚实地告诉他，我没写
- Insus.NET解决这个问题，只有创建另外一个表，将存储用户决定要跟踪的表，以及这个表中需要跟踪的字段。 还要创建另外一个表[Audit]
- GetRows 方法 将 Recordset 对象的多个记录复制到数组中。 语法 代码如下: array = recordset.GetR
- JavaScript组件打包模式js组件通常带着css image ，但这样使用起来可能会有些小麻烦，为了让组件足够的solo，有了把css
- 编写思路:把本地文件在客户端通过base64编码以后发送目的地.测试过程中,上传文件过大,导致超时不成功，后来经过改善.把编码分
- Altova 公司的 XMLSPY 是个不可多得的好东西，它几乎可以开发所有的 XML 产品。最近用它来做 Schema
- 想必大家都知道MSSQL中SA权限是什么，可以说是至高无上。今天我就它的危害再谈点儿，我所讲的是配合NBSI上传功能得到WebShell。在
- DIV与TABLE本身并不存在什么优缺点，所谓web标准只是推荐的是正确的使用标签，好比说：DIV用于布局，而TABLE则本来就是转二维数据
- JavaScript中的XMLHttpRequest和XML DOM首先，我们需要建立一些规则。特殊的XMLHttpRequest对象和一般
- ACCESS数据库中Field对象的caption属性（也就是标题）是用来设置数据字段的标题，在正常的数据库设计中为了保持维护的便利性，许多
