<b>用Dreamweaver MX创造网页鼠标款式</b>[DW设计]
本文“<b>用Dreamweaver MX创造网页鼠标款式</b>[DW设计]”是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具体内容:
常常在网上冲浪的朋友能否曾注意到有些的鼠标不是法则的斜向上箭头的形状,而是十字形,大概是向左的箭头,大概是个问号等等.当你想在的差别位置让鼠标显示差别形状,以表现差别的功效区;当你想让你的表现与众差别的时,考虑一下在鼠标款式上下工夫吧.其实鼠标款式的用处还是极其遍及的,那么怎样才能实现鼠标的差别款式呢? 启动,翻开你要利用鼠标款式的,在主窗口中挑选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等等.假定我们只对该页面的超链接设置鼠标款式,这里挑选Redefine HTML Tag选项中的a标签.下面的Define项挑选This Document Only.单击OK按钮. 弹出Style definition for 对话框,进入超链接款式设置.左边的Category是款式类别,这里对别的项不作注释,我们挑选Extentions项.可以看到右边Visual Effect中的Cursor项,这就是设置鼠标款式的关键项.单击右边的下拉菜单,挑选你所需求的鼠标款式,单击OK按钮便可以了. 下面讲一下各款式的大致含义.
hand:是大家所熟习的手型.
crosshair:是十字型,就是小乌龟首页所用的款式.
text:是平常鼠标移动到文本上的款式.
wait:是等候的效果.
default:是默许的那种效果.
help:是带问号的鼠标款式.
e-resize:是向右的箭头.
ne-resize:是向右上方的箭头.
n-resize:是向上的箭头.
nw-resize:是向左上方的箭头.
w-resize:是向左的箭关.
sw-resize:是向左下的箭头.
s-resize:是向下的箭头.
se-resize:是向右下方的箭头.
auto:是系统自动的效果.
当然按照需求你也可以将款式利用于别的标签,大概纯真的只利用于某一段文本.假如读者对CSS代码不陌生的话,大概直接办写代码更便利.分外是,假如你想在差别的位置应用差别的鼠标款式,大概差别的标签利用差别的鼠标款式.直接将款式写在某个具体的标签里边便可以了.
办法是:< tag style=cursor:mouse_style>.此中tag是标签名,mouse_style就是鼠标款式,如hand/crosshair/text/wait等等.
下面举个具体的实例以加深大家对鼠标款式设置的理解.
<span style=cursor:hand> hand:是大家所熟习的手型.< /span>
< span style=cursor:crosshair>crosshair:是十字型,就是小乌龟首页所用的款式.< /span>
< span style=cursor:text>text:是平常鼠标移动到文本上的款式.< /span>
< span style=cursor:wait>wait:是等候的效果.< /span>
< span style=cursor:default>default:是默许的那种效果.< /span>
< 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>
< span style=cursor:w-resize>w-resize:是向左的箭关.< /span>
< span style=cursor:sw-resize>sw-resize:是向左下的箭头.< /span>
< span style=cursor:s-resize>s-resize:是向下的箭头.< /span>
< span style=cursor:se-resize>se-resize:是向右下方的箭头.< /span>
< span style=cursor:auto>auto:是系统自动的效果.< /span>
将上面这段代码拷到你的中,按F12预览.将你的鼠标移到呼应的文本上方,看看鼠标有什么改变?是不是以呼应的款式显现了?
以上是“<b>用Dreamweaver MX创造网页鼠标款式</b>[DW设计]”的内容,如果你对以上该文章内容感兴趣,你可以看看七道奇为您推荐以下文章:
本文地址: | 与您的QQ/BBS好友分享! |