CSS DIV 單欄式網頁排版

CSS DIV 排版已經是非常主流的網頁排板方式,透過簡單的 DIV 排版可以很容易創造出各式各樣的網頁版型,本篇主要講解 CSS DIV 單欄式的網頁排版設計,算是透過 DIV 排版最入門的方式了,畢竟基本款的單欄式網頁不需要用到浮動技巧。

CSS DIV 單欄式網頁排版呈現




假設我們要設計的就是這樣單欄式的一個頁面,也就是左右沒有其他欄位,但至少也要分為最上方的 Header 標頭、中間的 Body 主要部分以及最下方的 Footer 頁腳等區塊,將每個區塊劃分出來後,就能夠很容易的在各區塊內增加網頁內容,為了能夠容易表達如何排出這樣的網頁排板,以下分為 CSS style 以及 HTML Code 的兩個部分,將此兩個部分結合在一起就能夠完成。

CSS style 部分
<style type="text/css">
#Header{
 width:360px;
 height:80px;
 text-align:center;
 line-height:80px;
 font-size:15px;
 color:#fffaf3;
 font-weight:bold;
 background-color:#f9c81e;
}
#body{
 width:360px;
 height:280px;
 text-align:center;
 line-height:280px;
 font-size:15px;
 color:#f9c81e;
 font-weight:bold;
 background-color:#fffaf3;
}
#Footer{
 width:360px;
 height:80px;
 text-align:center;
 line-height:80px;
 font-size:15px;
 color:#fffaf3;
 font-weight:bold;
 background-color:#f9c81e;
}
</style>
範例 CSS 的樣式共只有三個主要區塊,分別為 Header、Body 以及 Footer,分別控制下方 HTML Code 內的三個 DIV 區塊,瀏覽器會以 DIV 內的 id,判斷每個區塊的樣式應該要對應到上方 css 程式碼中的哪個部分,稍微說明一下範例中的幾個 style 所代表的意思。
HTML Code 部分
<div id="Header">Header 欄位</div>
<div id="Body">Body 欄位</div>
<div id="Footer">Footer 欄位</div>
正如第一段所提到的,單欄式 DIV 排版非常基本,HTML Code 的部分就只要從最上方開始寫第一個 DIV,並依序寫著下來即可,每個區塊內容就可以自己填入。只要將以上 CSS style 以及 HTML Code 寫在同一支 HTML 檔案,存檔後就可以用瀏覽器呈現出結果。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 2012~2016 Englsih version聯絡我們
PHP Smarty MySQL JQuery Apache W3C