<!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>
浙公网安备 33010602011771号