html div並排div用法HTML div classhtml lang zh-twHTML lang=enHTML divdiv是什麼html div排版

HTML div 標籤

文章推薦指數： 80 %
投票人數：10人

一組標準的HTML div 區塊是由一個開頭

標籤與一個結束
標籤所組成，其間背包起來的部份就是區塊內容，可以是文字、圖片、影片、框架. HTMLdiv標籤 HTMLdiv標籤是網頁中的重要基礎元素，透過DIV標籤可以在網頁中創造各個不同的區塊，每個區塊內還可以增加更小的區塊，設計師也可以利用 HTMLdiv區塊來進行排版，對網路瀏覽器來說，每組HTMLdiv標籤都是一個區塊級元素，基本會占用掉一整行的空間，當然設計師也可以透過 div的屬性設定來調整這個部份，現在的div屬性設定都是採用 CSS 來設計。

HTMLdiv標籤區塊的基礎語法 區塊內容 一組標準的HTMLdiv區塊是由一個開頭
標籤與一個結束
標籤所組成，其間背包起來的部份就是區塊內容，可以是文字、圖片、影片、框架...等網頁內容，開頭的
區塊內可以設置id、class 或直接開始一段樣式設計，也就是style的部份。

HTMLdiv標籤應用範例一、設計一個有邊框的div 標籤區塊 這是個有橘色邊框的HTMLdiv
範例的輸出結果 這是個有橘色邊框的HTMLdiv 這個範例相當簡單，就是在開頭的
標籤內使用style來宣告一段 CSS 的樣式語法，border 就是用來設計元素邊框的標準語法，我們設計的是一個橘色的粗實線邊框，是不是非常簡單呢？關於邊框設計請參閱：CSS border邊框。

HTMLdiv標籤應用範例二、設計一個有背景顏色的div 標籤區塊 這是個有粉紅色背景色的HTMLdiv
範例的輸出效果 這是個有粉紅色背景色的HTMLdiv 範例二也相當簡單，只是把範例一的border改成用來設計元素背景顏色的background-color屬性而已，這是非常普遍的div 背景顏色設計技巧，通常會用16位元的色碼來調整顏色。

  找更多美麗的顏色→ 色碼表。

背景顏色屬性用法→ CSS background-color背景顏色 繼續我們的下一個範例。

HTMLdiv標籤應用範例三、兩個包在一起的區塊 這是個有粉紅色背景色的HTMLdiv 範例的輸出效果 這是個有粉紅色背景色的HTMLdiv 範例三等於是結合了範例一與範例二的結果，我們把範例二的粉紅色HTMLdiv標籤組整個放在範例一的橘色邊框div 區塊內，為了讓範例呈現更清楚，我們在外圍的橘色大div區塊內增加了內距屬性，也就是 padding，讓兩個div 區塊不要黏在一起，從範例的輸出結果可以看到這漂亮的兩個區塊。

除了以上的三個範例之外，其實HTMLdiv標籤還有很多的應用方式，第一段也提到了可以用來排版，絕大多數的應用都會搭配 CSS語法設計，這也是 div區塊在未來應用的主流。

請為這篇文章評分？

延伸文章資訊