CSS DIV 區塊 - WebTech 網頁設計教學站

2025-01-07

文章推薦指數： 80 %

投票人數：10人

DIV 區塊的功用很多，在DIV 外部可以用來做網頁排版，在DIV 內部則可以用來設計各式各樣的網頁元素風格，應用範圍相當廣泛，幾乎所有的主流瀏覽器都支援CSS DIV 區塊。

CSS ... WEBTECH網頁設計教學站首頁 PHP CSS HTML JavaScript GIMP Linux OpenOffice 瀏覽器其它 Home › CSS › CSSDIV區塊 CSSDIV區塊 CSSDIV區塊顧名思義就是以區塊型態存在的一種網頁設計元素，與span的區域性值有點不一樣，在一個單純的網頁中，每個DIV區塊預設的範圍會佔掉一個行，也就是說每個DIV區塊將會排列在前一個DIV區塊的下方，就像堆積木一樣堆疊，當然，網頁設計師還是可以透過float或table等技巧，讓DIV區塊可以並排在一起，將另外篇幅介紹。

DIV區塊的功用很多，在DIV外部可以用來做網頁排版，在DIV內部則可以用來設計各式各樣的網頁元素風格，應用範圍相當廣泛，幾乎所有的主流瀏覽器都支援CSSDIV區塊。

CSSDIV區塊基本語法

...區塊內容...

一個標準的DIV區塊必須由

標籤開始，至

標籤結束，大小寫都可以，

與

原則上是同樣的意思，另外，在開頭的

標籤內，可以使用id、style等參數來修改DIV區塊與其他元素的差異以及呈現風格。

用DIV做網頁排版範例

　...

網頁元素A

...　...

網頁元素B

...　...

網頁元素C

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

DIV區塊內的文字顏色藍色的文字

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

延伸閱讀CSSDIV置中最簡單的方法，相容各式瀏覽器CSSspan區域CSSfloat浮動CSSDIV並排語法您可能會想看如何替HTMLDIV區塊增加邊框效果如何在HTMLDIV區塊內插入圖片如何修改HTMLDIV區塊內的文字顏色 CSSdisplay:inline-block可設定區塊寬度與高度利用CSS設計ulli橫向水平顯示 CSSlist-style-type列表開頭顯示符號 CSSlist-style-image列表開頭顯示圖示 CSSlist-style-position列表位置 CSSlist-style列表設計修改CSSDIV內文字字型即時熱門文章如何替HTMLDIV區塊增加邊框效果如何在HTMLDIV區塊內插入圖片如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法如何修改HTMLDIV區塊內的文字字型如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線今日熱門文章如何替HTMLDIV區塊增加邊框效果如何在HTMLDIV區塊內插入圖片如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法如何修改HTMLDIV區塊內的文字字型如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 ©Copyrightwebtech.twSince2010