我们提供安徽网站维护服务,以实惠、方便、快捷著称!一次服务,终身朋友! ·付款帐号 ·联系我们
安徽网站维护
网站维护热线: 网站维护咨询热线 网站维护:
网站建设: 网站建设
首页
维护介绍
维护套餐
案例分享
维护申请
维护反馈
维护知识
行业动态
联系我们
建站服务请点这里>>
网站维护申请
当前位置:首页 > 维护知识

网页设计时如何用CSS样式表转变鼠标样式

来源:维护啦 作者:www.weihula.com 人气: 2010-12-9
内容提示:平常我们移动鼠标到不同的处所时,当鼠标履行不同的功效时,当系统处于不同的状态时,都会使鼠标的外形产生变更。

    平常我们移动鼠标到不同的处所时,当鼠标履行不同的功效时,当系统处于不同的状态时,都会使鼠标的外形产生变更。而在网页上往往只有当鼠标在超级链接上时才呈现一个手形,在其它处所似乎没有什么变更,同布满动感的网页显得不怎么和谐。实际上,用CSS可以方便地定义很多种鼠标外形。用本文先容的方法,可以在网页的作何处所设置鼠标的不同样式。

    如何实现鼠标的不同样式?方法是:

    在涂鸦板中写进:

    <body style="cursor:mouse_style">

    其中tag是标签名,mouse_style就是鼠标样式,如hand/crosshair/text/wait等等。

    具体在Dreamweaver中设置手形鼠标样式后果的制作步骤:

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

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

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

    以下是引用片段:

〈style type="text/CSS"〉  
〈!--  
.cursor1 { cursor: hand}  
--〉  
〈/style〉  

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

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

【声明】本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请与本站联系,我们将在第一时间删除内容!
上一篇 上一篇:网页设计中HTML轻易范的错误
下一篇 下一篇:网络策划九问
返回维护知识
维护动态 网站维护案例 更多动态 维护动态
积木人展览展示
海德睿工程
创际门窗
天津雷公
利君云商
维护动态 行业动态 更多动态 维护动态
谷歌悄然删去人工智能团队网页中
谷歌Colab推出数据科学助手
天价域名再现:ai.com挂牌
京东云发布八大领先智算产品 五
全球开源大模型榜单揭晓,阿里通
维护动态 网站维护知识 更多动态 维护动态
网站中木马了怎么办,怎么清除?
企业建设网站的好处
网站维护的工作内容有哪些?
制作网站需要关注这些核心要素
网站优化中十分影响排名的是什么
网站维护申请 网站维护申请点此进入 网站维护意见反馈 反馈意见

网站维护电话咨询

返回顶部
关于我们 | 案例分享 | 维护套餐 | 维护申请 | 意见反馈 | 维护知识 | 行业动态 | 联系方式
2025 © 网站维护 www.weihula.com 版权所有