这里有必要先了解YUI的基本组成部分:
- reset.css:样式初始化,移除HTML元素在不同浏览器差异表现。
- base.css:可选部分,对YUI CSS框架核心的补充,统一常用的HTML元素的表现。
- fonts.css:提供跨浏览器中字体的常态化,即定义各元素的字体在不同浏览器中的统一表现。
- grid.css:页面布局,预定义4种宽度页面,6套模版,并能够嵌套和堆栈的组合使用2、3、4列布局。
下面是对各缩写字母的解释:
- doc:doc代表document,意为文档,yui建议所有的页面内容都被包含在一个定义了#doc的div中。在前文提到yui提供4种宽度页面,即分别定义为#doc1至#doc4,不同的doc差异主要为定义的宽度不同。
- hd,bd,ft:一般页面含有3个主要区域,即hd,bd,ft,分别为head,body,foot,但不强制一定包含这3个区域。
- yui-t:t代表template,意为模版,yui中提供的模版均为2列,共有6套模版,定义的名称从yui-t1至yui-t6。
- yui-b:b是block的缩写,板块的意思。yui-b使用在template布局中。
- yui-g:g代表grid,中文意思为栅格,是yui提供的另一种布局模式,也包含yui-g至yui-gf共6套。grid布局和template布局有什么不同?
- yui-u:u是unit的缩写,指的单元。yui-u是定义在grid布局中的内部div上。
FAQ:
- Q:grid布局和template布局有什么不同?
- A:template是yui提供的2列布局,其中一列为主内容块(main-block),另一列为侧栏(side-bar),无论主内容块在侧栏左边或右边,在结构中均在侧栏的前面,此点可以帮助你将最好的内容放在结构中的顶端,利于搜索引擎优化。而当你不愿使用template布局或需要3列甚至多列布局,可以考虑yui提供的grid布局。grid布局中每列都是平等的关系,不像template布局中分为主内容块和侧栏,你只需要在前面显示的列上定义一个first的类名。