鼠标css样式:cursor

时间:2022-09-22 22:54:19
层叠样式表的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>