射雕双飞翼布局的几个补充布局

前段时间一直在开发css框架,同事提示我看射雕的双飞翼布局,非常不错的一个布局,引用射雕自己的话:

1.实现了内容与布局的分离,即Eric提到的Any-Order Columns.
2.main部分是自适应宽度的,很容易在定宽布局和流体布局中切换。
3.任何一栏都可以是最高栏,不会出问题。
4.需要的hack非常少(就一个针对ie6的清除浮动hack:_zoom: 1;)
5.在浏览器上的兼容性非常好,IE5.5以上都支持。

那么究竟什么是双飞翼布局呢?大家可以看看;

渐进增强式布局探讨(上) 渐进增强式布局探讨(下) 网页栅格系统研究(4):技术实现

射雕还专门做了个栅格化的双飞翼demo:Grids Layout Demo

其实类似这种布局国外有人很早也做了,同一个html文档通过css样式能做出40种不同的布局展现,当然甚至可以更多,包括我也曾经关注过,不过个人认为决定网页布局的应该是信息架构,而不纯粹的依靠html文档流和css样式。

今天仔细的研究了射雕的双飞翼,自己在射雕demo的基础上,在3栏模式下做了一点扩展,这些布局在他的Grids Layout Demo中没有看到,所以今天做了几个补充布局:https://www.html.cn/demo/Grids%20Layout/cssA/to.html

回到CSS框架,双飞翼布局能做框架吗,毫无疑问他是可以的,但是会有以下几个问题:

1,如果做像Blueprint一样的框架,就是950,24列的各种形式都要有的话,那么这个双飞翼栅格布局框架的代码不是一般的多,因为他变化太多,太灵活了,这一点非常重要。射雕也在网页栅格系统研究(4):技术实现中写到:

这套栅格系统并不能实现所有布局。这和YUI Grids类似,只能实现预定的一些布局。比如三栏布局,目前只加入了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四种情况,…对于同一个站点来说,太多不同的三栏比例不是好事

2,这套布局符合渐进增强式工作流程。细心的你可能已经发现,所有两栏布局和三栏布局,HTML中的DOM结构是完全一样的,只有最外层div的class不同。如果要交换左右栏,只要非常简单的修改下class就可以;

3,通过两栏布局和三栏布局可以组合出多种布局。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 射雕双飞翼布局的几个补充布局

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏