CSS排版教學，用 CSS 語法編排網頁版型， 在 HTML 使用 div 劃分欄位，再用 CSS 語法來做圖形與版面編排，這個範例是 CSS 網頁設計的基本練習，給同學多多練習使用 CSS 語法編排網頁版型，在這個版型的四周還增加了 陰影與倒影的圖形設計。
網頁 HTML 部份使用 <div> 畫分欄位，再用 CSS 語法來做圖形編排與版面定位，這個範例是 CSS 語法設計網頁的基本練習，與我們飛肯上課的時候的兩欄式 CSS 版型是差不多的，加以改良，製作出 CSS 版型的外邊框四面陰影效果~
網頁版型設計圖
規劃 <div> 位置
開 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 語法部份，如下：
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 | @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 真的很方便吧~
同學要多多練習，熟練之後，就可以自己創作更多不同的網頁版型嘍。
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
