大家一起来博皮——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高可用性之