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; 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 的写法,我们可以知道了:

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

Ok,大功告成

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏专注 Java 基础分享

Java ---自定义标签

     本篇文章介绍自定义标签,可能在工作中很少涉及到自己来定义一个标签库,因为我们基本上都是使用的大神写的标签库,基本上直接使用即可,但是从自身的发展来看,...

31150
来自专栏大数据钻研

HTML5学习笔记(一)

1.什么是 HTML5? HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后,...

41350
来自专栏知晓程序

「大众点评点餐」小程序开发经验 02:视图

23830
来自专栏hightopo

基于HTML5和WebGL的碰撞测试

16320
来自专栏数据小魔方

动态图表5|列表框(offset函数)

今天要跟大家分享的是动态图表5——列表框(offset函数)。 制作思路与前一篇中使用index函数制作思路基本一致,先用列表框制作菜单,然后使用offset函...

35850
来自专栏郭少华

(第一季)Vue2.0-内部指令

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核...

12730
来自专栏全沾开发(huā)

总结CSS3新特性(选择器篇)

总结CSS3新特性(选择器篇) CSS3新增了 ? 嗯- -21个选择器,脚本通过控制台在这里运...

30240
来自专栏jiajia_deng

设置 Notepad++ 制表符(Tab 缩进)宽度为2个空格大小

16620
来自专栏jiajia_deng

设置 Notepad++ 制表符(Tab 缩进)宽度为2个空格大小

17520
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

14620

扫码关注云+社区

领取腾讯云代金券