CSS 排版教學 – 三欄式網頁設計教學範例

這次要跟大家分享這一篇 CSS 排版教學,如何使用 CSS 語法來做一個三欄式網頁版型設計!雖然只是一個很基本的架構,但是這是 CSS 的基楚排版的範例教學,基礎練習是最重要的基本功,所以同學一定要好好練習喔!

在本篇 CSS 教學文當中,大家可以跟著一起學習幾個常用的 CSS 語法,水平排列、清除浮動的寫法….等等。如果之前已經有學過的同學,也可以當作是複習,多練習幾次之後就可以熟能生巧!以下就開始我們這次的 CSS 範例教學練習吧!

CSS 排版教學 -「三欄式版型」

先來看看這次我們要教學的範例完成圖

CSS 教學 - 網頁排版  - CSS 排版教學 – 三欄式網頁設計教學範例 - css-3-1

HTML 網頁結構如下:

1
<!--最外層包裝 -->

….

 

網頁使用 CSS 之前,如下圖:

CSS 教學 - 網頁排版  - CSS 排版教學 – 三欄式網頁設計教學範例 - css-3-2

接著就可以開始寫 CSS 語法了

CSS 語法說明如下:

關於下面第 3 行的說明: 先把所有 HTML 元素的內外間距都歸 0

詳細教學與說明請參考我們的另一篇教學「CSS Reset

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
*{ 
 
  margin:0;  /* 先把所有 HTML 元素的內外間距都歸 0 */
 
  padding:0; 
 
}
body {
 
    background-color: #666666;
 
}
 
/*---- 最外層包裝 ----*/
#WRAPPER {
 
    width: 800px;
 
    margin:0 auto;
 
    padding:0 10px;
 
    background-image: url(images/outer_bg.gif);
}
 
/*---- 頁首 ----*/
#HEADER {
 
    background-color: #FFFFFF;
 
}
#HEADER h1 a {
 
    text-indent: -9999px;
 
    display: block;
 
    width: 800px;
 
    height: 200px;
 
    background-image: url(images/header.gif);
 
}
 
/*---- 主選單 ----*/
#MAIN_NAV {
 
    background-color: #000000;
 
    overflow:auto;
 
    width: 800px;
 
}
#MAIN_NAV ul {
 
    list-style-type:none;
 
}
#MAIN_NAV li {
 
    float: left;
 
}
#MAIN_NAV li a {
 
    display: block; /* 要把超連結設計成按鈕時一定要先寫 display: block; 喔 */
 
    padding: 5px 10px 5px 10px;
 
    background-color: #000000;
 
    color: #FFFFFF;
 
    font-weight: bold;
 
    font-family: Arial;
 
    font-size: 12px;
 
    text-decoration: none;
 
    border-right:1px solid #FFFFFF;
 
}
#MAIN_NAV li a:hover {
 
    background-color: #FFFFFF;
 
    color: #000000;
 
}
 
/*---- 左邊欄位 ----*/
#SUB_NAV_1{
 
    clear: both; /* 當上方的內容使用 float 時,下方的

會重疊上去的問題 */ /* 寫 clear:both; 解除浮動就可以解決這個問題 */ width:150px; /*

一定要先設定寬度之後才能使用 float 做水平排列 */ float:left; /* 使用 float 做讓

靠左 */ } #SUB_NAV_1 a{ color:#6699FF; } #SUB_NAV_1 a:hover{ color:#FF0000; } #SUB_NAV_1 p,#SUB_NAV_1 h2{ text-align:center; padding:5px 10px; } /*—- 右邊欄位 —-*/ #SUB_NAV_2{ width:150px; /*

一定要先設定寬度之後才能使用 float 做水平排列 */ float:right; /* 使用 float 做讓

靠右 */ } #SUB_NAV_2 a{ color:#6699FF; } #SUB_NAV_2 a:hover{ color:#FF0000; } #SUB_NAV_2 p,#SUB_NAV_2 h2{ text-align:center; padding:5px 10px; } /*—- 內容區 —-*/ #CONTENT { width:auto; /* 寬度設定 auto 就會自動伸縮,這是

的預設值,所以可以省略不寫 */ /* 這個

就會因為上面的 float 影響,浮上去水平排列在一起 */ background-color: #EEE; margin-left:150px; /* 上面的左邊欄位寬度是 170px,這個

設定左間距避免和上面的

重疊 */ margin-right:150px; /* 上面的左邊欄位寬度是 170px,這個

設定左間距避免和上面的

重疊 */ } #CONTENT h2, #CONTENT h4, #CONTENT p { padding:6px 20px 6px 20px; font-size:12px; } #CONTENT h2 { font-family: Arial; font-size: 24px; text-align: center; padding-top: 10px; background-color:#666; color:#FFF; letter-spacing:10px; border-top:2px #999 solid; } /*—- 頁尾 —-*/ #FOOTER { clear: both; /* 當上方的內容使用 float 時,下方的

會重疊上去的問題 */ /* 寫 clear:both; 解除浮動就可以解決這個問題 */ background-color: #000000; } #FOOTER h2, #FOOTER p { font-size: 12px; padding:5px 20px; font-family: Arial; color: #FFFFFF; }

範例完成

CSS 教學 - 網頁排版  - CSS 排版教學 – 三欄式網頁設計教學範例 - css-3-1

這是 CSS 排版的基礎範例教學,基礎練習是最重要的基本功,所以同學一定要好好練習喔!

★ 飛肯的CSS教學課程 CSS教學課程:CSS 語法 div 網頁設計排版課程   有興趣的同學可以報名唷!

 

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

 

關於「姜智豪 老師」

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *