YUI3 CSS

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

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。