網頁排版設計. 1. CSS DIV單欄式排版： | by Alan Huang

3. CSS DIV三欄式排版： ... 有兩種方法可以產生這樣的版型，. 第一種就是利用雙欄式的float: left;套用在leftbar、content、rightbar，並修改width到適當的寬度，最後在這三 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite網頁排版設計1.CSSDIV單欄式排版：較常見的cssstyle：width—設定DIV寬度height—設定DIV高度text-align—設定DIV內的文字對齊line-height—設定DIV內的文字行高font-size—設定DIV內的文字大小color—設定DIV內的文字顏色font-weight—設定DIV內的文字粗細background-color—設定DIV區塊的背景顏色2.CSSDIV兩欄式排版：與單欄式設計最大的差異在於，兩欄式設計使用了CSSfloat浮動技巧，讓邊欄Sidebar的DIV區塊與Body的DIV區塊透過浮動的關係並排在一起，造就出兩欄式的網頁規劃。

但使用float要特別注意，要多用一個來清除浮動效果的區塊，主要功能是用來清除該行DIV以上的元素浮動效果，以便讓緊接著要出現的Footer區塊正常顯示。

我們會用到CSSClear來清除浮動的效果，在"套用過float的div區塊之後"和"在希望自然呈現的div區塊之前"，加上一個以clearfix命名的區塊，這個命名就代表清除浮動，但其實要怎麼命名都可以，並在此區塊的CSS加上clear:both;就完成了！(以下示範)3.CSSDIV三欄式排版：有兩種方法可以產生這樣的版型，第一種就是利用雙欄式的float:left;套用在leftbar、content、rightbar，並修改width到適當的寬度，最後在這三個div區塊之後加上clearfix的div，並使用clear:both;的效果就完成了。

第二種是content不使用float效果，並將rightbar的float改成float:right;那content就會自然的在中間呈現，但這裡要注意，content必須設定margin左右各為sidebar的寬度，這樣裡面的內容才不會被兩側的sidebar擋住。

(此篇文章資料皆來自其他網站，只做整理自行進修，不供其他商業用途。

)--MorefromAlanHuangFollowFrontEndEngineerLovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedAlanHuang1FollowerFrontEndEngineerFollowHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable