CSS CURSOR属性
2013-12-05 16:14 很大很老实 阅读(462) 评论(0) 编辑 收藏 举报cursor -- 定义鼠标样式
- 取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit
- [<uri> ,]*: 根据用户定义的资源显示
- auto: 正常鼠标
- crosshair: 十字鼠标
- default: 默认鼠标
- pointer: 点状鼠标
- move: 移动鼠标
- e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize: 改变大小鼠标
- text: 文字鼠标
- wait: 等待鼠标
- help: 求助鼠标
- progress: 过程鼠标
- inherit: 继承
- 引用网址:http://www.dreamdu.com/css/property_cursor/
- 初始值: auto
- 继承性: 是
- 适用于: 所有元素
- cursor: 中文"鼠标"的意思.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS cursor 属性示例 -- </title><script type="text/javascript" src="/js.js"></script> <style type="text/css" media="all"> p#auto { cursor: auto; } p#crosshair { cursor: crosshair; } p#default { cursor: default; } p#pointer { cursor: pointer; } p#move { cursor: move; } p#e-resize { cursor: e-resize; } p#ne-resize { cursor: ne-resize; } p#nw-resize { cursor: nw-resize; } p#n-resize { cursor: n-resize; } p#se-resize { cursor: se-resize; } p#sw-resize { cursor: sw-resize; } p#s-resize { cursor: s-resize; } p#w-resize { cursor: w-resize; } p#text { cursor: text; } p#wait { cursor: wait; } p#help { cursor: help; } p#progress { cursor: progress; } p { border: 1px solid black; background: lightblue; } </style> </head> <body> <p>梦之都 <a href="http://www.dreamdu.com/css/">CSS教程</a>,<strong><a href="http://www.dreamdu.com/css/property_cursor/">cursor</a></strong>示例.把鼠标移动到每个蓝色方框上,看看效果.</p> <p id="auto">梦之都 XHTML 教程,auto正常鼠标</p> <p id="crosshair">梦之都 CSS 教程,crosshair十字鼠标</p> <p id="default">梦之都 XHTML 教程,default默认鼠标</p> <p id="pointer">梦之都 CSS 教程,pointer鼠标</p> <p id="move">梦之都 XHTML 教程,move移动鼠标</p> <p id="e-resize">梦之都 CSS 教程,e-resize鼠标</p> <p id="ne-resize">梦之都 XHTML 教程,ne-resize鼠标</p> <p id="nw-resize">梦之都 CSS 教程,nw-resize鼠标</p> <p id="n-resize">梦之都 XHTML 教程,n-resize鼠标</p> <p id="se-resize">梦之都 CSS 教程,se-resize鼠标</p> <p id="sw-resize">梦之都 XHTML 教程,sw-resize鼠标</p> <p id="s-resize">梦之都 CSS 教程,s-resize鼠标</p> <p id="w-resize">梦之都 XHTML 教程,w-resize鼠标</p> <p id="text">梦之都 CSS 教程,text文字鼠标</p> <p id="wait">梦之都 XHTML 教程,wait等待鼠标</p> <p id="help">梦之都 CSS 教程,help求助鼠标</p> <p id="progress">梦之都 XHTML 教程,progress过程鼠标</p><div style="margin-top:5em"><form method="post" action="#"><input type="button" name="dreamduinput" id="dreamduinput" style="border-width: 1px;color: #fff;background-color: #4289cb;" value="----上面的内容就对应着下面的代码,修改代码,并点我,查看一下效果吧!----" onClick="RunCode(dreamdutest)"><br /><textarea name="dreamdutest" id="dreamdutest" rows="20" cols="120"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS cursor 属性示例</title> <style type="text/css" media="all"> p#auto { cursor: auto; } p#crosshair { cursor: crosshair; } p#default { cursor: default; } p#pointer { cursor: pointer; } p#move { cursor: move; } p#e-resize { cursor: e-resize; } p#ne-resize { cursor: ne-resize; } p#nw-resize { cursor: nw-resize; } p#n-resize { cursor: n-resize; } p#se-resize { cursor: se-resize; } p#sw-resize { cursor: sw-resize; } p#s-resize { cursor: s-resize; } p#w-resize { cursor: w-resize; } p#text { cursor: text; } p#wait { cursor: wait; } p#help { cursor: help; } p#progress { cursor: progress; } p { border: 1px solid black; background: lightblue; } </style> </head> <body> <p id="auto">梦之都 XHTML 教程,auto正常鼠标</p> <p id="crosshair">梦之都 CSS 教程,crosshair十字鼠标</p> <p id="default">梦之都 XHTML 教程,default默认鼠标</p> <p id="pointer">梦之都 CSS 教程,pointer鼠标</p> <p id="move">梦之都 XHTML 教程,move移动鼠标</p> <p id="e-resize">梦之都 CSS 教程,e-resize鼠标</p> <p id="ne-resize">梦之都 XHTML 教程,ne-resize鼠标</p> <p id="nw-resize">梦之都 CSS 教程,nw-resize鼠标</p> <p id="n-resize">梦之都 XHTML 教程,n-resize鼠标</p> <p id="se-resize">梦之都 CSS 教程,se-resize鼠标</p> <p id="sw-resize">梦之都 XHTML 教程,sw-resize鼠标</p> <p id="s-resize">梦之都 CSS 教程,s-resize鼠标</p> <p id="w-resize">梦之都 XHTML 教程,w-resize鼠标</p> <p id="text">梦之都 CSS 教程,text文字鼠标</p> <p id="wait">梦之都 XHTML 教程,wait等待鼠标</p> <p id="help">梦之都 CSS 教程,help求助鼠标</p> <p id="progress">梦之都 XHTML 教程,progress过程鼠标</p> </body> </html></textarea></form></div><blockquote> <script src="/inc/v1_topad.js" type="text/javascript"></script> <br /> <script type="text/javascript"><!-- google_ad_client = "pub-1380153598658129"; /* 728x90, 创建于 08-11-8 */ google_ad_slot = "9243519556"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> </blockquote> <script type="text/javascript" id="bdshare_js" data="type=slide&img=0&uid=797516" ></script><script type="text/javascript" id="bdshell_js"></script><script type="text/javascript">document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();</script><!-- Baidu Button END --><script type="text/javascript">var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-556982-2']);_gaq.push(['_trackPageview']);(function(){var ga = document.createElement('script');ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga, s);})();</script><script type="text/javascript">var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F0b5059fb2e0522719e25d555c50c97ac' type='text/javascript'%3E%3C/script%3E"));</script> </body> </html>
