頁面布局學習(二)


現在開始講解各種常用布局。

三欄——固定寬度布局

掌握了創建三欄布局的技術,你想建多少欄就能建多少欄。為了學習方便,我會給每個欄添加不同的背景色以區分。

首先做個簡單的居中的單欄固定布局。貼上代碼:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>頁面布局</title>
<style type="text/css">
#wrapper{width:960px;margin:0 auto;border:1px solid;}
article{background: #ffed53;}
</style>
</head>
<body>
<div id="wrapper">
<article>
<h2>響應式網頁布局的實現方法原理·馬海祥博客</h2>
<p>響應式網頁設計(Responsive Web design,通常縮寫為RWD)是指:頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。可以說是一種網頁設計的技術做法,該設計可使網站在多種瀏覽設備(從桌面電腦顯示器到移動電話或其他移動產品設備)上閱讀和導航,同時減少縮放、平移和滾動。
具體的實踐方式由多方面組成,包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等,以適應不同設備;換句話說,頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣,我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
</p>
</article>
</div>
</body>
</html>

如圖可知這個單欄布局在頁面上居中了,往里面添加內容這一欄的高度將相應增加。article元素本質上是沒有寬度的塊

級盒子,它水平填滿了外包裝。再為其添加一個導航元素,作為第二欄。

html:

<div id="wrapper">
<nav> <!--無序列表-->
<li><a>link</a></li>
<li><a>link</a></li>
<li><a>link</a></li>
</nav>
<article>
<h2>響應式網頁布局的實現方法原理·馬海祥博客</h2>
<p>響應式網頁設計(Responsive Web design,通常縮寫為RWD)是指:頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。可以說是一種網頁設計的技術做法,該設計可使網站在多種瀏覽設備(從桌面電腦顯示器到移動電話或其他移動產品設備)上閱讀和導航,同時減少縮放、平移和滾動。
具體的實踐方式由多方面組成,包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等,以適應不同設備;換句話說,頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣,我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
</p>
</article>
</div>
css:

#wrapper{width:960px;margin:0 auto;border:1px solid;}
nav{
width:150px;
float:left;
}
nav li{list-style-type: none;}
article{
<span style="color:#ff0000;">width: 810px;
float: left;</span>
background: #ffed53;
}

兩欄容器元素的總寬度設定為為960px,並浮動它們,就可創造出並肩排列的兩欄來。同樣的方法可以創

建第三欄或者任意多欄。

<nav>  <!--無序列表-->   
</nav>
<article>
<!--***-->
</article>
<aside>
this is aside,內容轉自馬海祥的博客
</aside>
article{            <span style="color:#ff0000;">width: 600px;</span>            float: left;            background: #ffed53;        }        aside{            <span style="color:#ff0000;">width:210px;            float: left;            background: #3f7ccf;</span>        }

只要總寬度等於960px,我可想添加多少就多少欄,可以添加頁眉和頁腳。

在div頂部和底部分別添加了頁眉<header>和頁腳<footer>標簽,css樣式如下:

<span style="white-space:pre"></span>header{background: #f00;text-align: center;}
footer{background: #000;color: #EEEEEE;}
頁面出現如下問題:


頁腳位於浮動元素后面,所以就會盡量往上移動,解決方法是添加:clear: both(left);


清除浮動后就可以阻止footer向上移動,讓它不超過浮動元素的下方邊界。

接下來主要解決布局中的兩個問題:①內容與各欄邊界緊挨着太擁擠;②每欄高度由文本決定。別以為

這是件簡單的事。

為欄設定內邊距和邊框:

添加水平外邊距和內邊距或者圖片,長字符串如長URL都會導致欄寬超過布局寬度,導致右邊的欄下滑

到左邊的欄下方,稱作“浮動滑移”。

如添加article{padding: 10px 20px;},中間盒子變成640px寬,如下:


有三種方法可以預防:

①重設寬度以抵消內邊距和邊框,比如將width設為560px,則右邊欄可以歸為,問題是每次只要調整內

外邊距就要重設布局寬度,有點煩人。這個方法雖然可行卻不夠理想,說不定那一回調整內邊距和邊框

就會導致布局錯亂。

②給容器內部的元素應用內邊距和邊框,前提是這些元素沒有明確設定寬度,這樣它們的內容才會跟着

內、外邊距的增加而縮小。盒模型定義沒有寬度的元素在水平方向上回適應其父元素,其內容會隨着外

邊距、邊框和內邊距的增加而減少。然而一欄之中會有大量不同元素,要調整每個元素,將來又決定調

整時就必須再次對每個元素更改,麻煩且容易出錯。故可以在欄中添加一個沒有寬度的div,包含所有

內容元素,只需調整該div。如下:

去掉article中的padding屬性,同時在article標簽內部添加div標簽包圍原先的內容元素,樣式為inner,添加

article .inner {
margin: 10px;
border: 1px solid red;
padding: 20px;;
}
頁面如下:

可以同樣方法修改其余幾部分。

補充:還有另外一種方法——子-星選擇符,這就是一種組合選擇符,利用它可以不使用內部div就

能設定一欄中所有元素的外邊距。星號選擇符可以選擇“所有元素”,子選擇符可以選擇“某元素的子元素”,

比如someSelector>*就會只選擇someSelector所代表的所有子元素,正好適用於選擇容器內部的所有

頂部元素。使用該選擇符要注意兩點:第一,設定垂直外邊距時,只能使用margin-top,margin-bottom,

不能使用簡寫margin,否則會抵消該選擇符應用給這些元素的水平外邊距。如果想縮進某個子元素的內容,

可以給它應用內邊距。第二,該選擇符有潛在性能問題,因為它會遍歷整個DOM結構去查找匹配的元素,

不過該性能影響幾乎可忽略。除非是包含成千上萬個元素的頁面,就該考慮用ySlow或其他性能度量工具測一測。

③使用CSS3的box-sizing:border-box:這是最簡單的方法。加上這個聲明后,再給欄添加內邊距

(和邊框)就不會導致盒子的寬度變化,注意外邊距不行。和②效果一樣。給每個部分添加

box-sizing: border-box;,padding和border屬性,去掉div標簽。頁面效果如下:


但是,IE6和IE7不支持box-sizing屬性,不過有個專門解決這個問題的膩子腳本(polyfill),

名叫borderBoxModel.js。

在body標簽結束前添加代碼段:

<!--HTML標記-->
<!--只讓IE8之前的IE加載它-->
<!--[if lt IE 8]>
<script src="helpers/borderBoxModel.js"></script>
<![!endif]-->

在使用內部div這么久以來,經試驗發現不僅是浮動的欄,所有的元素都可以應用這個不同的盒縮放

模型,故可在css中添加一條規則:

*{box-sizing:border-box;}

補充:動態網站中,預防過大的元素,比如圖片,簡單的預防措施是,添加一條.inner img{max-width:100%;}

聲明,在方法②的基礎上。還有一個方法,就是給每個欄或者內部div添加overflow:hidden;聲明。還有一個

潛在問題是換行。長字符串會導致欄寬過大,因此還應該給所以欄的外包裝元素應用word-wrap:break-word;聲明,

這樣會把過長的詞調整斷開顯示。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com