您的位置：首页 > Web前端 > CSS

css对鼠标形状的控制！

2007-12-02 01:31 260 查看
为了使我们的web页面设计的更加人性化，我们可以丰富鼠标形状的变化从而改变用户的体验！你可以从一下代码中找到合适自己所使用的鼠标形状！

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css12.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
.hand{cursor:hand;} /*手形*/
.crosshair{cursor:crosshair;} /*精确定位“+”字*/
.move{cursor:move;} /*移动*/
.e-resize{cursor:e-resize;} /*箭头朝右方*/
.ne-resize{cursor:ne-resize;} /*箭头朝右上方*/
.nw-resize{cursor:nw-resize;} /*箭头朝左上方*/
.n-resize{cursor:n-resize;} /*箭头朝上方*/
.se-resize{cursor:se-resize;} /*箭头朝右下方*/
.s-resize{cursor:s-resize;} /*箭头朝下方*/
.w-resize{cursor:w-resize;} /*箭头朝左方*/
.text{cursor:text;} /*“I”字型*/
.wait{cursor:wait;} /*等待*/
.help{cursor:help;} /*帮助*/
-->
</style>

</head>

<body>
<p class="hand">
Give me a hand!（手形）
</p>
<p class="crosshair">
Give me a crosshair（精确定位）!
</p>
<p class="move">
Give me a Move（移动）!
</p>
<p class="e-resize">
Give me a e-resize(箭头方向朝右)!
</p>
<p class="ne-resize">
Give me a ne-resize(箭头方向朝右上)!
</p>
<p class="nw-resize">
Give me a nw-resize(箭头方向朝左上)!
</p>
<p class="n-resize">
Give me a n-resize(上)!
</p>
<p class="se-resize">
Give me a se-resize(左下)!
</p>
<p class="s-resize">
Give me a s-resize(下)!
</p>
<p class="w-resize">
Give me a w-resize(左)!
</p>
<p class="text">
Give me a text(文本)!
</p>
<p class="wait">
Give me a wait(等待)!
</p>
<p class="help">
Give me a help(帮助)!
</p>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航