网页栅格系统研究(4):技术实现(2)
作者:玉伯 来源:Taobao.com UED Team 时间:2008-11-06 11:44:00
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的特点是:
依旧是采用浮动布局,槽(Gutter)宽通过
margin-left
来控制(Blueprint采用右边距,960.gs采用均分,这三个框架对槽的处理实在有意思)总宽度采用em, 这样可以用在弹性布局上
栏的布局用的是百分比,采用了流体布局
YUI的好处是能用来做自适应布局,在这前面两个框架里是没有的。但普通的定宽布局,YUI则显得有点麻烦,比如我们要实现四栏布局,dom得这样写:
先来两个两栏布局,再细分为四栏布局,清晰度上欠佳。
标签:栅格系统,栅格,框架,css
0
投稿
猜你喜欢
Python Numpy 数组的初始化和基本操作
2022-08-28 22:18:23
canvas时钟效果
2024-05-05 09:14:22
Python入门篇之字典
2022-09-24 23:53:47
使用卷积神经网络(CNN)做人脸识别的示例代码
2023-12-31 06:25:05
mac安装mysql初始密码忘记怎么办
2024-01-16 20:42:45
Python入门_浅谈for循环、while循环
2021-02-07 13:17:23
一文教会你用python连接并简单操作SQLserver数据库
2024-01-17 14:11:34
python有序查找算法 二分法实例解析
2023-04-15 07:55:36
Microsoft Sql server2005的安装步骤图文详解及常见问题解决方案
2024-01-22 07:23:00
Pandas数据处理加速技巧汇总
2023-08-12 19:02:36
wxPython事件驱动实例详解
2021-09-21 18:25:11
.NET 6中System.Text.Json的七个特性
2024-05-02 17:20:02
Python复制Word内容并使用格式设字体与大小实例代码
2023-01-10 05:48:20
sqlserver 多库查询 sp_addlinkedserver使用方法(添加链接服务器)
2024-01-18 20:38:14
Django框架中模型的用法
2022-02-15 00:34:14
Golang实现http重定向https
2024-04-26 17:27:57
无缝滚动js代码通俗易懂(自写)
2023-07-02 05:23:49
AspJpeg组件:介绍、注册、高级使用方法
2010-01-25 12:42:00
Python Excel处理库openpyxl详解
2021-10-18 13:59:04
详解为什么说Golang中的字符串类型不能修改
2024-02-04 09:24:45