网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

作者： 北京网站建设   日期：2008-03-27 06:14:05  来源： http://www.qitongnet.com

网站设计

经常在网上冲浪的朋友是否曾注意到有些网站的鼠标不是规则的斜向上箭头的形状，而是十字形，或者是向左的箭头，或者是个问号等等。当你想在网页的不同位置让鼠标显示不同形状，以体现不同的功能区;当你想让你的网站体现与众不同的风格时，考虑一下在鼠标样式上下功夫吧。其实鼠标样式的用途还是极为广泛的，那么怎样才能实现鼠标的不同样式呢？ 中国站长_站,为中文网站提供动力

启动Dreamweaver，打开你要应用鼠标样式的网页，在主窗口中选择Text下拉菜单，再选择CSS Style子菜单中的New Style命令新建样式表。(注 北京网站建设:如果你的网页中已经存在样式表，可以选择 北京网站制作CSS Styles Edit Style Sheet编辑样式表。) 此时弹出New Style对话框。其中Type项有三个单选按钮:Make Custom Style、Redefine HTML Tag、Use CSS Selector。其中Make Custom Style 是自定义样式，样式名以圆点开头 北京网站设计;Use CSS Selector是使用CSS选择器，里边包含四个超链接样式a:active/a:hover/a:link/a:visited;Redefine HTML Tag是定义HTML系统标签的样式，如abodybr等等。

Www@Chinaz@com

假设我们只对该页面的超链接设置鼠标样式，这里选择Redefine HTML Tag选项中的a标签。下面的Define项选择This Document Only。单击OK按钮。 弹出Style definition for 网站建设对话框，进入超链接样式设置。左边的Category是样式类别，这里对其它项不作解释，我们选择Extentions项。可以看到右边Visual Effect中的Cursor项，这就是设置鼠标样式的关键项。单击右边的下拉菜单，选择你所需要的鼠标样式，单击OK按钮就可以了。 网站制作 下面讲一下各样式的大致含义。

中国站长_站,为中文网站提供动力

hand:是大家所熟悉的手型。 Chinaz

crosshair:是十字型，就是小乌龟首页所用的样式。

text:是平时鼠标移动到文本上的样式。

中.国.站长站

wait:是等待的效果。 中国站长.站

default:是默认的那种效果。

help:是带问号的鼠标样式。 Chinaz@com

e-resize:是向右的箭头。 中.国站长站

ne-resize:是向右上方的箭头。

Chinaz_com

n-resize:是向上的箭头。

中国站.长.站

nw-resize:是向左上方的箭头。 Www~Chinaz~com

w-resize:是向左的箭关。

sw-resize:是向左下的箭头。 中国.站.长站

s-resize:是向下的箭头。 Www_Chinaz_com

se-resize:是向右下方的箭头。 站.长.站

auto:是系统自动的效果。 Chinaz~com

网站设计当然根据需要你也可以将样式应用于其它标签，或者单纯的只应用于某一段文本。如果读者对CSS代码不陌生的话，或许直接手写代码更方便。特别是，如果你想在不同的位置运用不同的鼠标样式，或者不同的标签使用不同的鼠标样式。直接将样式写在某个具体的标签里边就可以了。 中.国站长站

方法是：< tag style=cursor:mouse_style>。其中tag是标签名，mouse_style就是鼠标样式，如hand/crosshair/text/wait等等。 中国站长.站

下面举个具体的实例以加深大家对鼠标样式设置的理解。

<span style=cursor:hand>　hand:是大家所熟悉的手型。 网页设计< /span> Www^Chinaz^com

< span style=cursor:crosshair>crosshair:是十字型，就是小乌龟首页所用的样式。< /span> 站长.站

< span style=cursor:text>text:是平时鼠标移动到文本上的样式。< /span>

中国站长_站,为中文网站提供动力

< span style=cursor:wait>wait:是等待的效果。< /span> 中国站长.站

< span style=cursor:default>default:是默认的那种效果。< /span>

Chinaz

< span style=cursor:help>help:是带问号的鼠标样式。< /span>

< span style=cursor:e-resize>e-resize:是向右的箭头。< /span>

中国站长.站

< span style=cursor:ne-resize>ne-resize:是向右上方的箭头。< /span>

< span style=cursor:n-resize>n-resize:是向上的箭头。< /span>

< span style=cursor:nw-resize>nw-resize:是向左上方的箭头。< /span>

Chinaz@com

< span style=cursor:w-resize>w-resize:是向左的箭关。< /span>

< span style=cursor:sw-resize>sw-resize:是向左下的箭头。< /span> Www@Chinaz@com

< span style=cursor:s-resize>s-resize:是向下的箭头。< /span>

< span style=cursor:se-resize>se-resize:是向右下方的箭头。< /span>

Chinaz^com

< span style=cursor:auto>auto:是系统自动的效果。< /span> 中国站.长.站 企通互联

将上面这段代码拷到你的网页中，按F12预览。将你的鼠标移到相应的文本上方，看看鼠标有什么变化?是不是以相应的样式显现了？

Chinaz~com

网页设计
北京网站制作

字体：【大】【中】【小】

这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75!