CSS DIV 三欄式網頁排版設計 - Wibibi

CSS DIV 三欄式網頁排版設計 · float - DIV 區塊浮動 · width - DIV 寬度 · height - DIV 高度 · margin - DIV 區塊的外距 · font-size - 文字大小 · background-color - 背景 ... 首頁 HTML HTML5 PHP MySQL CSS CSS3 JavaScript 軟體介紹 其它 Home › CSS › CSSDIV三欄式網頁排版設計 CSSDIV三欄式網頁排版設計 三欄式的網頁排版設計是應用非常普遍的版型配置方式，優點是網頁內的區塊更多，尤其是邊欄上還可以加入許多不同的欄位，隨著CSS的持續普及，現在的網頁設計師經常使用CSSDIV的區塊規劃，來設計三欄式網頁排板，透過每個DIV區塊的寬度、高度、浮動等技巧，搭配上不同的背景顏色，就可以很輕鬆的規劃出以下這三欄式網頁的樣貌，本文就以這個範例示意圖的原始碼來介紹如何使用CSSDIV設計出三欄式網頁，首先要看的是比較簡單的HTML部分，接著就是稍微複雜的CSS語法部分，但整體而言還算是CSS排版的基礎。

如上圖三欄式網頁示意圖，我們規劃了幾個大區塊，分別為最上方的網頁標頭區header、左右兩的邊欄sidebar_left與sidebar_right、中間的網頁內文區content以及最下方的網頁腳區footer，以下範例語法將告訴您如何設計出這樣的網頁版型。

HTML語法架構　header　sidebar_left　sidebar_right　content　footer在HTML的部分相當簡單，最外圍使用區塊sitebody將所有的元素都包起來，裡面就依序建立header、sidebar_left、sidebar_right、content以及footer等DIV區塊，有了這樣的架構，就可以使用CSS將每個區塊的位置設計好。

CSS語法#sitebody{　width:600px;　margin:0auto;　font-size:13px;}#header{　background-color:#FFD4D4;　height:80px;　text-align:center;　line-height:80px;}#sidebar_left{　background-color:#FFECC9;　width:120px;　height:400px;　text-align:center;　line-height:400px;　float:left;}#sidebar_right{　background-color:#FFECC9;　width:120px;　height:400px;　text-align:center;　line-height:400px;　float:right;}#content{　margin-left:120px;　margin-right:120px;　height:400px;　background-color:#F2FFF2;　text-align:center;　line-height:400px;}#footer{　clear:both;　background-color:#FFD4D4;　height:80px;　text-align:center;　line-height:80px;}這段CSS語法中的幾個重點還是要提一下，首先每個#開頭接著的英文就是DIV的id名，代表的就是要替該DIV區塊做樣式設計，由最上方開始，先對整個網頁主體的大區塊sitebody做規劃，依序接著對header、sidebar_left、sidebar_right、content、footer做設計，要做出三欄式的網頁重點就在於DIV的浮動技巧，也就是float，範例在左邊欄sidebar_left使用float:left代表向左浮動，右邊欄使用float:right代表要向右浮動，兩個邊欄向兩邊浮動，那網頁內文區content區塊自然就在中間呈現囉！以下為範例用到的各種語法說明。

float-DIV區塊浮動width-DIV寬度height-DIV高度margin-DIV區塊的外距font-size-文字大小background-color-背景顏色text-align-文字對齊line-height-文字行高clear-清除浮動這裡稍微提示一下，為了範例呈現清楚，所以我們在左邊欄sidebar_left、右邊欄sidebar_right以及內文區content的DIV區塊內使用了高度height，實際應用時並不一定要使用DIV高度，通常都是讓內文的長度去決定網頁所呈現的長度。

只要開一個空白的文件檔，將CSS語法貼進去，然後接著貼上HTML語法架構內的內容，順序是先CSS然後再HTML，接存成test.html的檔案，用瀏覽器開起來就可以看到本文一開始的那個三欄式網頁範例示意圖，原則上Chrome、FireFox、IE、Safari、Opera等主流的瀏覽器都可以順利顯示。

這只是透過CSSDIV設計出三欄式網頁的一種方法，網頁設計師當然有自己的一套設計方式，但大原則通常都是使用類似的手法，DIV區塊的配置、DIV寬度、margin、float、background...等，只要掌握這些基本的CSS概念，就可以靈活運用的設計出各種三欄式網頁。

最後，想知道如何設計出單欄式網頁或兩欄式網頁嗎？還有兩篇詳細的介紹，可以比較與三欄式設計有什麼差異。

延伸閱讀CSSDIV單欄式網頁排版CSSDIV兩欄式網頁排版 您可能會想看 CSSspan區域文字字型設計 CSSspan區域邊框顏色與樣式設計 CSSspan區域背景顏色設計 CSSdisplay:inline-block效果 CSSa連結樣式效果設計 用CSS設計出三角形圖案 CSSdisplay屬性 CSSboxmodel盒子模型 CSSlist-style列表屬性 用CSS設計HTMLbutton按鈕大小 今日熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 即時熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 ©Copyrightwibibi.com網頁設計教學百科基礎的網頁設計規劃、資料庫與程式設計Since2012