2012年2月8日 星期三

CSS 語法 – 2 欄式網頁版型 – 陰影與倒影 – 教學與範例下載

給同學多多練習使用 CSS 語法編排網頁版型，在這個版型的四周增加了 陰影與倒影的圖形設計。
網頁 HTML 部份使用 <div> 畫分欄位，再用 CSS 語法來做圖形編排與版面定位，這個範例是 CSS 語法設計網頁的基本練習，與我們飛肯上課的時候的兩欄式 CSS 版型是差不多的，加以改良，製作出 CSS 版型的外邊框四面陰影效果~
網頁版型設計圖，如下：
CSS 語法 - 2 欄式網頁版型 - 陰影與倒影設計 - 教學與範例下載
初步規劃 <div> 位置圖，如下：
新開一頁 HTML 網頁，把 <div> 寫出來，如下：
1
2
3
4
5
6
7
8
9
10
11

<div id="HEADER"> </div>
 
<div id="WRAPPER">
 
  <div id="SIDE"> </div>
 
  <div id="CONTENT"> </div>
 
</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

@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:auto;
}
CONTENT {
 margin-left:170px;
 _height:1%;
}
SIDE {
 float:left;
 width:170px;
}
FOOTER {
 clear:both;
 _height:1%;
 margin:0 auto;
 width:900px;
 height:121px;
 background-image:url(images/down.jpg);
}

把主要的網頁版型外觀的 <div> 和 CSS 語法寫完後，工作就算是初步完成了~
接下來就只要把頁面所需要的文章內容和插圖置入即可~
我們先放入一些簡單的文字內容試看看~ 如下：
CSS 真的很方便吧~
同學要多多練習，熟練之後，就可以自己創作更多不同的網頁版型嘍。
對於這個網頁版型有問題的同學，歡迎隨時在這兒發問喔~
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)