上次有說到學程序語言就跟學外語一樣,拼命看、死命看就能看懂,這絕對不是說笑,俺就是這麼自學出來的~
不過這樣學需要很長時間的累積,和無限的愛就是了。
這次要說的是利用div+CSS來進行網頁的排版,好處多多就不一一重複了。
對於一直以來都是利用HTML+table來排版的人,突然要使用div可能會很不適應,
這次我希望通過我所理解的div的解釋,好讓用慣table的同學更簡單的理解什麼是div。
例如我們要做一個非常普遍的「帶標題的三欄式」佈局:

一直以來,我們是按照三欄式的布局,建立一個同樣佈局的表格(table),然後設置它的邊框距離等,再把內容填入就可以了。
如果我們現在要使用div+CSS來布局的話,需要建立ABCD各一個div,然後再設置每個div的CSS樣式,將其排布成我們所要的布局。
咋一看下來div+CSS會複雜很多,但一旦佈局完成,之後的動作將會非常簡單:
1,css因為可以共用,因此ABCD框內的邊框、距離等樣式都可以共享,隨時調用。
2,這4個框的所在位置可以隨時調整,也可以上下重疊(我現在的skin,中間部分就是z-index:1,它浮在其他所有div之上)
3,兼容性高。
4,table用多了會出現謎之寬度、高度不能控制的問題,div無論疊幾個上去都不會亂跑。(FP後遺症,table實在是太不聽話了)
table和div最大的不同在於,
table它強調「嵌套」,一個表格套一個表格;
div則更注重「層疊」,一個div疊在另一個div之上。
寫作的時候記住他們的區別,便會容易理解很多。
在寫HTML的時候,table的先後順序非常重要,然而div則完全不必考慮順序,只經由CSS來定義。
我們來看一下這個佈局用div+CSS最簡單的寫法:
HTML部分:
<div id=”A”>A框內的內容</div>
<div id=”B”>B框內的內容</div>
<div id=”C”>C框內的內容</div>
<div id=”D”>D框內的內容</div>
HTML是不是比用table寫要簡單清晰的多呢?
順便一提,這4個ABCD的div寫作順序可以顛倒喔。
(我通常會將C框寫在最上面,這樣當頁面內容很多時,我們可以指定瀏覽器先讀取最重要的C框,然後再讀取ABD框)
接下來來看CSS。
CSS部分:
#A { height:100px } /* 僅設定A框的高度 */
#B { position: absolute; left: 0px; top:100px; width:300px; } /* 設定B框固定在瀏覽器最左邊 */
#C { margin: 0px 300px 0px 300px; } /* 設定C框左右兩邊各空出300px */
#D { position: absolute; right: 0px; top:100px; width:300px; } /* 設定D框固定在瀏覽器最右邊 */
這樣就可以輕鬆寫出我們想要的布局了。這個佈局會自適應各個頁面寬度,中間的C框會根據瀏覽器寬度而自動被拉長。
這裏還有更多實用的布局可以參考:
Nice and Free CSS Templates
舉個CSS控制佈局更輕鬆的例子:
例如我們覺得左右邊欄(B框和D框)的寬度不夠,想要將300px變為400px時,只需將CSS代碼裏的300px都統一改為400px就可以了。
根本不需要動到HTML部分~
又例如我們不想要右邊欄(D框)了,那麼只需將HTML部分和CSS部分裏的D框語法刪除,
然後將CSS部分內,C框的margin右側數值也改為0px,就可以實現了。
比起用table改寫,div+CSS會清晰簡單很多~
至於常用的margin和padding屬性,它們和table的邊框屬性是比較相似的,因此這裏就不再敘述了~
畫個簡單的圖說明它們各是啥:

灰色部分就是margin(邊距)起到的作用範圍;
粉紅色部分就是padding(內框邊距)起到的作用範圍;
黑色的線條就是border(邊框)起到的作用範圍。
這樣一看的話,屆時要在邊距上做什麼處理,用哪個標籤做處理就很清晰了~
那麼今天的講座就到這裏。