振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
CSS 語法教學 - 改變網頁滑鼠的樣式
作者 Sunming   
2011/01/07

一般人對Windows各種滑鼠樣式一定不陌生。而在網頁上往往只有超連結上才出現一個手形,在其它地方似乎沒什麼變化。這和網頁上充滿動感的設計顯得不怎麼和諧。

瞭解了下方屬性值的含義,滑鼠的形狀就在你的掌握之中了,需要讓滑鼠在那裡變為什麼形狀,只要重複上面的操作就行了。

要注意的是:一次只能定義一種滑鼠樣式,若在一個頁面上使用多種樣式的滑鼠圖形,要定義多個“class",用時選擇載入。

在Dreamweaver中設置手形滑鼠樣式效果的製作步驟:

各屬性值的含義如下:
crosshair:精確定位“十”字形; text:文本“I”形; wait:等待,“沙漏”形;default:默認指針; help:幫助,帶尾箭頭; e-resize:箭頭朝右方; ne-resize:箭頭朝右上方; n-resize:箭頭朝上方; nw-resize:箭頭朝左上方; w-resize:箭頭朝左方; sw-resize:箭頭朝左下方; s-resize:箭頭朝下方; se-resize箭頭朝右下方; auto:自動,滑鼠按照預設的狀態根據頁面上的元素自行改變樣式。

1、按F7調出CSS面板,選擇“none”,再點擊面板下部的編輯圖示,在彈出的“Edit Style Sheet”對話方塊上按“New”按鈕,在彈出的“New Style”對話方塊中選擇“Make Custom Style (class)”後,在下面的“Name”輸入框中輸入“.cursor1”(也就是給要定義的class取個名字,注意前面那個小點不要漏了),按OK,立即彈出“Style Definition for .cursor1”對話方塊(如下圖所示),這時就可定義CSS的“.cursor1”了。

2、在“Style Definition for .cursor1”對話方塊左邊的選擇視窗中選擇“Extensions”,在右邊的面板上定義(也是選擇)“Cursor”屬性,本例是要求滑鼠的形狀變為手形,所以點擊那個三角形按鈕,在拉出的滑鼠樣式清單中選擇“hand”,如上圖所示。

3、按OK按鈕返回“Edit Style Sheet”對話方塊,按“Done”按鈕,CSS就做好了。在網頁原始程式碼的〈head〉 與〈/head〉之間見到的CSS代碼是這樣的:
〈style type="text/css"〉
〈!--
.cursor1 { cursor: hand}
--〉
〈/style〉
對於不是使用Dreamweaver的網友,直接把上述代碼複製在〈head〉與〈/head〉之間,產生的效果相同。

4、選擇一段文本或圖像,點一下CSS面板上的“.cursor1”就行了。按F12,把滑鼠移到那段載入了改變滑鼠樣式CSS的地方,滑鼠就會變為手形。對於不是使用Dreamweaver的網友,需把class="cursor"加到網頁的原始程式碼中去才行。

實際上,用CSS可以方便地定義許多種滑鼠形狀。用本文介紹的方法,可以在網頁的任何地方設置滑鼠的不同樣式。若要把滑鼠改變成其它形狀,只要在第二步中定義“cursor”屬性時選擇不同的樣式就行了。

最後更新 ( 2011/01/07 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇