利用CSS做簡單排版
程式技術 2007/01/27 01:05 views: 50847 times
傳統的表格式排版, 除了實作上比較麻煩外, 更令人不便的地方在於調整版型或移位, 解決這個問題最簡單容易的方法就是利用 CSS 來排版.
CSS可以很容易地調整版位, 內容不受影響, 但很容易地調度所有內容的格式及位置, 所以將 CSS 研究一下是很有幫助的. 例如我們想做一個兩欄式的排版, 左側功能, 中右方是內容, 下面是一個下標(footer)功能的版本可以很簡單的這麼安排:
<div class=coll>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
</ul>
</div>
<div class=colmain>
中央氣象局上午發佈低溫特報，明天起，寒流逐漸南下，各地的溫度將會明顯下降，預估28號，29號兩天，各地寒流籠罩，各地溫度明顯偏低，台南以北，東北部沿海空曠地區及金門馬祖，也晚及清晨出現攝氏十度以下的低溫，30號起到二月二號，各地的溫度仍然沒有回升的跡象，清晨仍維持十度以下的低溫，農漁養殖業應慎防寒害，民眾使用熱水器，應該要避免一氧化碳中毒，民眾應該注意保暖。未來一週，溫度都偏低。
</div>
<div class=footer>
<a href=#>contact us</a> copyright 2007
</div>
從上面看到三個排版用的 DIV 區塊, 不設定 CSS 的狀況下, 呈現的效果就是類似上面這樣, 參考: 連結, 但若加入了 CSS 就不同了, 我們分別將 coll class 設定為浮動靠左, 將 colmain 做一個左邊留空, 而 footer 做一個兩方清空的這樣三個內容:
傳統的表格式排版, 除了實作上比較麻煩外, 更令人不便的地方在於調整版型或移位, 解決這個問題最簡單容易的方法就是利用 CSS 來排版.
CSS可以很容易地調整版位, 內容不受影響, 但很容易地調度所有內容的格式及位置, 所以將 CSS 研究一下是很有幫助的. 例如我們想做一個兩欄式的排版, 左側功能, 中右方是內容, 下面是一個下標(footer)功能的版本可以很簡單的這麼安排:
<div class=coll>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
</ul>
</div>
<div class=colmain>
中央氣象局上午發佈低溫特報，明天起，寒流逐漸南下，各地的溫度將會明顯下降，預估28號，29號兩天，各地寒流籠罩，各地溫度明顯偏低，台南以北，東北部沿海空曠地區及金門馬祖，也晚及清晨出現攝氏十度以下的低溫，30號起到二月二號，各地的溫度仍然沒有回升的跡象，清晨仍維持十度以下的低溫，農漁養殖業應慎防寒害，民眾使用熱水器，應該要避免一氧化碳中毒，民眾應該注意保暖。未來一週，溫度都偏低。
</div>
<div class=footer>
<a href=#>contact us</a> copyright 2007
</div>
從上面看到三個排版用的 DIV 區塊, 不設定 CSS 的狀況下, 呈現的效果就是類似上面這樣, 參考: 連結, 但若加入了 CSS 就不同了, 我們分別將 coll class 設定為浮動靠左, 將 colmain 做一個左邊留空, 而 footer 做一個兩方清空的這樣三個內容:
more..
Trackback Address :: http://diary.tw/tim/trackback/78
Waiting...