CSS 排版教學 – 2 欄式網頁版型排版

CSS排版教學,用 CSS 語法編排網頁版型, 在 HTML 使用 div 劃分欄位,再用 CSS 語法來做圖形與版面編排,這個範例是 CSS 網頁設計的基本練習,給同學多多練習使用 CSS 語法編排網頁版型,在這個版型的四周還增加了 陰影與倒影的圖形設計。

網頁 HTML 部份使用 <div> 畫分欄位,再用 CSS 語法來做圖形編排與版面定位,這個範例是 CSS 語法設計網頁的基本練習,與我們飛肯上課的時候的兩欄式 CSS 版型是差不多的,加以改良,製作出 CSS 版型的外邊框四面陰影效果~

網頁版型設計圖

CSS 教學 - 網頁排版  - CSS 排版教學 - 2 欄式網頁版型排版 - 0011

 

規劃 <div> 位置

CSS 教學 - 網頁排版  - CSS 排版教學 - 2 欄式網頁版型排版 - 002

開 HTML 網頁

把 <div> 寫出來,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div id="HEADER">
</div>
 
<div id="WRAPPER">
 
    <div id="SIDE">
    </div>
 
    <div id="CONTENT">
    </div>
 
</div>
 
<div id="FOOTER">
</div>

開 CSS 文件

HTML 版型配置相關的主要 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
 
@import url("reset.css");
 
body {
 
    background-color:ADADAD;
 
}
#HEADER {
 
    margin:0 auto;
 
    width:900px;
 
    height:131px;
 
    background-image:url(images/top.jpg);
 
}
#WRAPPER {
 
    margin:0 auto;
 
    width:880px;
 
    padding:0 10px;
 
    background-image:url(images/center.jpg);
 
    overflow:hidden; /* 當內部有 <div> 使用 float 的時候,父層的 <div> 高度會壞掉 */
                     /* 使用 overflow:hidden; 是最簡單破解這個問題的方法 */
}
 
#SIDE {
 
    width:170px; /* <div> 要設定寬度,才能配合 float 做水平靠左或靠右排列 */
 
    float:left; /* 使用 float 讓這個 <div> 做水平靠左排列 */
 
}
 
#CONTENT {
 
    width:auto; /* 設定 auto 就會自動伸縮,這是 <div> 的預設值,所以可以省略不寫 */
 
    margin-left:170px; /* 上面的 #SIDE <div> 寬度是 170px */
                           /* 這個 #CONTENT 設定左間距可以避免多出來的內容文字和上面的 <div> 重疊 */
 
}
 
#FOOTER {
 
    clear:both; /* 當上方的內容使用 float 時,下方的 <div> 會產生重疊上去的問題 */
                /* 寫 clear:both; 解除浮動就可以解決這個問題 */
 
    margin:0 auto;
 
    width:900px;
 
    height:121px;
 
    background-image:url(images/down.jpg);
 
}

重點說明

使用 Float 的時候父層 #WRAPPER 的高度會消失,使用 overflow:hidden; 即可破解這個問題。

#SIDE 一定要先設定寬度之後才能使用 float 做水平排列, 使用 float 做水平排列 讓這個 <div > 靠左

#CONTENT 寬度設定 auto 就會自動伸縮,這是 <div> 的預設值,所以可以省略不寫

這個 <div> 就會因為上面的 float 影響,浮上去水平排列在一起

上面的 #SIDE 寬度是 170px,這個 #CONTENT 設定左間距可以避免多出來的內容文字和上面的 <div> 重疊

#FOOTER 當上方的內容使用 float 時,下方的 <div> 會產生重疊上去的問題, 寫 clear:both; 解除浮動就可以解決這個問題。

把主要的網頁版型外觀的 <div> 和 CSS 語法寫完後,工作就算是初步完成了~

接下來就只要把頁面所需要的文章內容和插圖置入即可~

我們先放入一些簡單的文字內容試看看~ 如下:

網頁完成

CSS 教學 - 網頁排版  - CSS 排版教學 - 2 欄式網頁版型排版 - 003

CSS 真的很方便吧~

同學要多多練習,熟練之後,就可以自己創作更多不同的網頁版型嘍。

 

 

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

 

關於「姜智豪 老師」

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

留言功能已關閉。