首頁 >web前端 >css教學 >使用css負邊距建立自適應寬度的流體佈局的實作方法

使用css負邊距建立自適應寬度的流體佈局的實作方法

不言
不言原創
2018-06-21 16:21:081510瀏覽

這篇文章主要介紹了關於使用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实现标题文字过长部分显示省略号

如何使用css实现任意大小及任意方向和任意角度的箭头

关于css实现右侧固定宽度和左侧宽度的自适应方法

以上是使用css負邊距建立自適應寬度的流體佈局的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn