CSS DIV 區塊

CSS DIV 區塊顧名思義就是以區塊型態存在的一種網頁設計元素，與 span 的區域性值有點不一樣，在一個單純的網頁中，每個 DIV 區塊預設的範圍會佔掉一個行，也就是說每個 DIV 區塊將會排列在前一個 DIV 區塊的下方，就像堆積木一樣堆疊，當然，網頁設計師還是可以透過 float 或 table 等技巧，讓 DIV 區塊可以並排在一起，將另外篇幅介紹。DIV 區塊的功用很多，在 DIV 外部可以用來做網頁排版，在 DIV 內部則可以用來設計各式各樣的網頁元素風格，應用範圍相當廣泛，幾乎所有的主流瀏覽器都支援 CSS DIV 區塊。

CSS DIV 區塊基本語法
<div> ... 區塊內容 ... </div>
一個標準的 DIV 區塊必須由 <div> 標籤開始，至 </div> 標籤結束，大小寫都可以，<DIV> 與 <div> 原則上是同樣的意思，另外，在開頭的 <div> 標籤內，可以使用 id、style 等參數來修改 DIV 區塊與其他元素的差異以及呈現風格。

用 DIV 做網頁排版範例
<header>
<body>
　...<div>網頁元素 A</div>...
　...<div>網頁元素 B</div>...
　...<div>網頁元素 C</div>...
</body>
這是一個很基本的 CSS DIV 網頁排版範例，其中有許多個網頁元素，我們可以將網頁元素 A 的區塊用來擺放網頁標頭區、網頁元素 B 用來放左邊欄、網頁元素 C 用來放網頁主要內容，就可以構成一個簡單的兩欄式網頁架構，大致像下圖這樣。



DIV 區塊內的文字顏色
<div style="color:blue;">藍色的文字</div>
範例輸出
藍色的文字
我們透過 DIV 標籤內的 style 參數，套用了 CSS color 文字顏色的設計技巧，將 DIV 區塊內的預設文字顏色改為藍色，若網頁內有許多不同的 DIV 區塊，就可以讓每個不同區塊的文字呈現不同的顏色，您也可以在《色碼表》上找到更多不同的顏色來修改。

延伸閱讀
© Copyright webtech.tw Since 2010