`
stenlylee
  • 浏览: 260567 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

YUI Grids CSS 003 - 入门教程

阅读更多

首先,我们建议使用以下这种!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框架,并且想要包含ResetFontsGrids包,那么你应该使用我们提供的集成优化文件“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版本,请下载它们,并且将其放到你自己的服务器上来引用。

引入文件的排列顺序

由于JavaScript文件与CSS文件的特征所决定,这些文件必须要按照一定的顺序排列,如果你将排列顺序颠倒了,那么就可能会出现错误。

分享到:
评论

相关推荐

    yui.rar 例子

    在这个例子中,左中右三个模块的划分,正是通过YUI的Container组件和Grids CSS实现的,它们使得页面结构清晰,代码可读性强。 接下来,我们要讨论的是YUI的模块化设计。YUI遵循了“按需加载”的原则,这意味着...

    优秀的CSS 框架整理

    比如:  * typography.css 字体排版规则 * grid.css 表格布局 * layout.css 布局 * form.css 表单 * general.css CSS常规设置 下面是一些不错的CSS框架,推荐...很不错的框架,基础的YUI Grids CSS提供4种页面宽

    精选国外15个CSS框架.pdf

    4. **YUI Grids CSS** - YUI是Yahoo!公司推出的前端框架,其Grids CSS用于创建灵活和响应式的网格布局。 - 适用于需要高性能和高质量前端设计的大型项目。 5. **Clever CSS** - Clever CSS是一个利用CSS的语法...

    精选国外15个CSS框架整理.pdf

    这些CSS框架各有特色,有的专注于网格系统,如960 Grid System和YUI Grids CSS,有的强调简洁性和可读性,如CleverCSS,还有些如Emastic和Elements,提供更加全面的解决方案,涵盖工作流程和设计元素。选择合适的CSS...

    yahoo3.0 YUI Examples

    3. **CSS组件**:YUI提供了丰富的CSS样式库,如Grids(网格布局)、Buttons(按钮)、Forms(表单)等,使得界面设计更加统一和规范。 4. **Widget系统**:YUI 3的Widget系统是一套强大的UI组件,包括了如...

    yui_3.8.1.zip

    3. **CSS样式和布局**:YUI包含一套响应式设计的CSS框架,如Grids布局系统,帮助开发者快速创建响应式的网页布局。 4. **数据管理**:YUI提供了Model、ModelList和Store等组件,用于数据的存储、管理和同步,与...

    yui_3.0.0(雅虎官方)

    2. **响应式设计支持**:在YUI 3.0.0中,雅虎增强了对响应式设计的支持,提供了多种工具和组件,如Grids布局系统,帮助开发者创建适应不同屏幕尺寸和设备的网页。 3. **事件系统**:YUI 3.0.0提供了一个强大的事件...

    枫叶留言板 1.9.zip

    本程序的最大特色是没有使用数据库,适合小型站点使用。 作为一个轻巧灵便的文本留言板,枫叶留言板提供了更便捷的使用方法。 使用它,您可以: ...8.使用了YUI Grids CSS 和 blueprint 9.实现了首页 ajax 刷新

    Yahoo JavaScript库 YUI源码

    4. **CSS样式工具**:YUI包含了CSS Reset和Grids,帮助开发者快速创建整洁、响应式的布局,减少了样式冲突问题。 5. **数据绑定和模板引擎**:YUI的数据绑定功能允许开发者将JavaScript对象与HTML元素进行绑定,...

    Pure一组可以用在任何Web项目的迷你响应式CSS模块

    7. **社区支持**:Pure CSS是YUI(Yahoo User Interface Library)的一部分,拥有活跃的社区和丰富的文档,开发者可以从中获取帮助和示例。 8. **与其他框架集成**:由于其轻量级和模块化的特点,Pure CSS很容易与...

    css框架(CSS Frameworks):CSS框架应用

    YUI Grids CSS是由Yahoo开发的基础网格系统,通过4种预设的页面宽度、6种模板和2到4列的区块功能,提供了超过1000种布局组合,仅需一个4KB的CSS文件。 Logicss Framework则是结合了CSS和PHP,旨在减少符合Web标准的...

    yui博客

    5. **响应式设计**:YUI的CSS Grids和Utilities类可以帮助开发者轻松实现响应式布局,确保博客在不同设备上都能良好显示。 6. **调试与优化**:YUI提供了一些工具,如Logger和Profiler,帮助开发者进行性能分析和...

    yui

    在YUI库中,`yui-main`可能是指YUI的核心模块,它包含了库的基本功能和基础设施,如事件处理、动画效果、DOM操作等。使用YUI时,开发者通常会根据项目需求选择包含特定功能的模块,以减少不必要的代码体积,提高页面...

    Ext中文手册

    EXT的核心库包含了一些基础功能,如元素操作、动画效果、事件处理等,是EXT组件系统的基础。熟悉EXT Core可以帮助开发者更高效地利用EXT进行开发。 总的来说,EXT中文手册是EXT开发者的重要参考资料,无论你是初学...

Global site tag (gtag.js) - Google Analytics