生活随笔
收集整理的這篇文章主要介紹了
YUI Grid CSS的优雅设计（转）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
最近加入了一個GAE的項目cpedialog,該項目的前端布局采用YUI Grid CSS ,我就順便看了一下，YUI Grid CSS 設計的非常優(yōu)雅，思路非常清晰，打算使用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 > ????????? ?? ????????< 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 > ?????? ????< link rel "stylesheet" type "text/css " href "reset-fonts-grids.css " > </ head > < body > < div id "doc" > ???< div id "hd" > </ div > ???< div id "bd" > </ div > ???< div id "ft" > </ 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來改變它的寬度，同時用戶還可以根據(jù)自己的需要自己定義最外側div的寬度 Html代碼
?? < div id "doc" > </ div > ?? ?? < div id "doc2" > </ div > ?? ?? < div id "doc3" > </ div > ?? ?? < 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>
?絕大多數(shù)網站可以把body分成兩個部分，main-block and second-block,YUI Grid CSS 已經預先定義好了這兩個塊，并且可以通過改變css class的內容來調節(jié)main-block和second-block的左右位置，以及second-block的寬度，main-block將會占用second-block寬度剩余的寬度 ?
Html代碼
< div id "doc" class "yui -t4" > ???< 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 轉載于:https://www.cnblogs.com/myitm/archive/2010/04/05/1704875.html
總結
以上是生活随笔 為你收集整理的YUI Grid CSS的优雅设计（转） 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
