YUI Grids CSS 003 - 入门教程

最新推荐文章于 2022-01-06 18:28:19 发布

stenlylee

最新推荐文章于 2022-01-06 18:28:19 发布

阅读量164

点赞数

分类专栏：其他项目文章标签： YUI CSS JavaScript 浏览器 Yahoo ViewUI

其他项目专栏收录该内容

12 篇文章 0 订阅

订阅专栏

首先，我们建议使用以下这种!DOCTYPE来调用浏览器的标准浏览模式（如果浏览器拥有多种浏览模式）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

想要使用YUI Grids CSS，首先你需要在页面中使用link标签包含以下代码：

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/grids/grids-min.css">

Grids使用基于Fonts CSS的宽度单位“em”来实现宽度定义，因此，那个文件也需要包含进来。For the sake of this document, the level playing field provided by Reset CSS is also assumed.（看懂的人帮忙翻译下这句话）包含了文档类型定义以及需要链接的文件以后，你的文档开始部分与head部分应该类似这样：

<!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="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
</head>

YUI CSS

注意，如果你使用YUI CSS框架，并且想要包含Reset、Fonts与Grids包，那么你应该使用我们提供的集成优化文件“reset-fonts-grids.css”，这样能提高你的页面加载速度，你写代码的时候也不用一个个地去添加它们了。

<!-- Source File -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">

YUI依赖配置器（YUI Dependency Configurator）

你也可以不用通过复制粘贴的方式将文件路径添加到你的页面中去，你可以尝试使用YUI依赖配置器来决定如何加入这些包才能达到最优化效果。该配置器使用YUI加载器（YUI Loader）来生成你想要的最优化的HTML代码。

注意：如果你想要通过YUI Loader来包含这些组件，那么你要记住它的组件名称：grids。（完整的YUI Loader模块名称列表可以点击这里查看）

这些文件来自哪里？

上面提到的需要包含的这些文件，由Yahoo！服务器提供；你可以查看“Yahoo！提供的YUI文件服务”来了解更多关于该服务的细节。JavaScript的最小化，指的是，所有注释以及空白字符都已经被删除。这样能让JavaScript文件在下载的时候明显减小体积。如果你想要下载完整的，包含注释的版本，或者是-debug版本，请下载它们，并且将其放到你自己的服务器上来引用。