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

給同學多多練習使用 CSS 語法編排網頁版型,在這個版型的四周增加了 陰影與倒影的圖形設計。

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

網頁版型設計圖,如下:

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

初步規劃 <div> 位置圖,如下:

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

新開一頁 HTML 網頁,把 <div> 寫出來,如下:



 

新開一頁 CSS 文件,版型配置相關的主要 CSS 語法部份,如下:

@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 語法 - 網頁設計  - CSS 語法 - 2 欄式網頁版型 - 陰影與倒影 - 教學與範例下載 - 003

CSS 真的很方便吧~

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

對於這個網頁版型有問題的同學,歡迎隨時在這兒發問喔~

下載【兩欄式 CSS 網頁版型 – 無文字內容版

下載【兩欄式 CSS 網頁版型 – 有文字內容版

 

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , , , , .

迴響已被關閉。