网页设计时的指示和选择光标

2022-06-29    分类: 网站建设

光标

用户界面的另一个重要部分是光标(在CSS规范中称之为“指示设备”),它由鼠标、写字板、图形书写板甚至光学读取系统之类的设备控制。在大多数web浏览器中,光标对于提供交互反馈很有用,例如,光标经过一个超链接时会变成一只食指伸出的小手,这就是一个明显的例子。

改变光标

CSS2允许改变光标图标,这说明在设计网页时创建一个类似于操作系统中桌面应用的Web应用会容易得多。例如,经过一个指向帮助文件的链接时,光标可能会变成一个“帮助”图标。

这是利用cursor属性完成的。

cursor

值:[[,]*[ auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se- resize | sw-resize | s-resize | w-resize | text | wait | help | progress ]] | inherit

初始值:auto

应用于:所有元素

继承性:有

计算值:对于值,为绝对值,否则,根据指定确定

网站建设时,默认值auto只表示用户代理应当确定最适合当前上下文的光标图标。这与default不同,后者要求图标是操作系统的默认光标。默认光标通常是一个箭头,不过也不一定,这取决于当前的计算环境。

指示和选择光标

值pointer会把光标图标改为与移过超链接时的光标相同。甚至可以为HTML文档描述这种行为:

a[href]{cursor: pointer;}

利用cursor,可以将任何元素定义为像链接一样改变光标图标。这可能会让用户糊涂,所以建议不要经常这样做。另一方面(可以这么说),利用cursor可以更容易地利用非链接元素创建交互式、脚本驱动的屏幕部件,然后适当地改变图标。

注意:Windows平台的Internet Explorer在IE6以前不能识别pointer,而是使用值hand将光标改变为“指示手”图标。这两个值IE6都能识别。对此常见的建议是按先后顺序使用这两个值,如下:#example {cursor: pointer; cursor: hand;}这并不会验证是否确实这样做,不过这样可以在较新的浏览器和Explorer的较早版本中得到一致的结果•注意,这里的顺序很重要:如果把这两个值的顺序倒过来,就不要指望它还能正常工作。

网页设计时,Web浏览领域中另一个很常见的光标图标是tes^图标,只要用户能选择文本,就会出现这个图标。这往往是一个“I”光标,作为一个视觉提示,指示用户可以拖动-选择光标下的内容。图13-4显示了一段已经选中的文本的最后有一个文本图标。

指示交互性的另一种办法是使用值crosshair,显然,crosshair会把光标图标变为一个十字符号。这往往是一对彼此呈直角交叉放置的短线,其中一条垂直,另一条水平,看上去就像一个加号(+)。不过,十字符号也可以类似于乘号(或小写的“x”),甚至是手枪瞄准镜内显示的准星图标。十字符号通常用于屏幕捕捉程序,如果用户想准确地知道正在点击哪一个像素,这就很有用。


网站标题:网页设计时的指示和选择光标
文章转载:https://www.cdcxhl.com/news/172929.html

成都网站建设公司_创新互联,为您提供网站导航App设计商城网站云服务器网站收录全网营销推广

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

外贸网站建设