网站建设中，在默认状态下，鼠标移过链接则显示为箭头样式，如果链接显示为按钮样式，我们还可以把光标设计为手形样式，这样能够提高用户使用体验。
【操作步骤】
第1步，构建网页结构，在<body>标签中输入以下内容：
<ul>
<li> <a href="#">帮助</a></li>
<li> <a href="#">文本</a></li>
<li> <a href="#" >等待</a></li>
<li> <a href="#">斜箭头</a></li>
<li> <a href="#">十字</a></li>
<li> <a href="#">移动</a></li></ul>
第2步，规划整个页面的基本显示属性以及统一所有元素的默认样式。
* { margin:10px 0 0 10px; padding:0px;}body {
font-size:14px;
font-family:"宋体";}
第3步，在制作网页时，定义水平显示的导航菜单样式。在ul类型选择器中清除列表项目符号，通过li选择器让所有列表项并列显示，通过添加左侧边界2像素，在网页设计时，实现列表项目之间留有一点距离。定义a元素为块显示，设计背景色为亮蓝色，通过固定高和宽设置方形样式，利用line-height属性实现文本垂直居中，清除默认的下划线样式，设置字体为白色。
ul { list-style-type:none;
}li { float:left;
margin-left:2px;}a { display:block;
background-color:#3424ff;
width:100px;
height:30px;
line-height:30px;
text-align:center;
color:#FFFFFF;
text-decoration:none;}
第4步，利用CSS的cursor属性定义多个光标样式类。
.help { cursor:help;}
.text { cursor:text;}.wait { cursor:wait;}
.sw-resize { cursor:sw-resize;}
.crosshair { cursor:crosshair;}
.move { cursor:move;}
提示：cursor是CSS2.0定义的一个属性，具体用法如下：
cursor: auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url (url)
第5步，把这些样式类绑定到列表项目中包含的链接a元素上即可。
<ul>
<li> <a href="#" class="help">帮助</a></li>
<li> <a href="#" class="text">文本</a></li>
<li> <a href="#" class="wait">等待</a></li>
<li> <a href="#" class="sw-resize">斜箭头</a></li>
<li> <a href="#" class="crosshair">十字</a></li>
<li> <a href="#" class="move">移动</a></li>
</ul>
当前文章标题：在网页设计中定义鼠标指针样式
当前URL：http://www.lyjtt.cn/news/wzzz/3079.html
上一篇：如何在网页设计时定义已访问样式
下一篇：在网页设计中定义菜单样式
