HTML與CSS教學-第十一章 使用CSS樣式完成網頁布局

 

第十一章 使用CSS樣式完成網頁布局
本章要點
網頁置中的實現方式
基於FLOAT的網頁布局的實現方式
圖文混排複雜布局的的實現方式

目錄：
11.1  CSS網頁布局介紹
11.2  網頁置中
11.3  基於FLOAT的網頁布局
11.4  複雜布局

11.1  CSS網頁布局介紹
1. CSS網頁布局的意義
用CSS進行網頁布局使網站的資訊更豐富、網頁表現更美觀，意義體現在如下方面：
 
（1）使頁面載入得更快
（2）修改設計時更有效率
（3）保持一致性
（4）對瀏覽者和瀏覽器更具親和力

2. CSS盒模型
W3C組織建議把所有網頁上的對象都放在一個盒(box)中，可以通過建立定義來控制這個盒的屬性。盒模型主要定義四個地區：內容(content)、填充(padding)、邊界(border)和邊距(margin)。margin，padding，content，border之間的層次相互影響。

3. CSS網頁布局的基本思路
用CSS進行網頁布局時，主要考慮的是頁面內容的語義和結構，因為一個用CSS控制的網頁，在做好網頁後，還可以輕鬆的調整網頁風格。用CSS進行布局的一個目的是讓代碼易讀，區塊分明，強化代碼重用，所以結構很重要。

11.2  網頁置中 
1.自動空白邊置中設計
以固定寬度的一列布局代碼為例，為其增加置中的CSS樣式，主要是要對margin屬性進行設定：
margin:0px auto;
margin屬性用於控制對象的上、右、下、左四個方向的外邊距，當margin使用兩個參數時，第一個參數表示上下邊距，第二個參數表示左右邊距。

2.定位置中設計
使用自動空白邊進行置中的方法是最常用的，但也可以使用定位和負值空白邊來實現置中對齊的效果。
首先定義容器的寬度。
然後將容器的position屬性設定為absolute，將left屬性設定為50%。這會把容器的左邊緣定位在頁面的中間，但需要的是讓容器置中。所以需要對容器的左邊應用一個負值的空白邊，寬度等於容器寬度的一半，這會把容器向左邊移動它的寬度的一半，從而讓它在頁面上置中。

11.3  基於FLOAT的網頁布局 
基於float的網頁布局是設定希望定位的元素的寬度，然後將它們向左或向右浮動。因為浮動的元素不再佔據文檔流中的空間，就不再對包圍它們的邊框產生影響，因此需要對布局中各個點上的浮動元素進行清理。

1. 兩列布局 
要想使用float建立兩列布局，首先需要有一個基本的架構。在下面的樣本中，HTML頁面由頭部地區、首頁面地區和的頁尾組成。其中首頁面地區分成左右兩列，左列用作導航頁面，右列用作顯示頁面。首頁面地區就是用float實現的兩列布局。整個設計放置在一個div中，這個div使用前面介紹的方法進行水平置中。

2. 多欄版面配置 
一種方法是在設定兩列布局時，左右兩列的寬頻之和不佔滿整個父容器，然後再放入第三列，會浮動到空餘的空間，就是中間位置，這樣就可以實現三列布局了。

另外一種方法是在剛才兩列布局中的右邊列的div中再添加firstright和secondright這兩個新的div，將右邊列再分成兩列。
 接著可以使用與兩列布局相同的樣式進行設定，即為新增加的每個列設定相應的寬度和高度，然後將firstright列向左浮動，將secondright列向右浮動。本質上就是將右邊的列再分成兩列，形成三列的效果。

11.4  複雜布局
1. 動態布局
動態布局時，主體部分尺寸是用百分數而不是像素設定的，因此可以自適應使用者的解析度。這使動態布局能夠相對於瀏覽器視窗進行伸縮。隨著瀏覽器視窗變大，列變寬。相反。隨著視窗變小，列的寬度減小。合適的動態布局，會使頁面在大螢幕、小螢幕上都能得到良好的表現。

2. 彈性布局
彈性布局用相對字型大小來設定元素的寬度。使用em為單位設定寬度，可以確保在字型大小增加時整個布局隨之擴大。這可以將行長保持在可閱讀的範圍。應用恰當的彈性布局對使用者十分友好，頁面中所有元素可以縮放。

3. 動態-彈性混合布局
可以組合彈性和動態技術來建立混合布局。這種混合方式以em設定寬度，然後用百分數設定最大寬度。在支援max-width的瀏覽器上，這個布局將隨著字型大小伸縮，但是決不會超過視窗的寬度。

4. 動態和彈性映像
如果選擇使用動態或彈性布局，那麼固定寬度的映像就會對設計產生的影響。當布局的寬度減小時，映像會移動，可能相互產生影響，映像會以自然的最小寬度顯示，從而影響某些元素的尺寸減小。有些映像會超出包含它們的元素，從而破壞調整過的設計。有幾個辦法可以避免這些問題。
 
（1）對於需要跨越大地區的映像，可以考慮使用背景映像而不是映像元素。
（2）如果映像需要作為頁面上的映像元素，那麼將容器元素的寬度設定為100%並且將overflow屬性設定為hidden。
（3）可以將映像元素添加到沒有設定任何尺寸的頁面上。然後設定映像的百分數寬度，並且添加與映像寬度相同的max-width以避免像素失真(pixelization) 。

5. 偽列布局
偽列布局方法是在一個父層的元素(比如一個容器div)上應用重複的背景映像，這個背景圖就是為了體現左側層的高度，因為父物件是會被高的那一列撐高的。faux列這個術語來描述這種技術。

對於固定寬度的兩列布局，只需在容器元素上應用一個垂直重複的背景映像，其寬度與left列相同，但是，這一次重複的背景映像需要跨越容器的整個寬度，其中包含兩列。按照與前面一樣的方式應用這個映像，就會形成faux三列效果。