网络编程
位置:首页>> 网络编程>> 网页设计>> 网页栅格系统研究(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网页的时候出现如下错误:Server object error ''ASP 0178 : 80070005
  • 最近重新温习了一次《javascript设计模式》,确实是一本好书,每次看都有不同的领悟,每次领悟到的都受益匪浅,无怪古圣人都说学无止镜了,
  • 此文刊登在《程序员》2009年5月期:SQL全名是结构化查询语言(Structured Query Language),一直是后台开发者用来
  • 一、偏好资源的积累利用DreamWeaver 4制作网页会应用到许多各种类型的要素,比如色彩、图片、模板、脚本等。利用站点资源面板将这些东东
  • 作业备份,不是备份数据库,是备份作业。 我的方法是把作业导出成文件备份起来,因为当你服务器维护的多了的时候很多你的作业 就很成问题,很麻烦。
  • 有时在浏览网页时,常常因为网页中的图片文件过大而使下载时间较长,这样还没有下载完,就会有许多浏览者不耐烦地拂袖而去,从而损失了客户流。但要使
  • AXObject可用来解决IE需要激活 ActiveX 控件和生成控件调用代码    AXObjec
  • 由Oralce8.1开始,Oracle增加了一个新的特性就是Stored Outlines,或者称为Plan Stability(计划稳定性
  • 一、无组件上传的原理我还是一点一点用一个实例来说明的吧,客户端HTML如下。要浏览上传附件,我们通过<input type="
  • javascript 常见汉字转换成拼音,上下行排列,方便对比,速度快,你可以把代码复制到本地,作为一个不错的汉字转换拼音的工具!转换效果图
  • Doug Bowman,Google的Visual Design Lead离职了,一封带有感 * 彩的离职信惹发了大家不少的讨论。甚至还有人用
  • 1.获取所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name2.获取所有表
  • 下表列出了 Microsoft ACCESS 的命令行选项:选项 效果database 打开指定的 Microsoft Access 数据库
  • 在SQL Server 2005中,它的另外一个强大的新特点是数据库快照。数据库快照是一个数据库的只读副本,它是数据库所有数据的映射,由快照
  • 导航标签彼此互斥、完全穷尽。导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签,代表的内容通
  • 函数名称:CheckForm_JS(frmName,errStr)功能:用ASP的方法动态写出JavaScript的表单验证的函数check
  • 1、Config命令Config命令主要用于修改SSI的默认设置。其中:Errmsg:设置默认错误信息。为了能够正常的返回用户设定的错误信息
  • 你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择
  • 小编语:小编我最早使用的网页制作工作就是FrontPage啦,FrongPage方便简单,会用Word就能做网页。如果你对网页制作要求不高,
  • 本文介绍的圆角方法很特别,有创意。昨天群里大家讨论到一个豆瓣上的按钮,下面这个。在这里用到了不同宽度的按钮,但是只是用到了一个图片。&nbs
手机版 网络编程 asp之家 www.aspxhome.com