妙运用CSS样式表立刻改变鼠标的样式_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

妙运用CSS样式表立刻改变鼠标的样式

作者：闵涛文章来源：闵涛的学习笔记点击数：689 更新时间：2009/4/23 13:49:26

用惯了Windows的人对各种各样的鼠标样式一定不会陌生。当鼠标移动到不同的地方时，当鼠标执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形，在其它地方似乎没有什么变化。这同充满动感的网页显得不怎么和谐。实际上，用CSS可以方便地定义许多种鼠标形状。用本文介绍的方法，可以在网页的作何地方设置鼠标的不同样式。
　　在Dreamweaver3中设置手形鼠标样式效果的制作步骤：
　　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〉
　　对于不是使用Dreamweaver3的网友，直接把上述代码复制在〈head〉与〈/head〉之间，产生的效果相同。
　　4、选择一段文本或图象，点一下CSS面板上的“.cursor1”就行了。按F12，把鼠标移到那段加载了改变鼠标样式CSS的地方，鼠标就会变为手形。对于不是使用Dreamweaver3的网友，需把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样式表立刻改变鼠标的样式

教程录入：mintao 责任编辑：mintao

上一篇教程： CSS轻松实现色块标题标识

下一篇教程：网页文字竖排样式表（CSS）法

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

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

鄂公网安备 42011102001154号

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

闵涛站盟:医药大全-武穴网。A打造B、C、D……