YUI Grids CSS - 如何使用问题_CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程

本文介绍了如何实现YUI Grids CSS。

编写基本的标签

通过使用标准的文档类型以及包含YUI的CSS文件后，我们可以轻易实现垂直三栏布局：最上面是页眉、中间是内容部分、最下面是页脚。这种布局并不是必须的，不过在这里，我们将这种布局方式来作为例子。代码如下：

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grids CSS </title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc">
<div id="hd"></div>
<div id="bd"></div>
<div id="ft"></div>
</div>
</body>
</html>

<!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示例页面中看到所有宽度的示例页面。

Html代码

<div id="doc"></div>
<div id="doc2"></div>
<div id="doc3"></div>
<div id="doc4"></div>

<!-- #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个像素的宽度，那么你可以添加以下这段代码来取消边距：

Html代码

<style>
#doc3 {margin:auto;}
</style>

<style>
#doc3 {margin:auto;}
</style>

自定义页面宽度

如果你想要自定义页面的宽度，那也很简单。将你想要的宽度处以13即可（在所有非IE浏览器中，在IE中，你需要除以13.3333）。比如你想要将页面宽度设置为600px，那么代码可以这么写（效果页面）：

Html代码

<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>

<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来指定。代码如下：

Html代码

...
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
...

...
   <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 右侧	查看

下面的代码展示了如何使用一个预设的模板：

Html代码

...
<div id="doc" class="yui-t4">
<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="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>
...

我们之所以要提供模板，不仅仅为了遵循IAB的规范，还因为大多数网页都是使用的这几种布局方式。

使用嵌套布局

YUI Grids CSS提供了一套机制来让你轻松实现嵌套的布局。使用该技术，你可以轻易地将页面主体部分再细分成两列等，进而能够实现更加复杂的布局方式。

基本思路

实现嵌套布局的基本思路是，每个grid都可以作为“单元”的父容器。标准的容器需要制定class为yui-g，内部的单元部分为class=yui-u的div。这样就实现了一个容器包含了两个单元部分，并且这两个单元部分各占据50%的宽度。例外情况我们后面再说。代码如下：

Html代码

...
<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-u first"></div>
         <div class="yui-u"></div>
      </div>
   </div>
</div>
...

一个容器包含两个单元的效果图，可以在这里看到。

注意：CSS中的:first-child选择器

并不是所有的A级浏览器都支持:first-child选择器，所以我们需要手工添加first来指定哪个单元在前面。

深层嵌套

你可以在前面所说的基础上，进行更多嵌套，用来让页面显示出更多的列。（效果页面）在看代码之前，你需要注意两件事情：1、如果一个子单元本身又是一个包含子单元的容器，那么不要将其指定为单元，仍然要用容器来制定他们。2、请确保让每个先出现的单元都拥有first样式。

Html代码

...
<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>
...

...
<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>
...

CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

搜索

热门标签