用慣了windows的人對各種各樣的鼠標(biāo)樣式一定不會陌生。當(dāng)鼠標(biāo)移動到不同的地方時,當(dāng)鼠標(biāo)執(zhí)行不同的功能時,當(dāng)系統(tǒng)處于不同的狀態(tài)時,都會使鼠標(biāo)的形狀發(fā)生變化。而在網(wǎng)頁上往往只有當(dāng)鼠標(biāo)在超級鏈接上時才出現(xiàn)一個手形,在其它地方似乎沒有什么變化,同充滿動感的網(wǎng)頁顯得不怎么和諧。實(shí)際上,用css可以方便地定義許多種鼠標(biāo)形狀。用本文介紹的方法,可以在網(wǎng)頁的作何地方設(shè)置鼠標(biāo)的不同樣式。
在dreamweaver中設(shè)置手形鼠標(biāo)樣式效果的制作步驟:
1、按f7(或點(diǎn)擊快速啟動欄里那個象“八卦圖”似的圖標(biāo)),調(diào)出css面板,選擇“none”,再點(diǎn)擊面板下部的編輯圖標(biāo),在彈出的“edit style sheet”對話框上按“new”按鈕,在彈出的“new style”對話框中選擇“make custom style (class)”后,在下面的“name”輸入框中輸入“.cursor1”(也就是給要定義的class取個名字,注意前面那個小點(diǎn)不要漏了),按ok,立即彈出“style definition for .cursor1”對話框,這時就可定義css的“.cursor1”了。
2、在“style definition for .cursor1”對話框左邊的選擇窗口中選擇“extensions”,在右邊的面板上定義(也是選擇)“cursor”屬性,本例是要求鼠標(biāo)的形狀變?yōu)槭中危渣c(diǎn)擊那個三角形按鈕,在拉出的鼠標(biāo)樣式列表中選擇“hand”。
3、按ok按鈕返回“edit style sheet”對話框,按“done”按鈕,css就做好了。在網(wǎng)頁源代碼的〈head〉 與〈/head〉之間見到的css代碼是這樣的:
| 〈style type="text/css"〉 〈!-- .cursor1 { cursor: hand} --〉 〈/style〉 |
4、選擇一段文本或圖象,點(diǎn)一下css面板上的“.cursor1”就行了。按f12,把鼠標(biāo)移到那段加載了改變鼠標(biāo)樣式css的地方,鼠標(biāo)就會變?yōu)槭中巍τ诓皇鞘褂胐reamweaver的網(wǎng)友,需把class="cursor"加到網(wǎng)頁的源代碼中去才行。
若要把鼠標(biāo)改變成其它形狀,只要在第二步中定義“cursor”屬性時選擇不同的樣式就行了。各屬性值的含義如下:
crosshair:精確定位“十”字形; text:文本“i”形; wait:等待,“沙漏”形;default:默認(rèn)指針; help:幫助,帶尾箭頭; e-resize:箭頭朝右方; ne-resize:箭頭朝右上方; n-resize:箭頭朝上方; nw-resize:箭頭朝左上方; w-resize:箭頭朝左方; sw-resize:箭頭朝左下方; s-resize:箭頭朝下方; se-resize箭頭朝右下方; auto:自動,鼠標(biāo)按照默認(rèn)的狀態(tài)根據(jù)頁面上的元素自行改變樣式。
了解了上述屬性值的含義,鼠標(biāo)的形狀就在你的掌握之中了,需要讓鼠標(biāo)在那里變?yōu)槭裁葱螤睿灰貜?fù)上面的操作就行了。要注意的是:一次只能定義一種鼠標(biāo)樣式,若在一個頁面上使用多種樣式的鼠標(biāo)圖形,要定義多個“class",用時選擇加載。
新聞熱點(diǎn)
疑難解答
圖片精選