编辑CSS中的cursor样式

发布时间:2020-04-08编辑:脚本学堂
在不同网页中看到各种形状光标,它是怎么在页面中显示的?本文一一介绍css中的cursor样式,自己想做出漂亮的cursor形状,请认真看看这篇文章。

层叠样式表css的cursor的用法:
 cursor:形状名
 auto:自动形状,如在超级链接文字上的手指形状
 corsshair;十字形状
 default:默认的箭头形状
 move:带箭头的十字形状
 e—resize:向右的箭头形状
 ne—resize:右上方的箭头形状
 se—resize:右下方的箭头形状
 n—resize:向上的箭头形状
 nw—resize:左上方的箭头形状
 w—resize:右左的箭头形状
 sw—resize:左下方的箭头形状
 s—resize:向下的箭头形状
 text:指针为在文本框中的“I”形状
 help:带问号的形状
 wait:漏斗形状
 hand:手指形状
 

复制代码 代码示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>各种鼠标形状</title>
<style type="text/css">
 a{
     text-decoration:none;
 }
.STYLE1 {
 font-family: "新宋体";
 font-size: 16px;
}
</style>
</head>
<body>
 <p align="center">
  <font size="4" face="宋体" color="blue">各种各样的鼠标形状</font>
 </p>
 <hr width="100%" size="4" color="#008000">
<table width="300" border="1" align="center" bordercolor="#66FFFF" bgcolor="#CCCCCC">
      <tr>
        <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:auto">自动形状
 </a></span></td>
        <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:crosshair">十
 字形状</a></span></td>
  <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:default">一般箭头
  </a></span></td>
     <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:move">移动光标
     </a></span></td>
      </tr>
      <tr>
        <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:e-resize">向右
 箭头</a></span></td>
        <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:ne-resize">右
 上箭头</a></span></td>
  <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:se-resize">右下箭头
  </a></span></td>
     <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:n-resize">向上箭
     头</a></span></td>
      </tr>
      <tr>
        <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:nw-resize">左
 上箭头</a></span></td>
        <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:w-resize">向左
 箭头</a></span></td>
  <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:sw-resize">左下箭头
  </a></span></td>
     <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:s-resize">向下箭
     头</a></span></td>
      </tr>
      <tr>
        <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:text">文本光标
 </a></span></td>
        <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:wait">漏斗形状
 </a></span></td>
  <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:help">帮助光标
  </a></span></td>
     <td align="center" valign="middle"><span class="STYLE1"><a href="" style="cursor:hand">手形光标
     </a></span></td>
      </tr>
    </table>
</body>
</html>