网页栅格系统研究(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
中的超大图片会撑出去),尚未发现其他问题。
小结
栅格系统更多的是一种布局思想,在实际使用时,根据具体需求选用合适的技术来实现即可。需要注意的是,对于栅格的技术实现来说,太灵活未必是件好事,适度灵活最难得。怎么才能适度呢?这需要疯狂实践 + 不断的反思 + 持续的重构 + 悟…
栅格搭好了页面框架,接下来很重要的一件事情就是往里面添加内容模块。让内容模块规范化,让页面生成工业化,对大型站点来说,这是栅格系统最有商业价值的地方。下一篇也是本系列最后一篇将展示栅格系统中的模块化应用。