用DIV 排版三欄式網頁設計- CSS 學習筆記 - Branbibi

用DIV 排版三欄式網頁設計手法與兩欄式網頁設計有點類似，差別在於三欄式網頁架構多了一個邊欄（sidebar），同樣可以使用CSS 的float 浮動技巧來設計 ... CSS學習筆記 CSS學習筆記>用DIV排版三欄式網頁設計 用DIV排版三欄式網頁設計 用DIV排版三欄式網頁設計手法與兩欄式網頁設計有點類似，差別在於三欄式網頁架構多了一個邊欄（sidebar），同樣可以使用CSS的float浮動技巧來設計，至於要用兩次float還是三次float則端看DIV區塊的排序方式，本篇文章打算用三次float創造出三欄式的網頁架構，優點是架構清楚且不容易跑位，各位設計師可以根據本篇的範例程式碼，自己嘗試著調整看看，用不同的浮動方式設計其實也可以做出類似的效果。

在開始看程式碼之前，我們先說明一下這裡三欄式網頁設計的概念，由於三欄式網頁與兩欄式網頁的差別僅在多了一個邊欄，所以設計的重點很簡單，就擺在如何讓兩個邊欄靠兩邊，中間的位置讓網頁主體呈現，這樣就是一個很標準的三欄式網頁架構，操作方式也很簡單，先讓左邊欄向左側浮動，接著讓網頁主體也向左浮動，如此一來就產生出兩欄式的架構，最後再把右邊欄靠右浮動，三欄式網頁架構就出爐囉！請看以下範例的程式碼。

用DIV排版三欄式網頁設計範例語法功能：在新視窗開啟程式碼文字檔實際呈現效果範例的重點在左側邊欄（sidebar_left）靠左浮動（float:left;），中間的網頁主體（sitebody）也靠左浮動（float:left;），右側邊欄（sidebar_right）則靠右浮動，這樣三個欄位就在水平的位置完美呈現，記得要在這三個欄位排版完成後加上clear區塊，把上方的浮動效果清除，以免影響到下方的footer排版，基本上這樣就完成用DIV排版三欄式網頁設計的工作。

還是那句老話，CSS的設計技巧很多種變化，不一定要用這種方式來排版三欄式網頁架構，各位設計師可以自己嘗試著用float去排版，你會發現還有很多種寫法可以做到同樣的效果。

更多網頁排版技巧用DIV排版單欄式網頁設計用DIV排版兩欄式網頁設計參考資訊Wibibi:CSSDIV三欄式網頁排版設計（只用兩次浮動就設計出三欄式網頁架構的技巧） 分享於2015-01-05-更新於2017-07-31 最新分享主題 CSSfont-weight文字粗細效果 三種常用的CSS選擇器(CSSselector) CSSborder-spacing屬性 HTMLTablecellspacingCSS替代語法 HTMLTablecellpaddingCSS替代語法 CSSbackground-position屬性 CSSbackground-repeat屬性 利用CSSborder修改網頁圖片邊框顏色與樣式 CSS的margin與padding有什麼差別 CSStext-align水平對齊設計 累積熱門文章 如何用cssstyle替文字增加刪除線 用DIV排版兩欄式網頁設計 CSStext-align水平對齊設計 用DIV排版單欄式網頁設計 CSSDIV區塊 csscolor文字顏色 CSSposition網頁元素位置設計 CSSz-index垂直螢幕方向位置(z軸高度) CSSDIV背景圖片 CSS的註解寫法規則 今日熱門文章 用DIV排版兩欄式網頁設計 CSSborder元素邊框設計 三種常用的CSS選擇器(CSSselector) CSSposition網頁元素位置設計 CSSDIV區塊內的文字或圖片置中 cssmargin外距 CSScolor屬性設計網頁文字顏色 cssborder-style邊框樣式 CSSfont-weight文字粗細效果 CSSDIV區塊 CSS是目前非常熱門的網頁設計語言，幾乎所有主流的瀏覽器都支援CSS語法，比起傳統的網頁設計方式，CSS能夠提供設計師更多的優勢以設計出更獨具風格的網頁，也讓網站維護更加有效率，CSS讓網頁設計更進化了。

目前尚未建立粉絲團 ©CopyrightSince2013　BranbibiBlog