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

YUI Grids CSS 001 - 介绍

阅读更多

简介:

YUI Grids CSS默认提供了四种预设的页面宽度设置、六种预设的布局模板、并且可以通过嵌套与堆叠来将对象内部区域分栏成两列、三列或者四列。仅仅4Kb的文件,提供了上千种布局组合。其他的特性包含:

  • 支持流布局与固定宽度布局。流布局为自适应浏览器宽度,始终保持100%;固定宽度布局默认设置了750px、950px、974px,你也可以自己设置宽度。
  • 固定宽度布局的页面宽度自定义设置功能十分灵活。
  • 针对客户设置的字体大小进行自动适应。
  • 模板中的列设置与页面内容无关,所以你完全可以将你认为最重要的部分放在页面最醒目的地方,以提高点击率;还可以达到搜索引擎优化的功能(SEO)。
  • 页脚自动清除浮动。你可以不用去管某个列的高度或长度,页脚始终会在页面的最下方。
  • 如果你设置的布局模板不是100%的,那么会自动居中。
  • 对于广告单元的布局,完全遵循Internet架构委员会提出的广告单元设置规范指南
  • 支持所有A级浏览器。

工具:

  • YUI Grids Builder一款能够自定义Grids的简单工具
分享到:
评论

相关推荐

    YUI 中的 Grids CSS值得关注和学习的

    YUI Grids CSS主要包含三个方面的重要概念和技术,分别是: 1. **负边距布局思想**: 负边距(Negative Margins)是一种灵活的布局技术,可以用来创建液态布局(Liquid Layouts),即页面能够根据浏览器窗口的大小...

    27款经典的CSS框架小结 网页制作必备

    芒果曾经介绍过由雅虎开发小组推出的 YUI,而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一,YUI Grids CSS 提供了四种预设页面宽度,六种预设模板。其中的负 Margin 技术,使用度量单位 em,...

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

    雅虎YUI组建

    YUI的CSS组件提供了预定义的样式和布局解决方案,如Grids布局系统,使得网页布局变得更加简单。它还包括了诸如Button、Form、Menu等UI元素的样式,使得网页设计风格统一且易于定制。 **3. JavaScript组件** - **...

    yui 资源包

    2. **响应式设计**:YUI提供了响应式设计工具,如Grids布局系统,能根据屏幕尺寸自动调整页面布局,适应各种设备。 3. **事件处理**:YUI的事件系统强大,支持事件绑定、解绑、事件冒泡等,使得用户交互编程简单易行...

    yahoo3.0 YUI Examples

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

    YUI 详细说明文档

    YUI提供了一套标准化的CSS样式,帮助开发者快速搭建界面。 - **5.1 Fonts**:定义字体样式。 - **5.2 Reset**:重置浏览器默认的样式,确保在不同浏览器间的一致性。 - **5.3 Grids**:提供了一套网格布局系统...

    yui_3.8.1.zip

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

    关于yui的学习

    7. **性能优化**:介绍如何利用YUI工具对JavaScript和CSS进行压缩,提升网页加载速度。 8. **示例和实践**:提供实际代码示例,展示如何在项目中应用YUI。 9. **社区和支持**:提及YUI的社区资源,如官方文档、论坛...

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

    在压缩包文件名称“pure-css-pure-94cae66”中,“pure-css”是项目名称,而“94cae66”可能是该版本的Git哈希值,通常用于追踪代码库中的特定版本。这表明下载的是Pure CSS的一个特定版本,而不是最新的开发版本,...

Global site tag (gtag.js) - Google Analytics