這次要跟大家分享這一篇 CSS 排版教學,如何使用 CSS 語法來做一個三欄式網頁版型設計!雖然只是一個很基本的架構,但是這是 CSS 的基楚排版的範例教學,基礎練習是最重要的基本功,所以同學一定要好好練習喔!
在本篇 CSS 教學文當中,大家可以跟著一起學習幾個常用的 CSS 語法,水平排列、清除浮動的寫法….等等。如果之前已經有學過的同學,也可以當作是複習,多練習幾次之後就可以熟能生巧!以下就開始我們這次的 CSS 範例教學練習吧!
CSS 排版教學 -「三欄式版型」
先來看看這次我們要教學的範例完成圖
HTML 網頁結構如下:
1 | <!--最外層包裝 --> |
網頁使用 CSS 之前,如下圖:
接著就可以開始寫 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 時,下方的
範例完成
這是 CSS 排版的基礎範例教學,基礎練習是最重要的基本功,所以同學一定要好好練習喔!
★ 飛肯的CSS教學課程 CSS教學課程:CSS 語法 div 網頁設計排版課程 有興趣的同學可以報名唷!
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!