转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
使用CSS样式改变网页鼠标的指针样式         ★★★★

使用CSS样式改变网页鼠标的指针样式

作者:闵涛 文章来源:闵涛的学习笔记 点击数:1029 更新时间:2009/6/9 2:32:06
        用惯了Windows的人对各种各样的鼠标样式一定不会陌生。当鼠标移动到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形,在其它地方似乎没有什么变化,同充满动感的网页显得不怎么和谐。实际上,用CSS可以方便地定义许多种鼠标形状。用本文介绍的方法,可以在网页的作何地方设置鼠标的不同样式。

  在Dreamweaver中设置手形鼠标样式效果的制作步骤:

  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代码是这样的:

以下是引用片段:
〈styletype="text/CSS"〉 
〈!-- 
.cursor1{cursor:hand} 
--〉 
〈/style>

    对于不是使用Dreamweaver的网友,直接把上述代码复制在〈head〉与〈/head〉之间,产生的效果相同。

  4、选择一段文本或图象,点一下CSS面板上的“.cursor1”就行了。按F12,把鼠标移到那段加载了改变鼠标样式CSS的地方,鼠标就会变为手形。对于不是使用Dreamweaver的网友,需把class="cursor"加到网页的源代码中去才行。

  若要把鼠标改变成其它形状,只要在第二步中定义“cursor”属性时选择不同的样式就行了。各属性值的含义如下:
  
   以下为鼠标指针样式的属性:

  crosshair:精确定位“十”字形;
   text:文本“I”形;
   wait:等待,“沙漏”形;
   default:默认指针; 
   help:帮助,带尾箭头;
   e-resize:箭头朝右方;
   ne-resize:箭头朝右上方;
   n-resize:箭头朝上方;
   nw-resize:箭头朝左上方;
   w-resize:箭头朝左方;
   sw-resize:箭头朝左下方;
   s-resize:箭头朝下方;
   se-resize箭头朝右下方;
   auto:自动,鼠标按照默认的状态根据页面上的元素自行改变样式。

  了解了以上的属性值含义之后,鼠标的形状就在你的掌握之中了,需要让鼠标在那里变为什么形状,只要重复上面的操作就行了。要注意的是:一次只能定义一种鼠标样式,若在一个页面上使用多种样式的鼠标图形,要定义多个“class",用时选择加载。


[C语言系列]使用C#实现ADSL自动拨号  [Web开发]狂人采集器规则使用详解
[电脑技术]windows7快捷键使用大全  [办公软件]PowerPoint模板使用经验之谈
[办公软件]如何在PowerPoint中使用(插入)Media Player控件播…  [办公软件]如何在PowerPoint中使用(插入、创建)书签及书签的…
[办公软件]如何在PowerPoint中插入(使用)条形码  [办公软件]Office(Word,Excel)密码破解软件(Office Password…
[办公软件]如何在PowerPoint中制作模板并使用模板  [办公软件]使用PowerPoint制作电子相册教程
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台