中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

YUI Grid CSS的优雅设计 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > 其他框架 > YUI Grid CSS的优雅设计

YUI Grid CSS的优雅设计

2008-09-08    文章来源:互联网    浏览次数:

最近加入了一个GAE的项目cpedialog,该项目的前端布局采用YUI Grid CSS,我就顺便看了一下,YUI GridCSS设计的非常优雅,思路非常清晰,打算使用CSS+DIV做网站布局的兄弟非常值得一看。

下面我把我记录的一些要点列出来,便于我以后查阅,同时算是抛砖引玉吧。项目详情请参见 YUI Grid CSS

引入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 GridCSS已经预先定义好了这两个块,并且可以通过改变cssclass的内容来调节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

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部