<!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. SET Statements for SQLServer

    SET SHOWPLAN_ALL { ON | OFF } It will not execute the TSQL statements. It cannot be specified inside ...

  2. php实现斐波那契数列以及由此引起的联想

    斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一 ...

  3. Mac自定义隐藏或显示文件的快捷键

    Mac自定义隐藏或显示文件的快捷键 本教程教大家学会自定义隐藏和显示文件夹的快捷键(Command+Shift+.). 1. 打开应用程序--Automator--选择"服务"-- ...

  4. LINQ使用

    基于扩展方法和lamda表达式 1. 查询序列中满足一定条件 Where扩展方法 public interface ISlotPortBinding { byte SlotNumber { get; ...

  5. [Machine Learning]k-NN

    k-NN最近邻算法 基本思想: 对未知样本X,从训练样本集中获取与其最相近的k个样本,利用这k个样本的类别预测未知样本X的类别. 如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大 ...

  6. fakeLoader.js-针对WebApp中的 “假”预加载

    在做移动端网站的时候,前端有时候需要一些过渡效果,当然我们肯定首先想到肯定是用css3做一个过渡动画,nice,那我给大家一个好用的jQuery插件吧,让你三行代码实现这种过渡动画效果. 1.由于该插 ...

  7. PHP框架Yii2.0安装（基础版、高级版）

    最近农成也是切入了yiiframework 2.0,就是安装yii2.0就花费了不少的时间,为此做了很多的弯路,特此写一篇博文来给后面学习的同学少走一点的弯路.写的不好的地方欢迎各位学习的同学们能够指 ...

  8. iOS支付后默认关注公众号

    1.这个是微信内部的功能,不对外公开,需要商务洽谈.跟技术无关. 2.同时金额少于1块的也不会有提示关注显示. 3.关注过的不会默认再次关注,但是仍然有选项可以选择.

  9. 一个NULL引发的血案

    go sql.stmt query 发生了一个NULL值,所以发现了error, 发现服务不停的初始化sql stmt, 导致连接数过多,服务就变得很慢. 首先,我在初始化的之前,要判断这个是否是NU ...

  10. iOS截图

    1.普通的截图办法,在View上面截图 /** * 截图代码 * * @param view 需要截图的view * @param rect 需要截取的区域 * * @return 返回截取的对象 * ...