<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI3 CSS</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.3.0/build/cssreset/reset-min.css&3.3.0/build/cssfonts/fonts-min.css&3.3.0/build/cssgrids/grids-min.css">
<style type="text/css">
body {
margin: auto; /* center in viewport */
width: 1200px;
}
#hd h1 {
font: bold 180% arial;
padding: 1em;
}
#ft {
background: #999;
font:80% verdana;
padding: 1em;
text-align: center;
}
</style>
</head> <body>
<div>
<div id="hd">
<h1>Page Layout Example</h1>
</div>
<div class="yui3-g">
<div class="yui3-u-1-2" style="background-color:#333;min-height:350px;"><!-- header --></div>
<div class="yui3-u-1-2">
<div class="yui3-g" style="background-color:#633;min-height:150px;">
<div class="yui3-u-3-4" style="background-color:#fff;min-height:50px;">
<div class="yui3-g" style="background-color:#633;min-height:150px;">
<div class="yui3-u-1-4" style="background-color:#093;min-height:100px;">1</div>
<div class="yui3-u-1-4" style="background-color:#F6F;min-height:100px;">2</div>
<div class="yui3-u-1-4" style="background-color:#093;min-height:100px;">3</div>
<div class="yui3-u-1-4" style="background-color:#F6F;min-height:100px;">4</div>
</div>
</div>
<div class="yui3-u-1-4" style="background-color:#F6F;min-height:100px;">5</div>
</div>
</div>
</div>
<div id="ft">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu arcu, volutpat vel volutpat vel, varius ac odio.</p>
</div>
</div>
</body>
</html>

YUI3 CSS的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. java版的YUI3 combine服务-Combo Handler

    YUI3中,为了避免js文件过大,各个功能模块是拆分的.它有一个“种子”的概念:先下载一个小的核心的js文件到浏览器端,再通过这个小的js文件去加载其它所需的模块. 这种按需加载虽然解决了单个js过大 ...

  3. CSS框架分析与网站的CSS架构

    框架(framework)是一个基本概念上的结构,用于去解决或者处理复杂的问题,是一种可复用的构架. 我们对CSS框架这个词比较陌生,但对于JavaScript框架就比较熟悉了,比如jQuery 但为 ...

  4. 【原】从一个bug浅谈YUI3组件的资源加载

    篇前声明:为了不涉及业务细节,篇内信息统一以某游戏,某功能代替 前不久,某游戏准备内测客户端,开发人员测试过程中发现某功能突然不灵了,之前的测试一切ok,没有发现任何异常,第一反应是,游戏内浏览器都是 ...

  5. 转:按需加载html 图片 css js

    按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能.触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击.输入文字. ...

  6. Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么(转)

    Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...

  7. [转]使用 YCombo 做 JS /CSS开发 合并 压缩

    本文转自:http://www.neoease.com/minimize-javascript-files-using-ycombo/ 前文已介绍过 YCombo 及相关的 CSS 和 JS 合并工具 ...

  8. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  9. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

随机推荐

  1. JS传中文到后台需要的处理

    前台JS使用encodeURI函数对中文进行编码. 后台Java使用URIDecoder.decode(str,UTF_8)函数对中文进行解码,之后获得中文原文.

  2. iOS Block浅析

    Block 的使用有两种:1.独立Block .2.内联Block .   <一>独立Block 使用方式   一.定义一个Block Object,并调用.   1.定义   // 定义 ...

  3. Linux系统中缺少GUI设备引起的HeadlessException

    缺少X11显示设置 Exception in thread "AWT-EventQueue-0" java.awt.HeadlessException: No X11 DISPLA ...

  4. Linux命令行--使用linux环境变量(转)

    5.1 什么时环境变量 bash shell用一个成为环境变量的特性来存储有关的shell回话和工作环境的信息,这是它们成为环境变量的原因.它允许你在内存中存储数据,以便运行在账户.系统.shell的 ...

  5. 一个由INode节点爆满引起的业务故障

    一个由INode节点爆满引起的业务故障 http://2358205.blog.51cto.com/2348205/1747951 好久没有写博文了,今天周六,分享一下刚刚处理完的一个小故障 现象描述 ...

  6. APICloud请你看英特尔智能硬件大赛决赛直播

    英特尔智能硬件大赛由英特尔硬享公社(CCE)发起,联合了全国各地50余家产业链优秀合作伙伴,旨在集合全国硬创资源,携手寻找中国最具代表性的硬件创业项目,并通过技术支持.资源对接.产品推广等方式助力项目 ...

  7. Inside Flask - Flask 简介

    Inside Flask - Flask 简介 前言 Flask 的设计目标是实现一个 wsgi 的微框架,其核心代码保持简单和可扩展性,很容易学习.对于有一定经验初学者而言,跟着例子和一些书的代码来 ...

  8. 如何禁止DELETE、PUT、OPTIONS、TRACE、HEAD等协议访问应用程序 .

    原文:http://linder.iteye.com/blog/735435   简介 WebDAV (Web-based Distributed Authoring and Versioning)是 ...

  9. 又来了,SDE非直连

    现在sde都推荐直连了,没想到还是遇到了非直连. 用10.1默认是直连,但还支持非直连. 安装半天始终无法启动.系统差点崩了. 原来是sde用户密码过期锁定了,好烦. C:\Program Files ...

  10. Chrome模拟手机浏览网页

    用Chrome模拟手机浏览网页,只需要编辑一个命令就可以实现 C:\Users\xxx\AppData\Local\Google\Chrome\Application\chrome.exe --use ...