若平欢迎您！
若平博客

Yahoo YUI CSS学习与研究

分类:CSS2 创作时间: 2009年8月4日 阅读次数:

YUI Grid CSS设计的非常优雅，思路非常清晰，打算使用CSS+DIV做网站布局的兄弟非常值得一看。

引入CSS 文件，这里yahoo提供了共用的css host文件，如果很多网站都使用yahoo host的js ,css,那么这些css,js将仅加载一次，有利于提高浏览速度。 

Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
    <html>   
    <head>   
        <title>YUI Grids CSS</title>   
        <!-- Source File -->   
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">   
</head>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
     <title>YUI Grids CSS</title>
     <!-- Source File -->
     <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
</head>

YUI Grid CSS建议把网站整体划分为3打部分，header, body, footer,并且这三部分放在一个大的div里,这三大部分使用id selector来做定义。 

Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>YUI Grids CSS</title> 
    <!-- Source File --> 
    <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> 
</head> 
<body> 
<div id="doc"> 
   <div id="hd"><!-- header --></div>   
   <div id="bd"><!-- body --></div>   
   <div id="ft"><!-- footer --></div>   
</div> 
</body> 
</html> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>YUI Grids CSS</title>
 <!-- Source File -->
 <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc">
   <div id="hd"><!-- header --></div>
   <div id="bd"><!-- body --></div>
   <div id="ft"><!-- footer --></div>
</div>
</body>
</html>

YUI Grid CSS为最外侧的div预先设置了4个宽度，分别是750px, 950px, 100%, 974px，可以通过改变最外侧div的id来改变它的宽度。
同时用户还可以根据自己的需要自己定义最外侧div的宽度。

Html代码
<!-- #doc = 750px width, centered--> 
<div id="doc"></div> 
 
<!-- #doc2 = 950px width, centered --> 
<div id="doc2"></div> 
 
<!-- #doc3 = 100% width --> 
<div id="doc3"></div> 
 
<!-- #doc4 = 974px width, centered --> 
<div id="doc4"></div> 

<!-- #doc = 750px width, centered-->
<div id="doc"></div>

<!-- #doc2 = 950px width, centered -->
<div id="doc2"></div>

<!-- #doc3 = 100% width -->
<div id="doc3"></div>

<!-- #doc4 = 974px width, centered -->
<div id="doc4"></div>

绝大多数网站可以把body分成两个部分，main-block and second-block,YUI Grid CSS已经预先定义好了这两个块。
用户可以通过改变css class的内容来调节main-block和second-block的左右位置，以及second-block的宽度，main-block将会占用second-block宽度剩余的宽度。

Html代码
<div id="doc" class="yui-t4"> <!-- change class to change preset --> 
   <div id="hd"></div> 
   <div id="bd"> 
      <div id="yui-main"> 
         <div class="yui-b"></div> 
      </div> 
      <div class="yui-b"></div> 
   </div> 
   <div id="ft"></div> 
</div> 

<div id="doc" class="yui-t4"> <!-- change class to change preset -->
   <div id="hd"></div>
   <div id="bd">
      <div id="yui-main">
         <div class="yui-b"></div>
      </div>
      <div class="yui-b"></div>
   </div>
   <div id="ft"></div>
</div>

yui-b中的b 表示block, 在最外层的class="yui-t4"表示second-block占用180px，排列在main-block的右侧，除了yui-t4,之外，还有yui-t1 到yui-t6，每一个都表示不同的含义。
在main-block中还支持内嵌的grid,css class用yui-g来表示，在内嵌的grid中，包含不同的uint,css使用yui-u来表示。

Html代码
<div id="yui-main"> 
   <div class="yui-b"> 
      <div class="yui-g"> 
         <div class="yui-u first"></div> 
         <div class="yui-u"></div> 
      </div> 
   </div> 
</div> 

<div id="yui-main">
   <div class="yui-b">
      <div class="yui-g">
         <div class="yui-u first"></div>
         <div class="yui-u"></div>
      </div>
   </div>
</div>

内嵌的grid还可以内嵌grid,这样就可以设计出非常复杂的page layout来，同时还可以指定那个unit在前，哪个unit在后，使用css class="first"

Html代码
<div id="yui-main"> 
   <div class="yui-b"> 
      <div class="yui-g"> 
         <div class="yui-g first"> 
            <div class="yui-u first"></div> 
            <div class="yui-u"></div> 
         </div> 
         <div class="yui-g"> 
            <div class="yui-u first"></div> 
            <div class="yui-u"></div> 
         </div> 
      </div> 
   </div> 
</div> 

<div id="yui-main">
   <div class="yui-b">
      <div class="yui-g">
         <div class="yui-g first">
            <div class="yui-u first"></div>
            <div class="yui-u"></div>
         </div>
         <div class="yui-g">
            <div class="yui-u first"></div>
            <div class="yui-u"></div>
         </div>
      </div>
   </div>
</div>
对于内嵌的grid,如果使用css class="yui-g"，里面的两个unit是均分width的。
如果有特殊需要，还可以指定，css class为yui-gb到yui-gf，这些css分别定义了两个unit如何分配grid的width。

这篇文章并非原创，感觉非常精彩，可以拿来做固定宽度或自适应宽度布局，而且自然是跨浏览器的，所以粘来便于以后学习。

原创文章如转载，请注明转载自若平博客

文章标题：Yahoo YUI CSS学习与研究

链接地址：http://www.ropean.org/CSS2/YUI.htm

YUI  CSS  0次引用
« 多种思路给js文件传递参数国际域名历史记录查询(.com.net.org) »

相关日志:

发表评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。