zoukankan      html  css  js  c++  java

  • YUI Grid CSS的优雅设计

    最近加入了一个GAE的项目cpedialog,该项目的前端布局采用YUI Grid CSS,我就顺便看了一下，YUI Grid CSS设计的非常优雅，思路非常清晰，打算使用CSS+DIV做网站布局的兄弟非常值得一看。下面我把我记录的一些要点列出来，便于我以后查阅，同时算是 抛砖引玉吧。项目详情请参见 YUI Grid CSS

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

    Html代码
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    
    2.      "http://www.w3.org/TR/html4/strict.dtd">   
    3.     <html>   
    4.     <head>   
    5.         <title>YUI Grids CSS </title>   
    6.         <!-- Source File -->   
    7.         <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">   
    8. </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代码 <embed height="15" width="14" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" quality="high" flashvars="clipboard=%3C!DOCTYPE%20HTML%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20HTML%204.01%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml4%2Fstrict.dtd%22%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%09%3Ctitle%3EYUI%20Grids%20CSS%20%3C%2Ftitle%3E%0A%09%3C!--%20Source%20File%20--%3E%0A%09%3Clink%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%20href%3D%22reset-fonts-grids.css%22%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Cdiv%20id%3D%22doc%22%3E%0A%20%20%20%3Cdiv%20id%3D%22hd%22%3E%3C!--%20header%20--%3E%3C%2Fdiv%3E%20%0A%20%20%20%3Cdiv%20id%3D%22bd%22%3E%3C!--%20body%20--%3E%3C%2Fdiv%3E%20%0A%20%20%20%3Cdiv%20id%3D%22ft%22%3E%3C!--%20footer%20--%3E%3C%2Fdiv%3E%20%0A%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E" src="http://www.javaeye.com/javascripts/syntaxhighlighter/clipboard_new.swf" lk_mediaid="lk_juiceapp_mediaPopup_1236157097210" lk_media="yes">
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
    2. <html>  
    3. <head>  
    4.     <title>YUI Grids CSS </title>  
    5.     <!-- Source File -->  
    6.     <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">  
    7. </head>  
    8. <body>  
    9. <div id="doc">  
    10.    <div id="hd"><!-- header --></div>   
    11.    <div id="bd"><!-- body --></div>   
    12.    <div id="ft"><!-- footer --></div>   
    13. </div>  
    14. </body>  
    15. </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代码
    1. <!-- #doc = 750px width, centered-->  
    2. <div id="doc"></div>  
    3.   
    4. <!-- #doc2 = 950px width, centered -->  
    5. <div id="doc2"></div>  
    6.   
    7. <!-- #doc3 = 100% width -->  
    8. <div id="doc3"></div>  
    9.   
    10. <!-- #doc4 = 974px width, centered -->  
    11. <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代码
    1. <div id="doc" class="yui-t4"> <!-- change class to change preset -->  
    2.    <div id="hd"></div>  
    3.    <div id="bd">  
    4.       <div id="yui-main">  
    5.          <div class="yui-b"></div>  
    6.       </div>  
    7.       <div class="yui-b"></div>  
    8.    </div>  
    9.    <div id="ft"></div>  
    10. </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代码
    1. <div id="yui-main">  
    2.    <div class="yui-b">  
    3.       <div class="yui-g">  
    4.          <div class="yui-u first"></div>  
    5.          <div class="yui-u"></div>  
    6.       </div>  
    7.    </div>  
    8. </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代码 <embed height="15" width="14" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" quality="high" flashvars="clipboard=%3Cdiv%20id%3D%22yui-main%22%3E%0A%20%20%20%3Cdiv%20class%3D%22yui-b%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22yui-g%22%3E%0A%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22yui-g%20first%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22yui-u%20first%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22yui-u%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22yui-g%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22yui-u%20first%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22yui-u%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A" src="http://www.javaeye.com/javascripts/syntaxhighlighter/clipboard_new.swf" lk_mediaid="lk_juiceapp_mediaPopup_1236157097232" lk_media="yes">
    1. <div id="yui-main">  
    2.    <div class="yui-b">  
    3.       <div class="yui-g">  
    4.          <div class="yui-g first">  
    5.             <div class="yui-u first"></div>  
    6.             <div class="yui-u"></div>  
    7.          </div>  
    8.          <div class="yui-g">  
    9.             <div class="yui-u first"></div>  
    10.             <div class="yui-u"></div>  
    11.          </div>  
    12.       </div>  
    13.    </div>  
    14. </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
  • 相关阅读:
    ArchLinux安装(UEFI)
    html+css第三篇
    html+css第二篇
    html+css第一篇
    工作流会用到几张表
    Sql server 删除重复记录的SQL语句
    idea创建 springboot工程(支持jsp)
    sql查询重复数据
    idea中解决整合SSM加载不到dataSource；
    maven私服
  • 原文地址：https://www.cnblogs.com/danghuijian/p/4400699.html
Copyright © 2011-2022 走看看