這篇文章主要介紹了關於使用css負邊距創建自適應寬度的流體佈局的實現方法,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
合理使用負邊距技術,可以幫助我們創造許多有趣的佈局,例如自適應瀏覽器寬度的流體佈局。
國外關於使用負邊距創建這類佈局的技術文檔,我看到的最早是04年Ryan Brill 發表在A List Apart 上的《Creating Liquid Layouts with Negative Margins》 (04年- -!國內剛小部分人開始關注WEB標準化),本文亦可看做是對其的中文講解版。
隨著越來越大的瀏覽器的出現及普及,網站介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求,逐漸成為前端開發工程師必須面對的問題。目前國內門戶很多都進行了改版,採用目前的主流———960px左右的寬度。
我認為,對於不太複雜的網站,採用百分比進行架構是個不錯的主意。自適應版面的應用程式面還蠻多的,像是論壇頁面、部落格頁面等。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創造出符合WEB標準化的自適應佈局。
這裡需要的用到的技術關鍵點就一則:負邊距。
【簡單的版面】
#OK。我們現在開始。假設現在需要為自己的部落格重新製作前台,介面的設計已經完成,就差程式碼架構。我們希望部落格的介面可以做到:左側的主要部分是部落格文章內容,這部分需要在不同解析度瀏覽器下自適應寬度;而右側是側邊欄,這部分我們想做成一個固定250px寬,預期效果圖如下:
這是典型的兩欄佈局,我們來做初步的架構
引用:
<p id=”header”>顶部区域</p> <p id=”mainer”> <h1>使用负边距创建自适应宽度的流体布局</h1> <p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p> </p> <p id=”sideBar”> <h2>最新文章</h2> <ul> <li>最新文章一</li> <li>最新文章二</li> <li>最新文章三</li> </ul> </p> <p id=”footer”>底部区域</p>
查看測試頁面一,這是在沒有樣式表的情況下頁面的顯示效果。下面我們給它加上基本的樣式表
提示:您可以先修改部分程式碼再執行
引用:
body,p,h1,h2,ul { margin:0;padding:0; } #header { background-color: #A8A754; } #footer { background-color: #A8A754; clear: both; } #mainer { width: 100%; margin-right: -250px; float: left; } #sideBar { float: right; width: 250px; }
定義mainer右邊距為-250px,使得右邊得以空出側邊欄的寬度,放置側邊欄。加上樣式表頁面請查看測試頁面二。 OK,現在我們看到左側的內容區域已經為側邊欄空出了相應的空間,使得側邊欄放置在了它應該出現的位置。
提示:您可以先修改部分程式碼再執行
【移除重疊部分】
我們這時會發現,左邊的文字內容部分卻和側邊欄有重疊。這時候我們需要另外的一個p層,來將左側文字部分設定一個足夠大的右邊距,使其不與側邊欄重疊。並將左側內容部分與側邊欄部分設定不同背景色,以示區分。
引用:
<p id=”mainer”> <p id=”main”> <h1>使用负边距创建自适应宽度的流体布局</h1> <p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p> </p> </p>
增加的CSS
#引用:
#sideBar { color: #FFF; background-color: #36361A; } #main { margin-right: 250px; background-color: #616030; }
檢視
提示:您可以先修改部分程式碼再執行
【自適應高度】
這時候我們又發現了一個問題:如果左邊長度繼續加長,那麼,右側側邊欄的下部會出現空白。我們希望可以實現視覺上的左右兩欄自適應等高。
這裡我們可以為外層的mainer p設定一個右對齊縱向重複的背靜圖片,圖片的寬度我們設定為250px,也就是同側邊欄寬度相同。
CSS部分我們加上
引用:
#mainer { background: url(bj1.jpg) repeat-y right bottom; }
多數時候我們不想設定全部寬度為瀏覽器的寬度,多數時候我們會設定小於螢幕寬度的百分比。在這種情況下,我們可以在左側內容及右側側邊欄外再套一個p層,並在側邊欄下方加上一個清除浮動的層,來達到我們的目的。這時候我們的XHTML會是下面這個樣子。
引用:
<p id=”header”>顶部区域</p> <p id=”wrapper” class=”mid”> <p id=”mainer”> <p id=”main”> <h1>使用负边距创建自适应宽度的流体布局</h1> <p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p> <p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p> <p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p> <p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p> </p> </p> <p id=”sideBar”> <h2>最新文章</h2> <ul> <li>最新文章一</li> <li>最新文章二</li> <li>最新文章三</li> </ul> </p> <p class=”clear”></p> </p> <p id=”footer”>底部区域</p>
對應的CSS
引用:
#wrapper {width: 92%;} .clearing {clear: both;} .mid {margin:0 auto;}
查看
提示:您可以先修改部分程式碼再執行
Ryan Brill 在他的文章裡說,外層的wrapper與裡面的mainer兩個p都應該設定背景background,以便解決IE裡的一個BUG。但我這裡只設定了mainer p的背景,在IE6、IE7、FF裡都沒有發現錯誤。可能他指的是IE5.x,這裡忽略。
【進階,三欄佈局】
掌握了以上的方法,我們會發現製作三欄的佈局也是很簡單的! OK。下面我們把上面的例子變下,我們需要一個三欄的佈局,2側為固定寬度,中間為自適應寬度。這只需要增加一點p。
引用:
<p id=”header” class=”mid”>顶部区域</p> <p id=”wrapper” class=”mid”> <p id=”mainer”> <p id=”main”> <p id=”leftBar”> <h2>栏目标题</h2> <ul> <li>文章标题</li> <li>文章标题</li> <li>文章标题</li> </ul> </p> <p id=”inmain”> <h1>使用负边距创建自适应宽度的流体布局</h1> <p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p> <p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p> <p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p> <p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p> </p> </p> </p> <p id=”sideBar”> <h2>最新文章</h2> <ul> <li>最新文章一</li> <li>最新文章二</li> <li>最新文章三</li> </ul> </p> <p class=”clear”> </p> </p> <p id=”footer” class=”mid”>底部区域</p>
以及另外一个背景图片
CSS部分增加:
引用:
#main { margin-right: 250px; background: url(bj2.jpg) #616030 repeat-y left bottom; } #leftBar { float: left; width: 150px; } #inmain { margin-left: 150px; }
现在来看看我们的页面。
提示:您可以先修改部分代码再运行
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上是使用css負邊距建立自適應寬度的流體佈局的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!