返回列表 上一主題 發帖

[教學] (教學第35篇) 堆疊 上篇

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 倒序看帖
打印
tT
發表於 2010-5-20 15:30 | 只看該作者

[教學] (教學第35篇) 堆疊 上篇

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

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



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


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


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

14-2.png
  1. <html>
  2. <HEAD>
  3. <title>堆疊效果範例１</title>
  4. <STYLE>
  5. BODY {background:#008800}
  6. .layer1
  7. {
  8.         position:absolute;
  9.         top:20px;
  10.         left:30px;
  11.         z-index:1;
  12.         font-size:24pt;
  13.         font-family:標楷體;
  14.         color:#FFFFFF
  15. }
  16. .layer2
  17. {
  18.         position:absolute;
  19.         top:40px;
  20.         left:120px;
  21.         z-index:2;
  22.         font-size:12pt;
  23.         font-family:標楷體
  24. }

  26. </STYLE>
  27. </HEAD>
  28. <BODY>
  29. <P class="layer1">第一層的文字字串</P>
  30. <P class="layer2">第二層的文字字串</P>
  31. </BODY>
  32. </html>
複製代碼
收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
2#
發表於 2010-5-20 15:32 | 只看該作者
不僅是文字字串可以做層次的堆疊，其實圖片也可以做不同層次的堆疊！

  1. <html>
  2. <HEAD>
  3. <title>堆疊效果範例２</title>
  4. <STYLE>
  5. .map1
  6. {
  7.         position:absolute;
  8.         top:20px;
  9.         left:30px;
  10.         z-index:1;
  11. }
  12. .map2
  13. {
  14.         position:absolute;
  15.         top:50px;
  16.         left:100px;
  17.         z-index:2;
  18. }
  19. </STYLE>
  20. </HEAD>
  21. <BODY>
  22. <img src="webusedmap1.gif" class="map1">
  23. <img src="webusedmap2.gif" class="map2">
  24. </BODY>
  25. </html>
複製代碼
看過了「文字堆疊」與「圖片堆疊」的範例後，你是不是發現有一個屬性很重要？就是那個『z-index』屬性ㄚ，『z-index』屬性將決定那一個堆疊元件該在上方，而那一個堆疊元件又該在下方，注意喔！z-index屬性值越大的堆疊排列的順序會在越上層！
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 手心向下是助人，手心向上是求人；助人快樂，求人痛苦。
返回列表 上一主題