麻辣家族討論版版's Archiver

小誌 發表於 2010-5-20 15:30

(教學第35篇) 堆疊 上篇

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

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

[attach]777[/attach]

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

[list]
[*]定義第一個層次所要表現的文字樣式 layer1:
這一個層次的開始位置是在瀏覽器視窗從左邊緣算來第30個像素的位置,從上邊緣算來第30個像素的位置,特別要注意的是:這個層次的’z-index’屬性值為1。[code].layer1
{
position:absolute;
top:20px;
left:30px;
z-index:1;
font-size:24pt;
font-family:標楷體;
color:#FFFFFF
}[/code][*]定義第二個層次所要表現的文字樣式 layer2:
這第二個層次的開始位置是在瀏覽器視窗從上邊緣算來第40個像素的位置,從左邊緣算來第120個像素的位置,特別要注意的是:這個層次的’z-index’屬性值為2。[code].layer2
{
position:absolute;
top:40px;
left:120px;
z-index:2;
font-size:12pt;
font-family:標楷體
}[/code][*]在網頁標籤<P>中直接加入我們所宣告的CSS屬性類別設定。[code]<P class="layer1">第一層的文字字串</P>
<P class="layer2">第二層的文字字串</P>[/code][/list]

輕輕鬆鬆完成我們第一個利用堆疊屬性所製作的文字疊層效果。

[attach]778[/attach][code]<html>
<HEAD>
<title>堆疊效果範例1</title>
<STYLE>
BODY {background:#008800}
.layer1
{
        position:absolute;
        top:20px;
        left:30px;
        z-index:1;
        font-size:24pt;
        font-family:標楷體;
        color:#FFFFFF
}
.layer2
{
        position:absolute;
        top:40px;
        left:120px;
        z-index:2;
        font-size:12pt;
        font-family:標楷體
}

</STYLE>
</HEAD>
<BODY>
<P class="layer1">第一層的文字字串</P>
<P class="layer2">第二層的文字字串</P>
</BODY>
</html>[/code]

小誌 發表於 2010-5-20 15:32

不僅是文字字串可以做層次的堆疊,其實圖片也可以做不同層次的堆疊!

[attach]779[/attach][code]<html>
<HEAD>
<title>堆疊效果範例2</title>
<STYLE>
.map1
{
        position:absolute;
        top:20px;
        left:30px;
        z-index:1;
}
.map2
{
        position:absolute;
        top:50px;
        left:100px;
        z-index:2;
}
</STYLE>
</HEAD>
<BODY>
<img src="webusedmap1.gif" class="map1">
<img src="webusedmap2.gif" class="map2">
</BODY>
</html>[/code]看過了「文字堆疊」與「圖片堆疊」的範例後,你是不是發現有一個屬性很重要?就是那個『z-index』屬性ㄚ,『z-index』屬性將決定那一個堆疊元件該在上方,而那一個堆疊元件又該在下方,注意喔!z-index屬性值越大的堆疊排列的順序會在越上層!

頁: [1]

麻辣家族討論版版為 麻辣學園 網站成員  由 昱得資訊工作室 © Since 1993 所提供