<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
    
<title>YUI Grids CSS </title>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<!-- Source File -->
    
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"><!--引入yaho的css 框架-->
    
<style>
    #custom-doc 
{ /*用户自定义的body的width */
        margin
:auto;text-align:left; /* leave unchanged */ 
        width
:46.15em;/* non-IE */ 
        *width
:45.00em;/* IE */ 
        min-width
:600px;/* optional but recommended */ 
    
}
 
    
</style>
</head>
<body>
    
<!--

            * div#doc creates a 750px page width.
            * div#doc2 creates a 950px page width.
            * div#doc3 creates a 100% page width. (Note that the 100% page width also sets 10px of left and right margin so that content had a bit of breathing room between it and the browser chrome.)
            * div#doc4 creates a 974px page width, and is a new addition to Grids in YUI version 2.3.0.



            * div.yui-t1 creates a narrow column on the left with 160px width.
            * div.yui-t2 creates a narrow column on the left with 180px width.
            * div.yui-t3 creates a narrow column on the left with 300px width.
            * div.yui-t4 creates a narrow column on the right with 180px width.
            * div.yui-t5 creates a narrow column on the right with 240px width.
            * div.yui-t6 creates a narrow column on the right with 300px width.


            * div.yui-g - Standard Nesting Grid - tells two children to each take up half the available space.
            * div.yui-gb - Special Nesting Grid B - tells three children to each take up a third of the available space.
            * div.yui-gc - Special Nesting Grid C - tells the first of two children to take up 66% of the available space.
            * div.yui-gd - Special Nesting Grid D - tells the first of two children to take up 33% of the available space.
            * div.yui-ge - Special Nesting Grid E - tells the first of two children to take up 75% of the available space.
            * div.yui-gf - Special Nesting Grid F - tells the first of two children to take up 25% of the available space.

      
-->
    
<div id="doc" class="yui-t4"> <!--  "doc"还可用doc2,doc3,doc4代替,表示body的宽度;-->
       
<div id="hd">头文件</div>
       
<div id="bd">
        
<!--
                Inside #bd, if two blocks (.yui-b) exist, designate a main block by
                wrapping it with <div id=”yui-main>: 
                 
                <div id=”yui-main”> 
                    <div class”yui-b”>primary</div> 
                </div> 
                <div class=”yui-b”>secondary</div> 

        
-->
            
<div id="yui-main">
               
<div class="yui-b"><!-- "b"表示是block,即块状元素-->
                  
<div class="yui-gd"> <!-- the "special grid",分为yui-g,yui-gb,.yui-gf分别指定每个yui-u的width百分比 -->
                     
<div class="yui-u first">左边部分</div><!--第一个必须加个first-->
                     
<div class="yui-u"></div>
                  
</div>
               
</div>
            
</div>
       
<div class="yui-b">右边部分</div>
       
</div>
       
<div id="ft">尾部文件</div>
    
</div>
    

</body>
</html>


下载地址:(内含我的demo页)
http://www.phpweblog.net/Files/fuyongjie/yui.rar