使用 <div> 和 CSS 語法設計 4 欄式的網頁版型
4 欄式的網頁版型的確只要使用 float:left 就可以完成了~
中間的 4 個 <div> 在使用 float:left 的時候,就會依序的直接靠在前面一個 <div> 的旁邊~
就跟上課的時候教過的【範例 14_003】 float 浮動式排列的 BOX 的方法是一模一樣的~
一個接著一個的並排在一起,就會形成 4 欄式並排的網頁版型~
請參考以下範例:
在 HTML 網頁上初步規劃 7 個 <div> 位置圖,如下:
HTML 語法部份,先寫好<div>結構,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <div id="HEADER"> </div> <div id="WRAPPER"> <div id="BOX_A"> </div> <div id="BOX_B"> </div> <div id="BOX_C"> </div> <div id="BOX_D"> </div> </div> <div id="FOOTER"> </div> |
新開一頁 CSS 文件,版型配置相關的主要 CSS 語法部份,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | #HEADER { margin:0 auto; width:900px; height:200px; background-color:#336699; } #WRAPPER { margin:0 auto; width:900px; overflow:hidden; /* 當內容的<div>使用 Float 的時候 #WRAPPER 的高度會消失 */ /* 使用 overflow:hidden; 即可破解這個問題 */ background-color:#999999; padding-top:20px; padding-bottom:20px; } #BOX_A { width:170px; /*<div>一定要先設定寬度之後才能使用 float 做水平排列 */ float:left; /* 使用 float 做水平排列 */ background-color:#FFFFCC; margin-left:12px; /* 設定欄位的左邊外間距 */ } #BOX_B { width:170px; /*<div>一定要先設定寬度之後才能使用 float 做水平排列 */ float:left; /* 使用 float 做水平排列 */ background-color:#FFFF66; margin-left:12px; /* 設定欄位的左邊外間距 */ } #BOX_C { width:170px; /*<div>一定要先設定寬度之後才能使用 float 做水平排列 */ float:left; /* 使用 float 做水平排列 */ background-color:#FFFFCC; margin-left:12px; /* 設定欄位的左邊外間距 */ } #BOX_D { width:170px; /*<div>一定要先設定寬度之後才能使用 float 做水平排列 */ float:left; /* 使用 float 做水平排列 */ background-color:#FFFFCC; margin-left:12px; /* 設定欄位的左邊外間距 */ } #FOOTER { clear:both; /* 當上方的內容使用 float 時,下方的 <div> 會重疊上去的問題 */ /* 寫 clear:both; 解除浮動就可以解決這個問題 */ margin:0 auto; width:900px; height:200px; background-color:#336699; } |
範例下載【4 欄式 CSS 網頁排版版型 】
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!