返回列表 上一主題 發帖

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

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

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

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

14-1.png
2010-5-20 15:28


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


  • 定義第一個層次所要表現的文字樣式 layer1:
    這一個層次的開始位置是在瀏覽器視窗從左邊緣算來第30個像素的位置,從上邊緣算來第30個像素的位置,特別要注意的是:這個層次的’z-index’屬性值為1。
    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’屬性值為2。
    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
2010-5-20 15:30
  1. <html>
  2. <HEAD>
  3. <title>堆疊效果範例1</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. }

  25. </STYLE>
  26. </HEAD>
  27. <BODY>
  28. <P class="layer1">第一層的文字字串</P>
  29. <P class="layer2">第二層的文字字串</P>
  30. </BODY>
  31. </html>
複製代碼
心安,平安   為了論壇的永續經營,您不妨 贊 助 論 壇
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

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

14-3.png
2010-5-20 15:32
  1. <html>
  2. <HEAD>
  3. <title>堆疊效果範例2</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

        靜思自在 : 發脾氣是短暫的發瘋。
返回列表 上一主題