网页栅格系统研究(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的特点是:
依旧是采用浮动布局,槽(Gutter)宽通过
margin-left
来控制(Blueprint采用右边距,960.gs采用均分,这三个框架对槽的处理实在有意思)总宽度采用em, 这样可以用在弹性布局上
栏的布局用的是百分比,采用了流体布局
YUI的好处是能用来做自适应布局,在这前面两个框架里是没有的。但普通的定宽布局,YUI则显得有点麻烦,比如我们要实现四栏布局,dom得这样写:
先来两个两栏布局,再细分为四栏布局,清晰度上欠佳。


猜你喜欢
- 通常,当我们在 Vue 中创建组件时,它们出现在我们期望的 DOM 结构中。但是,有时我们并不希望如此。一个很好的例子就是模态框&m
- 现在用MSSQL的地方太多了,有很多做技术的个人电脑上也安装SQL专业版,因为它用的多,但用的人都知道,SQL有个超级用户sa,此用户默认情
- 1.ResNet的创新现在重新稍微系统的介绍一下ResNet网络结构。 ResNet结构首先通过一个卷积层然后有一个池化层,然后通过一系列的
- 在/etc/profile.d/简历oracle.sh内容如下在NLS_LANG设置编码ORACLE_HOME=/usr/lib/oracl
- 级联样式表在13年前被引入,而且被广泛使用的CSS 2.1 标准在11年前被创建,显然我们现在已经与当年相差千里了。相当了不起的是期间网站开
- UUID(Universally Unique Identifier)是通用唯一识别码,在许多领域用作标识,比如我们常用的数据库也可以用它来
- 本文实例讲述了Django中使用group_by的方法。分享给大家供大家参考。具体分析如下:在Django中怎样使用group_by语句呢?
- 一、c++调用Python将Python安装目录下的include和libs文件夹引入到项目中,将libs目录下的python37.lib复
- 本文实例讲述了python网络编程之数据传输UDP实现方法。分享给大家供大家参考。具体分析如下:一、问题:你觉得网络上像msn,qq之类的工
- 首先简单介绍一下通配符,用来匹配值的一部分的特殊字符。搜索模式(search pattern) 由字面值、通配符或两者组合构成的
- 用df命令查了下,果然磁盘满了,因为当时分区采用系统默认,不知道为什么不能自动扩容!以后在处理这个问题!如图所示:[root@snsgou
- 在编程过程中,多了解语言周边的一些知识,以及一些技巧,可以让你加速成为一个优秀的程序员。对于Python程序员,你需要注意一下本文所提到的这
- 方法一:巧用sum函数将list列表与一个空列表相加,就能把嵌套列表合并成一个a=[[1],[2],[3],[4],[5]]merge=su
- 上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSS Sprite技术,DEMO中附带了IE6兼容png的JS.核心J
- 占位符说明1、%c,格式化字符及其ASCII码2、%s,格式化字符串3、%d,格式化整数4、%u,格式化无符号整数5、%o,格式化无符号八进
- 如何导入数据数据可能有各种格式,虽然常见的是HDFS,但是因为在Python爬虫中数据库用的比较多的是MongoDB,所以这里会重点说说如何
- 一、责任链模式责任链模式,将多个处理方法连接成一条链条,请求将在这条链条上流动直到该链条中有一个节点可以处理该请求。通常这条链条是一个对象包
- 原文: gradio.app/interface-s…1.全局状态例子来解释import gradio as grsc
- 前言ppi-cpi 剪刀差大家可能都听说过,通过这个指标可以了解当前的经济运行状况,小编为了学习 python 的图形绘制,通过爬
- 参数说明以官方说明为例,gather()函数需要三个参数,输入input,维度dim,以及索引indexinput必须为Tensor类型di