本文介绍了如何实现YUI Grids CSS。
编写基本的标签
通过使用标准的文档类型以及包含YUI的CSS文件后,我们可以轻易实现垂直三栏布局:最上面是页眉、中间是内容部分、最下面是页脚。这种布局并不是必须的,不过在这里,我们将这种布局方式来作为例子。代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grids CSS </title>
<!-- Source File -->
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc">
<div id="hd"><!-- header --></div>
<div id="bd"><!-- body --></div>
<div id="ft"><!-- footer --></div>
</div>
</body>
</html>
设置页面的总宽度
我们只要改变外层div的id就可以指定页面的宽度。750px -- #doc,950px -- #doc2,100% -- #doc3。从2.3.0版本开始,又添加了一种宽度974px -- #doc4。你可以在Grids示例页面中看到所有宽度的示例页面。
<!-- #doc = 750px width, centered-->
<div id="doc"></div>
<!-- #doc2 = 950px width, centered -->
<div id="doc2"></div>
<!-- #doc3 = 100% width -->
<div id="doc3"></div>
<!-- #doc4 = 974px width, centered -->
<div id="doc4"></div>
注意:我们的设计师建议,100%宽度布局的时候,左右需要留10像素的边距。这是为了防止在Chrome浏览器中内容溢出。如果你不想保留这10个像素的宽度,那么你可以添加以下这段代码来取消边距:
<style>
#doc3 {margin:auto;}
</style>
自定义页面宽度
如果你想要自定义页面的宽度,那也很简单。将你想要的宽度处以13即可(在所有非IE浏览器中,在IE中,你需要除以13.3333)。比如你想要将页面宽度设置为600px,那么代码可以这么写(效果页面):
<style>
#custom-doc {
margin:auto;text-align:left; /* leave unchanged */
width:46.15em;/* non-IE */
*width:45.00em;/* IE */
min-width:600px;/* optional but recommended */
}
</style>
注意:
你需要记住以下几点:
- 之所以我们选择使用em作为长度单位,是因为这样可以让页面宽度自动适应用户的浏览器预设文本大小,提高用户体验。
- 虽然YUI Fonts使用em作为单位在兼容性上已经做的很好了,但是在IE中仍然会有那么一点点差别。
- 请确保IE中的width属性要写在所有其他属性的最后。
- 设置min-width属性虽然不是必须的,但是它能在页面可视区域变小的时候帮助Grids来保持页面的一致性。
- text-align与margin属性是用来让页面居中的,请不要修改他们。
使用预设的模板
大多数网页都含有主次两个内容区域。Grids的模板部分允许你自由指定他们的位置(也就是窄的部分到底在左边还是右边)。只要页面总体宽度定下来了(不管是固定宽度还是100%宽度),那么指定了窄的部分的宽度后,宽的部分宽度就会自动充满剩余的区域。
这两个部分都使用div.yui-b来定义,这里b的意思为block。而主内容区域(宽的部分)则需要放在一个div里面,用div#yui-main来指定。代码如下:
...
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
...
代码顺序无关性
有些情况下,人们需要在显示的时候将次要区域放在主要区域前面。例如,有些网站将菜单栏放在次要区域,但是现实的时候让其显示在主要区域的前面,这样方便用户操作,同时也可以达到搜索引擎优化的效果(SEO)。YUI Grids在yui-b上提供了代码无关的排版方式,将页面显示与代码编写分离开来。换句话说,你完全可以将主体部分写在次要部分的前面,但是在现实的时候让它显示在次要部分的后面。
预设的模板宽度
模板样式 | 预设 | 示例 |
---|---|---|
.yui-t1 | 160px 左侧 | 查看 |
.yui-t2 | 180px 左侧 | 查看 |
.yui-t3 | 300px 左侧 | 查看 |
.yui-t4 | 180px 右侧 | 查看 |
.yui-t5 | 240px 右侧 | 查看 |
.yui-t6 | 300px 右侧 | 查看 |
...
<div id="doc" class="yui-t4"> <!-- change class to change preset -->
<div id="hd"></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
<div id="ft"></div>
</div>
...
使用嵌套布局
...
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
...
...
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-g first">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
</div>
...