亚洲欧洲国产欧美一区精品,激情五月亚洲色五月,最新精品国偷自产在线婷婷,欧美婷婷丁香五月天社区

      考試首頁 | 考試用書 | 培訓課程 | 模擬考場 | 考試論壇  
        當前位置:設計制作 > CSS/HTML > 文章內容
        

      5日精通CSS層疊樣式表(第4日)

       [ 2016年10月8日 ] 【

      BODY { background-attachment: fixed; background-image: url(
      15/stuff3a/background.gif) }
      這里是一個例子,你可以看到頁面滾動時,背景仍保持固定。(注意:Communicator不支持這項屬性,IE可以。)
      該屬性只用于頁面背景,即<BODY>標簽內設定的背景圖象。
      其參數(shù)有兩種選擇:
      scroll指背景圖象隨文字內容一起滾動,即通常所見的方式。
      fixed指文字滾動時,背景圖象保持固定。
      背景定位(background-position)
      你可以設定將背景插在什么位置顯示。
      P { background-position: center bottom; background-image:
      url (background.gif) }
      當上述CSS規(guī)則應用于本段文字時,背景圖象將在本段的中下部開始顯示并向右平鋪。
      如果你看不到上述的顯示效果,則說明你所使用的瀏覽器是Communicator,它不支持背景定位。
      設定位置的3種方法:
      關鍵字參數(shù)(Keyword values)
      關鍵字設定方法簡便易用:
      top將背景圖象同前景要素的頂部對齊。
      bottom將其同前景要素的底部對齊。
      left將其同左邊對齊。
      right將其同右邊對齊。
      center將其水平居中(如果使用在另一關鍵字前面)或垂直居中(如果用在另一關鍵字后面)。
      長度參數(shù)
      長度參數(shù)可以使用你對背景圖象的位置作出更精確的控制。你可以設定水平和垂直定位起點,例:
      P { background-position: 70px 10px; background-repeat:
      repeat-y; background-image: url
      (background.gif) }
      本段顯示了上述規(guī)則的執(zhí)行效果。IE支持這種屬性,將GIF圖象設置在從左上角起水平70象素,垂直10象素的位置。由于我設置了
      background-repeat: repeat-y,GIF圖象將在文字后垂直平鋪。
      你可以使用我們以前學過的任何一種長度單位,例如pixels,
      points, inches, ems等。
      (IE 3不支持長度單位顯示這種效果)
      比例值(Percentage values)
      你還可以使用比例值設定背景圖象的位置,例:
      P { background-position: 75% 50%; background-image: url
      (background.gif) }
      當這條CSS規(guī)則應用于本段時,背景圖象從水平距離段落右端70%,垂直距離段落頂部50%的位置顯示。如果你重新調整瀏覽器窗口的尺寸,使得段落的顯示尺寸變化,背景圖象的位置也相應發(fā)生變化。在本段上不會發(fā)生這樣的變化,因為本段的尺寸是固定的,不會隨著窗口尺寸的調整而變化。


      4.6 快捷特性
      利用快捷特性可以使你將學過的所有背景屬性加到一個CSS規(guī)則中。
      IE 3中你必須這樣應用(如我們以前提過的),你也有可能會在所有瀏覽器中應用它。
      背景(background)
      利用背景屬性,你可以設定背景顏色、圖象、平鋪方法、固定及滾動顯示及定位。例:
      P { background: url(background.gif) #CCFFCC repeat-y top
      right }
      本段應用了上述規(guī)則。你可以看到背景是淺綠色,背景圖象只垂直平鋪,第1次平鋪的位置在右上角。注意Communicator不支持背景定位屬性。
      如果你看不到該段文字描述的效果,則說明你的瀏覽器不支持這項CSS屬性。
      使用背景屬性時,你無須設定背景的每一項目內容。你可以只設定你所要的背景圖象和色彩,或者設定其它組合。
      使用快捷特性時也會碰到使用單另的背景屬性時遇到的各種瀏覽器問題。


      4.7 第4天的練習
      請點擊本頁查看例子,并試著自己重新制作出例子中的效果,最好不要看代碼。該例子用了兩幅圖象,你可以從位置1.和位置2
      處下載。不要忘了,要使例子正確顯示,你必須安裝4.0版的瀏覽器。
      小問題:如何讓你的公司的標志不論頁面滾還是瀏覽器窗口尺寸調整都永遠顯示在瀏器窗口的右下角?在明天的課程前我將告你答案。


      4.8 復習
      樣式表使得網頁設計更加有趣。我們新近掌握的控制背景圖象的方法更另我們心動不已。
      以下是我們今天所學內容的總結:
      color設定要素的前景顏色。
      background-color設定要素后面固定的顏色。
      background-image是將GIF和JPEG圖象插入到文字和其它要素后面的方法。
      background-repeat可以控制是否將背景圖象平鋪。
      background-attachment控制是否將背景圖象固定在屏幕顯示上,不隨文字的滾動而滾動。
      background-position用于精確控制背景圖象相對于要素的顯示位置。
      background是設定所有有關背景設置的屬性的快捷方式。
      明天將是樣式表課程的最好一天,我們將學習將要素設置在頁面的任何位置的方法,及如何將各要素疊放在彼此之上。明天見!

      首頁 1 2 尾頁
      將考試網添加到收藏夾 | 每次上網自動訪問考試網 | 復制本頁地址,傳給QQ/MSN上的好友 | 申請鏈接 | 意見留言 TOP
      關于本站  網站聲明  廣告服務  聯(lián)系方式  站內導航  考試論壇
      Copyright © 2007-2013 中華考試網(Examw.com) All Rights Reserved