提交酷站 !!
登陆
注册
首页
酷站
设计
代码
素材
美图
论坛
您的位置:
首页
-
代码
-
CSS教程
- 正文
如何用CSS自定义鼠标显示的形状?
作者:未知 文章来源:互联网 发布时间:2007-01-03 21:30:20
我们在网页设计的时候,为了达到个性效果,需要将系统默认的鼠标形状改变掉,自宝义鼠标显示的形状,我们以前可以用javascript来实现。现在我们完全可以用css来实现这一个性效果了。
CSS有一个属性:cursor,其作用是设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。更多关于cursor请参考这里。
我们看下面的实例,更好的理解如何用CSS自定义鼠标显示的形状。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.resday.com</title> <style type="text/css"> <!-- span {display:block;line-height:30px;margin:5px 0;background:#f0f0f0;text-align:center;} --> </style> </head> <body> <span style="cursor:hand;">hand 手型</span> <span style="cursor:crosshair;">crosshair 十字</span> <span style="cursor:text;">text 文本</span> <span style="cursor:wait;">wait 等待</span> <span style="cursor:help;">help 问号</span> <span style="cursor:e-resize;">e-resize 右的箭头</span> <span style="cursor:ne-resize;">ne-resize 右上的箭头</span> <span style="cursor:n-resize;">n-resize 上的箭头</span> <span style="cursor:nw-resize;">nw-resize 左上的箭头</span> <span style="cursor:w-resize;">w-resize 左的箭头</span> <span style="cursor:sw-resize;">sw-resize 左下的箭头</span> <span style="cursor:s-resize;">s-resize 下的箭头</span> <span style="cursor:se-resize;">se-resize 右下的箭头</span> <span style="cursor:move;">move 移动</span> </body> </html>
提示:您可以先修改部分代码再运行
Web标准
CSS教程
XHtml教程
CSS布局实例
热门文章
为何要遗弃HTML,执...
为什么要Web标准化,...
如何将链接的下划线...
有人说div+CSS网页布...
三列式网页布局如何...
CSS标识当前位置页效...
HTML4.0与XHTML1.0真正的...
Div+CSS网页布局:用cl...
border与list缩写的时...
网页中可以竖写文字...
最新文章
DIV CSS网页布局:HTML...
DIV CSS网页布局:实...
DIV CSS网页布局:最...
DIV CSS网页布局常用...
DIV CSS网页布局:三...
DIV CSS网页布局:用CS...
左中右3栏布局中最...
CSS floats来创建三栏...
页脚最小高度100%保...
解决列高度自适应的...