做有价值的网站,助力企业发展!

专注于企业网站建设、营销型网站建设、Web/微网站建设、企业营销推广

百度地图|网站地图|RSS地图

服务热线:

133-8386-7325

当前位置:郑州伟之琦计算机科技 > 新闻中心 >> 建站相关 >>

教你用CSS改变网页设计中鼠标样式


大多数经常上网的人对Windows各种鼠标样式一定不陌生,而在网页设计中往往只有超链接才会出现一个手形,在其它地方似乎没什么变化,这和网页上充满动感的设计显得不太和谐,实际上,用CSS可以方便地定义许多鼠标形状。郑州网页设计公司伟之琦教你根据以下步骤,可以在网页的任何地方设置鼠标的不同样式。 

CSS改变网页设计中鼠标样式步骤一、调出CSS面板

按F7调出CSS面板,选择“none”,再点击面板下部的编辑图示,在弹出的“Edit Style Sheet”对话方块上按“New”按钮,在弹出的“New Style”对话方块中选择“Make Custom Style (class)”后,在下面的“Name”输入框中输入“.cursor1”(也就是给要定义的class取个名字,注意前面那个小点不要漏了),按OK,立即弹出“Style Definition for .cursor1”对话方块,这时就可定义CSS的“.cursor1”了。 

CSS改变网页设计中鼠标样式步骤二、设置“Cursor”属性

在“Style Definition for .cursor1”对话方块左边的选择视窗中选择“Extensions”,在右边的面板上定义(也是选择)“Cursor”属性,本例是要求鼠标的形状变为手形,所以点击那个三角形按钮,在拉出的鼠标样式清单中选择“hand”即可。 

CSS改变网页设计中鼠标样式步骤三、按“Done”按钮制作完成

按OK按钮返回“Edit Style Sheet”对话方块,按“Done”按钮,CSS就做好了。在网页原始程式码的〈head〉 与〈/head〉之间见到的CSS代码是这样的:
〈style type="text/css"〉
〈!--
.cursor1 { cursor: hand}
--〉
〈/style〉
对于不是使用Dreamweaver的,直接把上述代码复制在〈head〉与〈/head〉之间,产生的效果相同。 

CSS改变网页设计中鼠标样式步骤四、如何使用?

选择一段文本或图像,点一下CSS面板上的“.cursor1”就行了。按F12,把鼠标移到那段载入了改变鼠标样式CSS的地方,鼠标就会变为手形。对于不是使用Dreamweaver的,需把class="cursor"加到网页的原始程序代码中才行。

CSS改变网页设计中鼠标样式的各属性值的含义

若要把鼠标改变成其它形状,只要在第二步中定义“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",使用时选择载入才行。


原创声明:本站文章未经许可请勿擅自转载,如需转载请注明出处<郑州网络公司>

案例展示