YUI Grids实现自定义宽度的Template

也许有些人不喜欢用YUI的CSS,但是我觉得这个对我来说,简直是太方便了,特别是如果你赞同Yahoo的栅格理论的话,YUI Css几乎可以用在你所有的项目上。但是也有缺陷,YUI预设的Template中只为我们提供了六种预设的模板,并没有像整个页面那样提供一个可以自定义的标签,那么当我们的需求需要实现不同的宽度的时候,就只有自定义了,我的目标是实现一个符合yui-t规则的自定义样式。

在进行之前,首先了解一下YUI所使用的尺寸单位:em。作为一个相对单位,1em是指当前一个字体的大小,例如你将一个字体设置为14px,那么1em=14px了。选用相对度量单位的好处就是我们可以更改网页中文字的大小,而且这个好像是美国的 803 法案要求网页必须对于视力弱的人所具有的功能。但并不是px就没有了作用,我们的页面必须限制在一个宽度范围内以防止变形,所以 min-width 的设置就必须用px了。

#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 {
margin:auto;text-align:left;
57.69em;
*56.301em;
min-750px;}

下面进入正题,我需要设置一个页面宽度800px,然后右边有一个350px宽的侧栏,如何写呢?

先计算一下页面宽度:800/13 = 61.54em; (For None IE) 800/13.3333 = 60.00em; (For IE)

侧栏宽度:350/13 = 26.92em (For None IE) 350/13.3333 = 26.25em; (For IE)

那么参考 yui-t1 的写法,我们可以知道了:

.yui-t-custom, doc-custom { margin:auto; text-align:left; 69.46em; *67.73em; min-750px; }
.yui-t-custom #yui-main { float:left; margin-right:-25em; }
.yui-t-custom .yui-b { float:right; 26.92em; *26.25em; }
.yui-t-custom #yui-main .yui-b { margin-right:27.92em; *margin-right:27.25em; }

Ok,大功告成


参考资料:
1、YUI Css Grids and customization

原文地址:https://www.cnblogs.com/cocowool/p/1657119.html