设为首页 | 收藏本站
首页>IT学院>网页设计>正文
巧妙运用CSS立刻改变鼠标的样式
WWW.DBIT.CN 2007-12-6 8:51:59 热度:
 
  用惯了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代码是这样的:


〈style type="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",用时选择加载。

 
上一篇:没有了
下一篇:CSS实现网页中的隔行换色代码
打印】【关闭
  相关文章:
·CSS实现网页中的隔行换色代码·用CSS解决各款浏览器下兼容性问题
·用CSS样式表隐藏文字的挺方法·14个常见的CSS技巧及常见问题
·CSS的学习应该注意学习方法·CSS技术在网页设计中的运用
·CSS在ASP.NET中失效的原因及解决 ·CSS特点及加入网页的四种方法
·关于CSS你只需知道的十件事·DreamWeaver中应用CSS样式表
·网页制作:CSS的常用技巧放送·动态CSS,换肤技术
·使用图片和CSS结合制作动画按钮·CSS中display 与visibility 的区别
·XHTML+CSS布局之XHTML应用小结·CSS超级技巧大放送合集
☆联姻学院☆

驱逐令人抓狂的“蓝屏使者”
Windows XP回收站无法清空解决
Sxs.exe病毒完全清理的方法
U盘病毒HDM.exe的分析手段解决
Excel使用中常被忽略的十条实
Excel行列转置粘贴数据的一则
将常用文件夹变为盘符
撤消Windows XP自带的无用功能
平面设计中的常用字库种类说明
Photoshop cs2在Vista下的尴尬
巧妙运用CSS立刻改变鼠标的样
CSS实现网页中的隔行换色代码
ASP.NET常用的三十三种实用代
编程中获取天气预报的源代码
Linux服务器远程控制技术及实
VMware虚拟机下实现NAT方式上

精品图秀
美女面相大盘点
清新孙俪纯情写真
刘羽琦最新写真
中国高校不宜过分扩招 数码相机配件选购误区 爱国者MP5-E898入驻三 尼康广角相机上市 东软电脑城店庆日