CSS 排版教學 – 4 欄式網頁版型 – 範例下載

使用 <div> 和 CSS 語法設計 4 欄式的網頁版型

4 欄式的網頁版型的確只要使用 float:left 就可以完成了~

中間的 4 個 <div> 在使用 float:left 的時候,就會依序的直接靠在前面一個 <div> 的旁邊~

就跟上課的時候教過的【範例 14_003】 float 浮動式排列的 BOX 的方法是一模一樣的~

一個接著一個的並排在一起,就會形成 4 欄式並排的網頁版型~

請參考以下範例:

在 HTML 網頁上初步規劃 7 個 <div> 位置圖,如下:

CSS 教學 - 網頁排版  - CSS 排版教學 - 4 欄式網頁版型 - 範例下載 - div_box

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 網頁排版版型

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

關於「姜智豪 老師」

於 1996 年開始從事網頁設計工作 20 多年,參與設計過許多網站專案的開發,一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術,對於 SEO 優化搜尋引擎排名提昇,以及 Instructional Design 教學專案設計亦有深入的研究。
posted in CSS 教學 - 網頁排版 and tagged , , , , , .

留言功能已關閉。