回首頁 與我們連絡 網站地圖 加入我的最愛



 





CSS除了可以用來設定網頁文字的大小、樣式、字型與顏色外,我們還可以利用CSS以圖素(像素)為單位來將文字字串安排在多層次的版面上,這就是所謂的堆疊,比較理論複雜的說法就是所謂的'z-index',以3D立體來說:我們可以將文字平面(或是圖片平面)當成水平X軸與垂直Y軸所構成的平面,而'z-index'就是指Z軸上的座標位置。

當我們要訂定一個網頁中的文字內容或圖片絕對位置時,我們必須遵守CSS所定位置標準:’top’與’left’(以圖素(像素)為單位),舉例來說:我們要將某一文字字串放在瀏覽器視窗從左邊緣算來第60個像素的位置,從上邊緣算來第100個像素的位置,則我們應該指定’top’為100與’left’為60。


看到了上圖所呈現的文字字串堆疊效果覺得很棒吧!這個效果是如何做出來的呢?複習一下前幾個單元的介紹,同時將本單元的新CSS性質屬性加入利用,我們Step By Stype 的來實做一下:

標準的網頁內容開頭:
<html>
<HEAD>
<title>堆疊效果範例1</title>

CSS樣式宣告內容:別忘了加上註解符號。
<STYLE>
<!--

設定網頁的背景顏色:網頁背景色設為綠色。
BODY {background:#008800}

定義第一個層次所要表現的文字樣式 layer1
這一個層次的開始位置是在瀏覽器視窗從左邊緣算來第30個像素的位置,從上邊緣算來第20個像素的位置,特別要注意的是:這個層次的’z-index’屬性值為1
.layer1{
position:absolute;
top:20px;
left:30px;
z-index:1;
font-size:24pt;
font-family:標楷體;
color:#FFFFFF}

定義第一個層次所要表現的文字樣式 layer2
這第二個層次的開始位置是在瀏覽器視窗從上邊緣算來第40個像素的位置,從左邊緣算來第120個像素的位置,特別要注意的是:這個層次的’z-index’屬性值為2
.layer2{
position:absolute;
top:40px;
left:120px;
z-index:2;
font-size:12pt;
font-family:標楷體}

結束CSS樣式宣告內容:別忘了加上註解符號。
-->
</STYLE>
</HEAD>

開始主文(<BODY>標籤)並在網頁標籤<P>中直接加入我們所宣告的CSS屬性類別設定。
<BODY>
<P
class="layer1">第一層的文字字串</P>
<P
class="layer2">第二層的文字字串</P>

結束主文(</BODY>)與網頁主體(</html>)標籤。
</BODY>
</html>

[實例展示]   [原始網頁內容]


不僅是文字字串可以做層次的堆疊,其實圖片也可以做不同層次的堆疊!在開始示範吐片層次堆疊前,不知你在觀賞上一個文字字串堆疊範例時是否注意到了一個CSS屬性:position?這個屬性是做什麼用的呢?它是用來指定元件(文字字串、圖片....)在瀏覽器畫面上的擺設方式,它的屬性值之介紹說明如下:

absolute 以主元件為基準(通常指的是網頁畫面主體),擺設元件在某依特定位置。
relative 以相鄰的元件為位置基準,擺設元件在某依特定位置。
static 依元件在HTML網頁原始碼中的位置擺放,此為預設值。

了解了position這個屬性是做什麼用的之後,我們就以兩張不同的圖片為元件來進行層次排練的實作練習:

標準的網頁內容開頭:
<html>
<HEAD>
<title>堆疊效果範例2</title>

CSS樣式宣告內容:別忘了加上註解符號。
<STYLE>
<!--

定義第一個層次所要表現的圖片擺設位置樣式 map1
這一個層次的開始位置是在瀏覽器視窗從左邊緣算來第30個像素的位置,從上邊緣算來第20個像素的位置,特別要注意的是:這個層次的’z-index’屬性值為1
.map1{
position:absolute;
top:20px;
left:30px;
z-index:1;}

定義第一個層次所要表現的圖片擺設位置樣式 map2
這第二個層次的開始位置是在瀏覽器視窗從上邊緣算來第50個像素的位置,從左邊緣算來第100個像素的位置,特別要注意的是:這個層次的’z-index’屬性值為2
.map2{
position:absolute;
top:50px;
left:100px;
z-index:2;}

結束CSS樣式宣告內容:別忘了加上註解符號。
-->
</STYLE>
</HEAD>

開始主文(<BODY>標籤)並在網頁標籤<img>中直接加入我們所宣告的CSS屬性類別設定。
<BODY>
<img src="images/webusedmap1.gif" 
class="map1">
<img src="images/webusedmap2.gif" 
class="map2">

結束主文(</BODY>)與網頁主體(</html>)標籤。
</BODY>
</html>

[實例展示]   [原始網頁內容]

 

CSS 教學文件
CSS入門講座
基礎網頁應用
進階網頁應用
結合JavaScript應用
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為