科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道应用软件给光标添加CSS式样

给光标添加CSS式样

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

CSS允许你控制网页外观和布局的各个方面——包括字体、页边空白和光标。不错,从CSS 2.1开始,你就可以方便地控制用户浏览网页时使用的光标。

作者:builder.com.cn 2007年6月7日

关键字:

  • 评论
  • 分享微博
  • 分享邮件

我们可以使用上表中的值,以及一个元素的光标属性。下面的一行代码说明如何使用一个HTML元素的style属性。

style="cursor: hand;"

和其它CSS属性一样,你可以为整个页面或页面中的单个元素定义一个光标。列表A中的HTML实例对各种页面元素使用一个不同的光标。

<html><head>

<title>Using the CSS cursor property</title>

</head>

<body style="cursor: all-scroll;">

<h1 style="cursor: hand;">Title of the page</h1>

<h2 style="cursor: crosshair;">Subtitle</h2>

<p style="cursor: move;">Some text goes here.</p>

<a href="http://www.news.com/" mce_href="http://www.news.com/" style="cursor: wait;">Read the news</a>

<br><br>

<a href="http://www.techrepublic.com/" mce_href="http://www.techrepublic.com/" style="cursor: help;">TR</a>

</body></html>

这例子通过body元素的style属性给整个文档添加一个光标,但页面中的单个元素也有它们自己指定的光标,因此当用户浏览页面时,光标由页面光标(来自body元素)转变为单个元素的光标。列表B中的例子说明如何根据类或元素类型确定光标的式样。

<html><head>

<title>Using the CSS cursor property</title>

<style type="text/css">

body {cursor: all-scroll;}

p {cursor:move;}

a {cursor:crosshair;}

.headers {cursor:hand;}

</style></head>

<body>

<h1 class="headers">Title of the page</h1>

<h2 class="headers">Subtitle</h2>

<p>Some text goes here.</p>

<a href="http://www.news.com/" mce_href="http://www.news.com/">Read the news</a>

<br><br>

<a href="http://www.techrepublic.com/" mce_href="http://www.techrepublic.com/">TR</a>

</body></html>

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章