當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

css控制鼠標指針

css控制鼠標指針

更新時間:2023-06-11 文章作者:未知 信息來源:網絡 閱讀次數:

網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。

【實例介紹】

css控制鼠標指針

在許多網站上我們可以看到很有個性的鼠標指針(cursor),在網頁設計中用css可以方便地實現這樣個性鼠標指針的效果,該CSS屬性就是cursor屬性。一般而言,鼠標以斜向上的箭頭顯示,移到文本上時變為有頭的豎線,移到超級鏈接上變為手形。但用CSS可以控制鼠標的顯示效果,例如可使鼠標移到普通文本上時也顯示成手形。
下面為cursor屬性說明。

-----------------------------------------------------------------------------------------
值                        功能說明       
-----------------------------------------------------------------------------------------       
url                       需使用的自定義光標的URL    
 n-resize            此光標指示矩形框的邊緣可被向上移動
default                默認光標(通常是一個箭頭)    
se-resize           此光標指示矩形框的邊緣可被向下及向右移動
auto                    默認。瀏覽器設置的光標    
sw-rcsize           此光標指示矩形框的邊緣可被向下及向左移象
crosshair           光標呈現為十字線    
s-resize              此光標指示矩形框的邊緣可被向下移動
pointer                光標呈現為指示鏈接的指針(一只手)   
w-resizc              此光標指示矩形框的邊緣可被向左移動
move                   此光標指示某對象可被移動    
wait                      此光標指示程序正忙(通常是一只表或沙漏)
e-resize               此光標指示矩形框的邊緣可被向右移動    
help                      此光標指示可用的幫助(通常是一個問號或一個一
ne-resize             此光標指示矩形框的邊緣可被向上及向右移動
text                        此光標指示文本
nw-resize            此光標指示矩形框的邊緣可被向上及向左移動。
-----------------------------------------------------------------------------------------

【實例代碼】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> .cursor1{cursor:hand}  </style> </head> <body class="cursor1"> 顯示你個性的鼠標指針 </body> </html>

【代碼分析】

在代碼中,加粗代碼是將鼠標設置為手形,如圖所示。

控制鼠標指針
 

【素材及源碼下載】

請點擊:css控制鼠標指針 下載本實例相關素材及源碼

 


網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

亚洲嫩草影院久久精品