网站首页 语言 会计 电脑 医学 资格证 职场 文艺体育 范文
当前位置:书香门第 > 范文 > 生活经验

如何在Dreamweaver中设置手形鼠标样式效果

栏目: 生活经验 / 发布于: / 人气:1.92W

1、按F7(或点击快速启动栏里那个象“八卦图”似的图标),调出CSS面板,选择“none”,再点击面板下部的编辑图标,在弹出的“Edit Style Sheet”对话框上按“New”按钮,在弹出的“New Style”对话框中选择“Make Custom Style (class)”后,在下面的“Name”输入框中输入“or1”(也就是给要定义的class取个名字,注意前面那个小点不要漏了),按OK,立即弹出“Style Definition for or1”对话框,这时就可定义CSS的“or1”了。

如何在Dreamweaver中设置手形鼠标样式效果

2、在“Style Definition for or1”对话框左边的选择窗口中选择“Extensions”,在右边的面板上定义(也是选择)“Cursor”属性,本例是要求鼠标的'形状变为手形,所以点击那个三角形按钮,在拉出的鼠标样式列表中选择“hand”。

3、按OK按钮返回“Edit Style Sheet”对话框,按“Done”按钮,CSS就做好了。在网页源代码的〈head〉 与〈/head〉之间见到的CSS代码是这样的:

〈styletype="text/CSS"〉

〈!--

or1{cursor:hand}

--〉

〈/style〉

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

4、选择一段文本或图象,点一下CSS面板上的“or1”就行了。按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",用时选择加载。