也许有些人不喜欢用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;
width:57.69em;
*width:56.301em;
min-width: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 的写法,我们可以知道了:
1 | .yui-t-custom, doc-custom { margin:auto; text-align:left; width:69.46em; *width:67.73em; min-width:750px; } |
Ok,大功告成