資源描述：
《圖像+css技術(shù)制作：動態(tài)菜單導(dǎo)航》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、圖像+CSS技術(shù)制作：動態(tài)菜單導(dǎo)航>>edu.5151doc.教育資源庫本篇詳細(xì)介紹了圖像+CSS技術(shù)制作：動態(tài)菜單導(dǎo)航的文章主題。CSS技術(shù)結(jié)合圖像實(shí)現(xiàn)動態(tài)效果的菜單導(dǎo)航 本文介紹一些我們經(jīng)常使用但很少關(guān)注的東西，在下面的敘述中我們假設(shè)你的CSS使用的是import技術(shù)，因?yàn)檫@里CSS可能會讓你對Opera4失去信心。如果你把圖像作為你的頁面布局的一部分，在CSS的控制之下嵌入圖像很可能是你不希望得到的結(jié)果如果你使用的是一個(gè)不支持CSS2標(biāo)準(zhǔn)的瀏覽器例如Opera4。下面介紹一個(gè)例子，使用一些GIF圖像去修飾圓角?！ ∈聦?shí)上我不想在網(wǎng)頁的HTML代碼中嵌入圖像，
2、因?yàn)樗鼈兇淼闹皇且曈X上的東西，而不是內(nèi)容上的體現(xiàn)，因此我將它們和其它一些有代表性的部分放在CSS之下控制。這個(gè)方法將使你更加方便地控制頁面，讓其變得更加漂亮。為了做出環(huán)繞的效果，我利用了CSS背景圖像:使用這些背景圖像的目的是要更好地適應(yīng)CSS的布局，我們將這些圖像嵌入層的背景中?！ ≡谶@里你可以看見我是怎樣定義圖片的大小的(19px*37px)，而且在每個(gè)圖片的末端有相應(yīng)的背景圖像。然后將這兩幅圖片放置在預(yù)先確定好了的線性對象里邊。當(dāng)然很多這些原理都是可以重復(fù)使用的，因此你最后的CSS代碼不需要很大。這個(gè)方法的唯一缺點(diǎn)就是它不能用來調(diào)整動態(tài)的圖片的大小，如果你的
3、層比圖像小的話，它將被忽略，如果你的層比圖像大的話，它將反復(fù)被填進(jìn)空白區(qū)。但是你很有可能就是不希望圖像在運(yùn)作中的任何位置都能被覺察到?！ SS動態(tài)圖像技術(shù) 給CSS文本菜單賦予動態(tài)的技術(shù)，例如網(wǎng)頁的左側(cè)菜單，這種菜單現(xiàn)在被越來越多的人所喜愛。但是我不認(rèn)為我曾經(jīng)看見過這種技術(shù):一個(gè)純粹使用CSS來實(shí)現(xiàn)這一效果的技術(shù)。它讓菜單擁有圖像轉(zhuǎn)換功能，這里的問題就是我們用純CSS去實(shí)現(xiàn)這一效果。下面使用兩個(gè)步驟來世實(shí)現(xiàn)菜單的圖像變換技術(shù)。第一步僅僅變動背景顏色;第二步，就是精確的旋轉(zhuǎn)多維圖像。(警告:這門技術(shù)的缺點(diǎn)就是其中一些技術(shù)不能與Opera6一起使用，雖然他們在Ope
4、ra7中是一種很好的技術(shù)。) 變換背景圖像1 如果這是一幅透明的背景圖像，那我們就可以非常容易地使用選擇器改變其背景色。在本例中圖像被嵌入在HTML資源中，這就意味著在不支持CSS2標(biāo)準(zhǔn)的瀏覽器中它也會顯示(除了文本瀏覽器!).其代碼將比下面的例子復(fù)雜，但它能在我嘗試的所有瀏覽器中運(yùn)作。要注意的是在實(shí)現(xiàn)效果的過程中一次僅能下載一張圖像?！ ∽儞Q背景圖像2 這個(gè)版本相對版本1是非常簡單的。其圖像是CSS背景圖像，因此不支持CSS2標(biāo)準(zhǔn)的瀏覽器中不會顯示出來:但是我們提供了一個(gè)可選擇的文本鏈接，這是一個(gè)被淘汰了的例子?！ ⌒D(zhuǎn)按鈕1 現(xiàn)在針對不需要JS腳本語言進(jìn)
5、行支撐的旋轉(zhuǎn)圖像講述一些新的方法，第一種方法是使用背景圖,利用a:hover特性，當(dāng)指針指向圖像時(shí)改變背景圖,因此如果關(guān)閉了CSS的話圖像就不會顯示,同時(shí)我們還可以獲得可選擇的文本鏈接.該方法支持IE6,Netscape7,MozillaandOpera7,但不支持Opera6.第三類按鈕狀態(tài)可以通過相似方法:活躍選擇器來傳給圖像。讀者可以把這種方法當(dāng)作是練習(xí)做一做?！ ⌒D(zhuǎn)按鈕1a 這是個(gè)不同于按鈕1的按扭.我們再次使用一幅CSS背景圖,但是不是使用一個(gè)旋轉(zhuǎn)選擇來加載一幅新的圖像給按鈕的其它狀態(tài),我們使用CSS來改變現(xiàn)有圖像的位置.這樣使用如果圖像太大,則背景圖
6、像被修剪.因此我們的按鈕是單獨(dú)的圖像包含兩種按鈕狀態(tài).通常顯示上半部圖像,但是當(dāng)按鈕旋轉(zhuǎn)圖像則替換顯示下半部.因此這是完整的圖像.使用這種方法這里有兩種優(yōu)勢.首先,如果訪問按鈕時(shí)為了減少下載數(shù)據(jù)數(shù)量-僅下載一幅圖像帶替兩幅-因此這是更快的.其次,在第一次訪問時(shí)沒有延遲去等待下載第二幅圖像:它已經(jīng)在這了.不需預(yù)載復(fù)雜的圖像。不利方面就是如果按鈕不被訪問,則一些位帶寬被浪費(fèi)了,這些是在使用時(shí)的觀念,對按鈕1,HTML和CSS也是如此.主要的差異在:旋轉(zhuǎn)選擇。 結(jié)轉(zhuǎn)按鈕2 如下,另一途徑實(shí)現(xiàn)CSS旋轉(zhuǎn)圖像為使用圖像的Z索引特性,Z索引控制顯示哪個(gè)元素在最頂層.不幸的是
7、,它不支持IE6或Opera6.Opera7,Mozilla和Netscape7能工作,但是在這種情況下Mozilla是如此的慢,在CSS2瀏覽器旋轉(zhuǎn)不工作,僅頂層圖像顯示正常.在非CSS2瀏覽器頂層和旋轉(zhuǎn)圖像并排顯示,看起來是古怪的.InterExplorer的工作區(qū)包含一個(gè)小處理程序,如果圖像背景色改變了,則Z索引也改變,InterExplorer獲得變化進(jìn)行相關(guān)工作.菲利普通過改變?nèi)蹈淖冾伾?例如將#ffffff改為#fffffe)如此很小的改變效果都是顯著的。[這篇文章來自..，]
