网络编程
位置:首页>> 网络编程>> 网页设计>> 网页栅格系统研究(4):技术实现(2)

网页栅格系统研究(4):技术实现(2)

作者:玉伯 来源:Taobao.com UED Team 发布时间:2008-11-06 11:44:00 

标签:栅格系统,栅格,框架,css

YUI的实现

接着来看大名鼎鼎的YUI Grids CSS. YUI的CSS框架由三个文件组成:

reset.css - 样式重置 fonts.css - 版式字体控制 grids.css - 栅格系统

我们从demo开始:

注意,demo链接中的宽度是750的,但我们只要将<div id="doc"></div>中的id改为doc2, 页面宽度就自动变为950宽了(YUI非常强大^o^)。来看下dom结构:

采用的也是浮动布局,简化后的CSS代码为:

<style type="text/css"> .doc2 { margin: auto; width: 73.076em } .yui-u { float: left; margin-left: 1.99%; width: 32% } div.first { margin-left: 0 } #ft { clear: both } </style>

YUI的特点是:

  1. 依旧是采用浮动布局,槽(Gutter)宽通过margin-left来控制(Blueprint采用右边距,960.gs采用均分,这三个框架对槽的处理实在有意思)

  2. 总宽度采用em, 这样可以用在弹性布局上

  3. 栏的布局用的是百分比,采用了流体布局

YUI的好处是能用来做自适应布局,在这前面两个框架里是没有的。但普通的定宽布局,YUI则显得有点麻烦,比如我们要实现四栏布局,dom得这样写:

先来两个两栏布局,再细分为四栏布局,清晰度上欠佳。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com