生活随笔
收集整理的這篇文章主要介紹了
YUI Grid CSS的优雅设计（转）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
最近加入了一個(gè)GAE的項(xiàng)目cpedialog,該項(xiàng)目的前端布局采用YUI Grid CSS ,我就順便看了一下，YUI Grid CSS 設(shè)計(jì)的非常優(yōu)雅，思路非常清晰，打算使用CSS +DIV做網(wǎng)站布局的兄弟非常值得一看。下面我把我記錄的一些要點(diǎn)列出來(lái)，便于我以后查閱，同時(shí)算是拋磚引玉吧。項(xiàng)目詳情請(qǐng)參見(jiàn) YUI Grid CSS
引入CSS 文件，這里yahoo提供了共用的css host文件，如果很多網(wǎng)站都使用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 建議把網(wǎng)站整體劃分為3打部分，header, body, footer,并且這三部分放在一個(gè)大的div里,這三大部分使用id selector來(lái)做定義。?
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 為最外側(cè)的div預(yù)先設(shè)置了4個(gè)寬度，分別是750px, 950px, 100%, 974px，可以通過(guò)改變最外側(cè)div的id來(lái)改變它的寬度，同時(shí)用戶還可以根據(jù)自己的需要自己定義最外側(cè)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ù)網(wǎng)站可以把body分成兩個(gè)部分，main-block and second-block,YUI Grid CSS 已經(jīng)預(yù)先定義好了這兩個(gè)塊，并且可以通過(guò)改變css class的內(nèi)容來(lái)調(diào)節(jié)main-block和second-block的左右位置，以及second-block的寬度，main-block將會(huì)占用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的右側(cè)，除了yui -t4,之外，還有yui -t1 到yui -t6，每一個(gè)都表示不同的含義。 在main-block中還支持內(nèi)嵌的grid ,css class用yui -g來(lái)表示，在內(nèi)嵌的grid 中，包含不同的uint,css 使用yui -u來(lái)表示 ?
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>
?內(nèi)嵌的grid 還可以內(nèi)嵌grid ,這樣就可以設(shè)計(jì)出非常復(fù)雜的page layout來(lái)，同時(shí)還可以指定那個(gè)unit在前，哪個(gè)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>
?對(duì)于內(nèi)嵌的grid ,如果使用css class="yui -g"，里面的兩個(gè)unit是均分width的，如果有特殊需要，還可以指定，css class為yui -gb到yui -gf，這些css 分別定義了兩個(gè)unit如何分配grid 的width 轉(zhuǎn)載于:https://www.cnblogs.com/myitm/archive/2010/04/05/1704875.html
總結(jié)
以上是生活随笔 為你收集整理的YUI Grid CSS的优雅设计（转） 的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
