大家一起来博皮——2：液态布局和固态布局，页面框架篇
大家一起來博皮
雖然博客園的皮膚很多，而且很漂亮。但是那些自己想更“個性化”自己博客皮膚的朋友，對博客園的皮膚模板還是頗多不滿，認為皮膚的結構過于混亂，css樣式難以掌控。針對這種情況，博客園開發團隊在2007年底，對博客園皮膚模板進行了較大程度的改進和調整，力求讓更多的朋友能夠更方便、簡單的制作自己個性化的博客皮膚。
但是，到底如何利用新的皮膚模板，來制作個性化的博客皮膚呢？且看《大家一起來博皮》系列文章，告訴你制作個性“博皮”的秘密。
液態和固體
網頁就布局方式來分，可以分為液態布局和固態布局。那什么是“液態”?什么是“固態”呢？其實很簡單！
說到“液態”大家可能最多想到的是“水”，說到“固態”大家可能最多想到是“石頭”。想象一下這樣的情景——我們把瀏覽器當成一個容器，然后把“水”倒到這個容器里面，當我們改變瀏覽器大小的時候，里面的“水”就會根據瀏覽器的長和寬的改變來改變形態。而當我們把“石頭”放在容器里面的時候，“石頭”并不會改變自己來適應瀏覽器的，所以瀏覽器就會出現橫向或者豎向的滾動條。
小弟嘴拙，所以上面這個蹩腳的比喻，可能不能給你一個清晰的理解。那么請分別運行下面的兩段代碼，這個兩個示例頁面，可能對你的有進一步的幫助——
下面這個是液態布局的示例頁面代碼，其中說明了液態布局的優點和缺點。
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web標準,楊正祎,博客園,實例代碼" /> <meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例頁面</title> <style type="text/css"> #liquid_test{ border:1px solid red; width:99%; } </style> </head> <body> <div id="liquid_test"> <p><strong>這是一個液態布局的例子。改變瀏覽器的大小，來觀察這個div容器和里面文字的變換。</strong></p> <p><strong>液態布局的好處就是，無需關注用戶屏幕分辨率的大小，網頁能夠自己去適應。但是液態布局也有其不好的方面，例如：不同顯示器分辨率情況下，布局控制比較麻煩，需要考慮到情況很多。還有就是在不同分辨率的情況下，瀏覽器大小不同，從而使得網頁看上去變化較大，不能讓用戶獲得較為統一的視覺感受。還有就是，如果網頁里面包含較大的圖片時就會比較麻煩了。還有比較令人郁悶的一點是液態布局的時候，背景圖片用起來比較麻煩，寬度不好調整。當然，你可以使用<a target="_blank" href="http://www.cnblogs.com/JustinYoung/archive/2007/09/25/905740.html" title="滑動門技術">滑動門技術</a>來解決問題，但是畢竟不是每個人都喜歡利用額外的技術來達到視覺的改善。</strong></p> <p>為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。</p> </div> </body> </html> 提示：可以先在文本框內，根據需要修改代碼后再運行下面這個是固態布局的示例頁面代碼，其中說明了固態布局的優點和缺點。
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web標準,楊正祎,博客園,實例代碼" /> <meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例頁面</title> <style type="text/css"> #solid_test{ border:1px solid blue; width:800px; margin:0 auto;/*讓容器居中顯示*/ } </style> </head> <body> <div id="solid_test"> <p><strong>這是一個固態布局的例子。改變瀏覽器的大小，來觀察這個div容器和里面文字的變換（其實是沒有變化。但是需要注意到是：當寬度低于800px的時候，瀏覽器會出現橫線滾動條。）</strong></p> <p><strong>固態布局的好處就是，無論什么情況，網頁容器寬度是固定的，只要調整好固定寬度時的網頁布局就可以了，無需考慮多種情況下的布局顯示。但是固態布局的缺點也很明顯——到底要設固定寬度為多少呢？太大的時候，如果用戶屏幕分辨率太小的，就會出現橫線滾動條，會讓人不爽。不過太小的話，那些使用寬屏的用戶，就會發現，網頁擠在一起的像一陀db，但是卻又很多的剩余空間沒有別利用，浪費掉了。</strong></p> <p>為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。為了營造示例效果這里是些無關的填充文字。這個示例頁面來自博客園<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。</p> </div> </body> </html> 提示：可以先在文本框內，根據需要修改代碼后再運行通過上面的示例頁面，我們可以看出，“液態”布局和“固態”布局，最基本的差別就是網頁容器的寬度設置方式：液態布局是用百分比來設置寬度，而固態布局采用的固定值來設置寬度。他們各自的優缺點已經在示例頁面中說明，你可以運行上面的代碼看到。
“液態”or“固態”？面臨選擇，我們該如何抉擇？
融合！石頭里的水和水里的石頭！
融合而非吞并
還記得當初剛設計好這個logo（右圖所示），放在網頁上的時候，有個朋友評論道：“很好，FireFox吃掉IE，這個很有意思！”。當時看到這條留言的時候，就完全喪失了自己對圖片設計的信心。因為，當初設計這個logo的初衷，并不是想表現誰吃掉誰，而是想表達一種“和諧的融合”這個含義。
其實面對眾多選擇，我們是不是就一定要把一個抱住懷里呵護著，而把另一個踩在腳底呢？我們難道就不能兩者都有所兼顧嗎？就如同上面關于“液態布局”和“固態布局”的選擇。如果，我們選擇了一方，就一定要拋棄另外一種嗎？其實，非也、非也。我們還是可以讓石頭和水很好的融合的。
亦水亦石
博客新模板，采用了一種“亦水亦石”的布局方式。
首先，對皮膚制作有興趣的朋友可以去http://skintemplate.cnblogs.com下載到最新的博客皮膚模板靜態頁面和開發文檔。這些靜態頁面是根據最新的博客皮膚模板，剝離出來的靜態頁面。結構以及各個頁面元素的id和class，和最新的博客皮膚模板是一致，這樣就可以方便大家在本地進行進行模板制作和調試了。而開發文檔則詳細的表明了網頁結構以及頁面元素的id和class。（請3月8日以前下載的朋友再重新下載一遍，因為新的版本有一處較大的修改。給您帶來不便，請諒解。）
通過對最新模版的分析（可以借助工具IE Developer Toolbar進行分析），可以得知：模板頁面自己定義的最外層容器是一個id為“home”的div。“home”里面分別是id為“header”的頭部div，id為“main”的主體div，以及id為“footer”的底部版權信息div。
為什么要把所有的東西，都包含在一個id為“home”的div容器里面呢？考慮因素是多方面的，但是為了達到“亦水亦石”的效果，絕對是一個重量級的因素——只要我們將“#home”的寬度設置為百分比形式，那么模板就是液態的布局方式，而當我們將“#home”的寬度設置為固定寬度值的話，那么模板就又變成了固態的布局方式。
石頭里面的水
當我們將“#home”的寬度設置為百分比時，之所以整個頁面都是“液態”的，是因為“#home”容器里面的“#header”、“#main”、“#footer”各個容器都是液態布局的。所以當“#home”改變寬度的時候，“#header”、“#main”和“#footer”自然也會跟著改變寬度。這就如同，我們將很多裝了“水”的氣球，放在一個大的裝了“水”的氣球里面。當最外面的氣球被擠壓的時候，里面的“水氣球”也會跟著變化。
但是，當我們將“#home”的寬度設置為固定寬度值的時候，最大的容器變成了“固態”的，而里面的那些“#header”、“#main”和“#footer”雖然是液態的，但是沒有關系，它們依然能很好的呈現在“#home”容器里面。這就如同將很多裝了“水”的氣球，放在一個有著石頭外殼的大容器里面。因為石頭容器不會發生改變，所以，自然不用擔心里面的“水氣球”會發生變化。布局依然沒有任何問題。
“液態布局”還是“固態布局”？我們只要改變“#home”寬度的設置方式即可，完全沒有必要再去修改“#header”、“#main”和“#footer”的寬度。這就將液態和固態的切換改變，變得非常容易。
水里的石頭
通過上面一節的描述和介紹，可以知道，博客主體內容被放在了一個id為“main”的div水氣球里面。當我們將“#main”單獨拎出來，作為一個“頁面中的小頁面”進行分析的時候。可以得知：其實“#mian”里面包含了兩個div容器，第一個是id為“mainContent”的div主容器，第二個是id為“sideBar”的div側邊欄容器。（為什么側邊欄容器一定要放在后面的原因，可以參考《《播客》項目總結——web標準頁面設計方面 》一文中“排隊，排隊！”小節。）
為了便于講解，我們需要簡化這個模型，這樣我們就可能需要另一個示例——一個簡化了的，但是結構完全相同的示例頁面。
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web標準,楊正祎,博客園,實例代碼" /> <meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例頁面</title> <style type="text/css"> #home { margin: 0 auto; width:95%; background-color:#ccc; } #header { background-color:red; min-height:20px; } #main{ width: 100%; min-height:200px; background-color:black; } #mainContent { float: right; min-height: 200px; width:69%; background-color:Teal; } #sideBar { width: 30%; min-height: 200px; float: left; background-color:yellow; } #footer { min-height: 15px; background-color:pink; } .clear{ clear:both; } </style> </head> <body> <div id="home"> <div id="header"> i'm header! </div> <div id="main"> <div id="mainContent"> <div class="forFlow"> 這里是頁面主體內容展示區域。為液態布局，會根據瀏覽器的寬度而發生變化。 此測試頁面來源于 <a target="_blank" href="http://www.cnblogs.com" title="博客園"> 博客園</a>下博客<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>。是一個關注web標準設計的博客，如果你對web標準設計感興趣，請訪問此博客。與眾多的web標準愛好者一同分享、進步！<br/ /> 現在這些文字是為了營造頁面效果，故意填充的。現在這些文字是為了營造頁面效果，故意填充的。現在這些文字是為了營造頁面效果，故意填充的。現在這些文字是為了營造頁面效果，故意填充的。現在這些文字是為了營造頁面效果，故意填充的。現在這些文字是為了營造頁面效果，故意填充的。 </div> </div> <div id="sideBar"> <img src="https://images.cnblogs.com/cnblogs_com/justinyoung/myPic/photo2006.jpg" alt="側邊欄圖片" /><br/ /> 這里是側邊欄區域。一般情況下，側邊欄的內容是比較固定的，所以，對于其寬度，我們是完全可以預測的。 </div> </div> <div class="clear"></div> <div id="footer"> i'm footer from <a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a> </div> </div> </body> </html> 提示：可以先在文本框內，根據需要修改代碼后再運行運行上面的代碼，可以知道，這個示例頁面是液態布局的，側邊欄和內容文字，都會根據瀏覽器的改變而發生改變。但是，當面瀏覽器寬度非常小的時候，問題出現了（罪魁禍首是那個寬度固定的圖片）——
展開此處查看圖片當IE6瀏覽器寬度非常小的時候，示例頁面截圖
當FireFox瀏覽器寬度非常小的時候，示例頁面截圖
無論是在IE6中還是在FireFox瀏覽器中，布局都變得混亂。至于為什么IE6和FireFox混亂的情況不同，有興趣的朋友可以看我的系列文章《IE7的web標準之道》，這里便不再贅言。
一般情況下，側邊欄里面的內容都比較固定，所以寬度一般都是可以提前預知的，一般不會特別寬，所以適合采用“固態布局”。而頁面主體內容，一般都是不可預知的，有的長，有的短，所以適合采用“液態布局”。那能不能側邊欄使用固態布局，而頁面主體內容使用液態布局呢？這時候，你可能會想：將“#mainContent”的寬度用百分比方式設置，將“#sideBar”的寬度，用固定值寬度值方式設置，不就可以了嗎。但是結果卻是令人失望的，當你縮小瀏覽器的寬度到一定程度的時候，結果并不是你想象的那樣。
錯誤的示例代碼！簡單的設置百分比寬度和固定值寬度 <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web標準,楊正祎,博客園,實例代碼" /> <meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例頁面</title> <style type="text/css"> #home { margin: 0 auto; width:95%; background-color:#ccc; } #header { background-color:red; min-height:20px; } #main{ width: 100%; min-height:200px; background-color:black; } #mainContent { float: right; min-height: 200px; width:69%; background-color:Teal; } #sideBar { width: 200px; min-height: 200px; float: left; background-color:yellow; } #footer { min-height: 15px; background-color:pink; } .clear{ clear:both; } </style> </head> <body> <div id="home"> <div id="header"> i'm header! </div> <div id="main"> <div id="mainContent"> <div class="forFlow"> 這里是頁面主體內容展示區域。為液態布局，會根據瀏覽器的寬度而發生變化。 此測試頁面來源于 <a target="_blank" href="http://www.cnblogs.com" title="博客園"> 博客園</a>下博客<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>。是一個關注web標準設計的博客，如果你對web標準設計感興趣，請訪問此博客。與眾多的web標準愛好者一同分享、進步！<br/ /> 現在這些文字是為了營造頁面效果，故意填充的。現在這些文字是為了營造頁面效果，故意填充的。現在這些文字是為了營造頁面效果，故意填充的。現在這些文字是為了營造頁面效果，故意填充的。現在這些文字是為了營造頁面效果，故意填充的。現在這些文字是為了營造頁面效果，故意填充的。 </div> </div> <div id="sideBar"> <img src="https://images.cnblogs.com/cnblogs_com/justinyoung/myPic/photo2006.jpg" alt="側邊欄圖片" /><br/ /> 這里是側邊欄區域。一般情況下，側邊欄的內容是比較固定的，所以，對于其寬度，我們是完全可以預測的。 </div> </div> <div class="clear"></div> <div id="footer"> i'm footer from <a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a> </div> </div> </body> </html> 提示：可以先在文本框內，根據需要修改代碼后再運行為了達到這樣的布局效果，我們需要一些技巧。下面是一個簡化的例子，但是所使用的方法和技巧卻是通用的。當然，也是最新博客皮膚所采用的——
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web標準,楊正祎,博客園,實例代碼" /> <meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例頁面</title> <style type="text/css"> #home { margin: 0 auto; width:95%; background-color:#ccc; } #header { background-color:red; min-height:20px; } #main{ width: 100%; min-height:200px; background-color:black; } #mainContent { float: right; margin-left: -13em; min-height: 200px; width: 100%; background-color:Teal; } #mainContent .forFlow{ margin-left: 13em; float: none; width: auto; background-color:Fuchsia; } #sideBar { width: 200px; _width:230px; min-height: 200px; float: left; background-color:yellow; } #footer { min-height: 15px; background-color:pink; } .clear{ clear:both; } </style> </head> <body> <div id="home"> <div id="header"> i'm header! </div> <div id="main"> <div id="mainContent"> <div class="forFlow"> 這里是頁面主體內容展示區域。為液態布局，會根據瀏覽器的寬度而發生變化。 此測試頁面來源于 <a target="_blank" href="http://www.cnblogs.com" title="博客園"> 博客園</a>下博客<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>。是一個關注web標準設計的博客，如果你對web標準設計感興趣，請訪問此博客。與眾多的web標準愛好者一同分享、進步！ </div> </div> <div id="sideBar"> <img src="https://images.cnblogs.com/cnblogs_com/justinyoung/myPic/photo2006.jpg" alt="側邊欄圖片" /><br/ /> 這里是側邊欄區域。為固態布局，固定寬度，不會根據瀏覽器的寬度而發生變化。 </div> </div> <div class="clear"></div> <div id="footer"> i'm footer from <a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a> </div> </div> </body> </html> 提示：可以先在文本框內，根據需要修改代碼后再運行于是乎：一個名為“#main”的“水氣球”里，裝了一塊名為“#sidebar”的“石頭”……
再談“排隊、排隊！”
在《《播客》項目總結——web標準頁面設計方面 》一文中，我曾經羅嗦過一個名為“排隊、排隊”的小問題。里面簡單的說道：可以設置float的值來讓側邊欄顯示在左邊還是右面。但是“水中的石頭”這種采用了技巧的布局，如果想改變一下側邊欄的位置，不僅要修改側邊欄和主題容器的float樣式，還需要同時修改margin-left(margin-right)樣式。下面這個示例頁面演示了這種改變（改變可以參看代碼中樣式中的注釋，一共修改了4處）。對比上面的示例頁面代碼，可以知道，其實改變還是很簡單的，呵呵——
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web標準,楊正祎,博客園,實例代碼" /> <meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例頁面</title> <style type="text/css"> #home { margin: 0 auto; width:95%; background-color:#ccc; } #header { background-color:red; min-height:20px; } #main{ width: 100%; min-height:200px; background-color:black; } #mainContent { float: left; /*right變為left*/ margin-right: -13em;/*mlargin-left改為margin-right*/ min-height: 200px; width: 100%; background-color:Teal; } #mainContent .forFlow{ margin-right: 13em;/*mlargin-left改為margin-right*/ float: none; width: auto; background-color:Fuchsia; } #sideBar { width: 200px; _width:230px; min-height: 200px; float: right;/*left改為right*/ background-color:yellow; } #footer { min-height: 15px; background-color:pink; } .clear{ clear:both; } </style> </head> <body> <div id="home"> <div id="header"> i'm header! </div> <div id="main"> <div id="mainContent"> <div class="forFlow"> 這里是頁面主體內容展示區域。為液態布局，會根據瀏覽器的寬度而發生變化。 此測試頁面來源于 <a target="_blank" href="http://www.cnblogs.com" title="博客園"> 博客園</a>下博客<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>。是一個關注web標準設計的博客，如果你對web標準設計感興趣，請訪問此博客。與眾多的web標準愛好者一同分享、進步！ </div> </div> <div id="sideBar"> <img src="https://images.cnblogs.com/cnblogs_com/justinyoung/myPic/photo2006.jpg" alt="側邊欄圖片" /><br/ /> 這里是側邊欄區域。為固態布局，固定寬度，不會根據瀏覽器的寬度而發生變化。 </div> </div> <div class="clear"></div> <div id="footer"> i'm footer from <a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a> </div> </div> </body> </html> 提示：可以先在文本框內，根據需要修改代碼后再運行min-width和min-height
IE7和FireFox等對web標準支持比較好的瀏覽器，已經支持min-width和min-height樣式，通過利用這兩個樣式，我們便可以達到這樣的布局效果：超過一定寬度（或者高度）時，采用液態布局；小于一定寬度（或者高度）時，采用固態布局。道理比較淺顯，在此不再贅述。
關于最新皮膚模板“Custom”
最新的皮膚模板，叫做“Custom”，同時它也時候一款皮膚。你可以在后臺直接選用這個模板作為你博客的皮膚。作為最新的皮膚模板，它在不停的完善和修改當中。如果，你對博客皮膚設計有興趣的話，可以去http://skintemplate.cnblogs.com下載這個皮膚模板的靜態頁面。這些靜態頁面包含了博客中所有種類的頁面，里面的元素標簽無論是id還是class的命名都是一致的有了這些靜態頁面，就可以方便的進行本地的制作和調試了。
改變“FFandIE”模板側邊欄的位置
不推薦沒有使用“FFandIE”模板的用戶閱讀最新版的皮膚模板，修改了一處命名。將以前名為“#topicList”的div，修正為“#mainContent”。但是“FFandIE”模板，因為已經有較多的人在使用（詳細情況可以參看http://www.cnblogs.com/skins.aspx），其中不能排除一些朋友已經根據“#topicList”自定義了一些樣式。考慮到這點，所以“FFandIE”模板中并沒有同步修正這個命名。所以，如果要改變“FFandIE”模板側邊欄的位置，請注意這一點。下面是供你參考的樣式代碼。
#topicList?.forFlow{????margin-left:?22em;
????margin-right:25px;????
}
#topicList?{
????float:?right;
????margin-left:?-24em;
????_margin-left:-21em;
????width:?100%;
}
#sideBar?{
????float:left;
????margin-left:2em;
????_margin-left:1.2em;
}
相關文章、資源列表
- 《大家一起來博皮——1：兩行代碼一個皮膚，樹立信心篇 》
- 《IE6和IE7共存方法（別人是別人的，我是我的）》
- 《《播客》項目總結——web標準頁面設計方面》
- 《IE7的web標準之道——1：前言（兼目錄） 》
- IE Developer Toolbar工具
- 最新博客園博客皮膚模板、開發文檔下載
- 【博客園博皮小組】
總結
以上是生活随笔為你收集整理的大家一起来博皮——2：液态布局和固态布局，页面框架篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在家开什么店又稳又能赚钱 推荐几个市场
- 下一篇： SQL Server 2005高可用性之