中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
网站建设
中国福网
中国互联
艺魂宝库网
时代网
招聘求职
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> 网页设计中给光标添加CSS样式

网页设计中给光标添加CSS样式

来源:中国设计秀    作者:    点击:83     加入收藏
  CSS允许你控制网页外观和布局的各个方面——包括字体、页边空白和光标。不错,从CSS 2.1开始,你就可以方便地控制用户浏览网页时使用的光标。
 
  标准的CSS光标呈箭头状,一般来说,它都能满足一个网页或网站的需求,但有些时候你可能需要使用其它的光标。在这些情况下,CSS标准提供了众多选项。
 
  CSS光标类型下表概括说明了CSS标准中的一些光标类型。
 
  默认光标:使用标准的箭头。
 
  手状光标:光标呈手形,食指伸出。
 
  指针状光标:与手状光标相同。
 
  十字线光标:使用十字光标(一个加号)。
 
  移动光标:使用十字光标,每条线末端是一个箭头。这和Windows中移动窗口时使用的光标相同。
 
  文本光标:使用I形光标(大写字母I)。
 
  等待光标:光标呈沙漏状。
 
  帮助光标:使用问号光标。
 
  e-resize:标准将这个光标定义为一个指向东方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的水平线。
 
  w-resize:标准将这个光标定义为一个指向西方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的水平线。
 
  ne-resize:标准将这个光标定义为一个指向东北方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的对角线。
 
  nw-resize:标准将这个光标定义为一个指向西北方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的对角线。
 
  se-resize:标准将这个光标定义为一个指向东南方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的对角线。
 
  s-resize:标准将这个光标定义为一个指向南方或下方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的垂直线。
 
  sw-resize:标准将这个光标定义为一个指向西南方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的对角线。
 
  n-resize:标准将这个光标定义为一个指向北方或上方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的垂直线。
 
  进展光标:光标呈沙漏状。
 
  禁止光标:光标是一个里面带对角线的圆。
 
  不可拖动光标:光标呈手形,右边带禁止光标。
 
  垂直文本光标:光标呈水平I形。
 
  三角方向光标:光标为四个箭头,中间使用一个圆点。
 
  颜色调整光标:两条平行垂直线上画一条水平箭头,就像微软Excel中调整列大小的光标。
 
  行调整光标:两条平等水平线上画一条垂直箭头,就像微软Excel中调整行大小的光标。
 
  url(uri):这种光标允许你使用作为rui提交的外部文件中定义的定制光标。
 
  我们可以使用上表中的值,以及一个元素的光标属性。下面的一行代码说明如何使用一个HTML元素的style属性。
 
  style="cursor: hand;"和其它CSS属性一样,你可以为整个页面或页面中的单个元素定义一个光标。列表A中的HTML实例对各种页面元素使用一个不同的光标。
 
  <html><head> <title>Using the CSS cursor property</title> </head> <body style="cursor: all-scroll;"> <h1 style="cursor: hand;">Title of the page</h1> <h2 style="cursor: crosshair;">Subtitle</h2> <p style="cursor: move;">Some text goes here.</p> <a href="http://www.news.com/" mce_href="http://www.news.com/" style="cursor: wait;">Read the news</a> <br><br> <a href="http://www.techrepublic.com/" mce_href="http://www.techrepublic.com/" style="cursor: help;">TR</a> </body></html>这例子通过body元素的style属性给整个文档添加一个光标,但页面中的单个元素也有它们自己指定的光标,因此当用户浏览页面时,光标由页面光标(来自body元素)转变为单个元素的光标。列表B中的例子说明如何根据类或元素类型确定光标的式样。
0
顶一下
2007-09-27 08:55:00    出处:
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口