鼠标用DreamweaverMX创造网页鼠标样式.doc

用Dreamweaver MX创造网页鼠标样式>>edu.5151doc.教育资源库

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

启动DreamStyle 、 RedefineHTMLTag、 Us eC SS S elector 。 其中MakeCustomS tyle 是自定义样式 样式名以圆点开头UseCSSSelector是使用CSS选择器里边包含四个超链接样式a:ac tive/a:ho ver/a:link/a:v is ited Red efin eHT MLTag是定义HT ML系统标签的样式如a\body\br等等。假设我们只对该页面的超链接设置鼠标样式这里选择Redefin eHTMLTag选项中的a标签。下面的Define项选择T his Doc umentO n ly。单击O K按钮。

弹出 Styledefinitionfor对话框进入超链接样式设置。左边的C ategory是样式类别这里对其它项不作解释我们选择Extentions项。可以看到右边Vis ualEffec t中的Curs o r项这就是设置鼠标样式的关键项。单击右边的下拉菜单选择你所需要的鼠标样式单击OK按钮就可以了。

下面讲一下各样式的大致含义。hand是大家所熟悉的手型。c ro s s hair是十字型就是小乌龟首页所用的样式。text是平时鼠标移动到文本上的样式。o us e_s tyle">。其中tag是标签名mo us e_s tyle就是鼠标样式如hand/c ro s s hair/t ext/wa it等等。

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

<s p ans tyle="curso r:hand"> hand 是大家所熟悉的手型。</s p an><b r>

<s p ans tyle="c urso r:c ro s s hair">c ro s s hair是十字型就是小乌龟首页所用的样式。</s p an><b r>

<s p ans tyle="curso r:text">text是平时鼠标移动到文本上的样

式。</s p an><b r>

<s p ans tyle="c urso r:wa it">wa it  是 等 待 的 效 果 。</s p an><b r>

<spanstyle="cursor:default">default  是默认的那种效果。</s p an><b r>

<sp ans tyle="cursor:he lp">he lp  是带问号的鼠标样式。</s p an><b r>

<spanstyle="cursor:e-resize">e-resize  是向右的箭头。</s p an><b r>

<sp anstyle="cursor:ne-res ize">ne-res ize 是向右上方的箭头。</s p an><b r>

<spanstyle="cursor:n-resize">n-resize  是向上的箭头。</s p an><b r>

<sp anstyle="cursor:nw-res ize">nw-res ize是向左上方的箭头。</s p an><b r>

<sp anstyle="cursor:w-res ize">w-res ize  是向左的箭关。</s p an><b r&

12下一页[这篇文章来自..  ]gt;

<sp anstyle="cursor:sw-res ize">sw-res ize 是向左下的箭头。</s p an><b r>

<sp anstyle="cursor:s-res iz e">s-res ize  是向下的箭头。</s p an><b r>

<sp anstyle="cursor:s e-res ize">s e-res ize 是向右下方的箭头。</s p an><b r>

<s p ans tyle="c urso r:auto">auto  是系统自动的效果。</s p an>

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

感觉如何亲手去体验一下吧。希望小乌龟能带给你不一样的感觉 

上一页12[这篇文章来自. .  ]