2012年2月8日 星期三

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

使用 <div> 和 CSS 語法設計 4 欄式的網頁版型
4 欄式的網頁版型的確只要使用 float:left 就可以完成了~
中間的 4 個 <div> 在使用 float:left 的時候，就會依序的直接靠在前面一個 <div> 的旁邊~
就跟上課的時候教過的【範例 14_003】 float 浮動式排列的 BOX 的方法是一模一樣的~
一個接著一個的並排在一起，就會形成 4 欄式並排的網頁版型~
請參考以下範例：
在 HTML 網頁上初步規劃 7 個 <div> 位置圖，如下：
CSS 語法教學 - 4 欄式網頁版型 - 範例下載
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<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>
 
<br class="CLEAR">
 
</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

@import url("reset.css");
#HEADER {
 margin:0 auto;
 width:900px;
 height:200px;
 background-color:#336699;
}
#WRAPPER {
 margin:0 auto;
 width:900px;
 overflow:hidden;
 background-color:#999999;
 padding-top:20px;
 padding-bottom:20px;
}
#BOX_A {
 width:170px;
 float:left;
 background-color:#FFFFCC;
 margin-left:12px;
 _display:inline;
}
#BOX_B {
 width:250px;
 float:left;
 background-color:#FFFF66;
 margin-left:12px;
 _display:inline;
}
#BOX_C {
 width:250px;
 float:left;
 background-color:#FFFFCC;
 margin-left:12px;
 _display:inline;
}
#BOX_D {
 width:170px;
 float:left;
 background-color:#FFFF66;
 margin-left:12px;
 _display:inline;
}
br.CLEAR {
 clear: both;
 height:0;
 font-size:1px;
 line-height:0;
}
#FOOTER {
 clear:both;
 margin:0 auto;
 width:900px;
 height:120px;
 background-color:#336699;
}
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)