::NoName Magazine 无名杂志 » 设计无名 » CSS光标属性一览表


2005-11-5 14:49 Sai
CSS光标属性一览表

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="TextLeft">
  <tbody>
    <tr>
      <th colspan="2">光标类型
        </td>
      <th>CSS
        </td>
    </tr>
    <tr>
      <td colspan="2">把你的光标放到相应文字上查看效果</td>
      <td>要注意光标的实际效果依赖于用户的系统设置,与你在这里看到的效果并不一定一致。</td>
    </tr>
    <tr class="odd">
      <td bgcolor="#FFFFFF"><img alt="十字准心" src="http://www.sharkui.com/articles/examples/19/crosshair.gif" /> </td>
      <td width="40%"><span style="cursor: crosshair;">十字准心</span></td>
      <td><code>cursor: crosshair;</code></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><img alt="手" src="http://www.sharkui.com/articles/examples/19/hand.gif" /> </td>
      <td><span style="cursor:hand;cursor:pointer;">手</span></td>
      <td><code>cursor: pointer; <br />
        cursor: hand;</code><br />
                写两个是为了照顾IE5,它只认hand。</td>
    </tr>
    <tr class="odd">
      <td bgcolor="#FFFFFF"><img height="29" alt="等待/沙漏" src="http://www.sharkui.com/articles/examples/19/wait.gif" width="25" /> </td>
      <td><span style="cursor: wait;">等待/沙漏</span></td>
      <td><code>cursor: wait;</code></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><img height="29" alt="帮助" src="http://www.sharkui.com/articles/examples/19/help.gif" width="30" /></td>
      <td><span style="cursor: help;">帮助</span></td>
      <td><code>cursor: help;</code></td>
    </tr>
    <tr class="odd">
      <td bgcolor="#FFFFFF"><img height="40" alt="无法释放" src="http://www.sharkui.com/articles/examples/19/no-drop.gif" width="40" /></td>
      <td><span style="cursor: no-drop;">无法释放</span></td>
      <td><code>cursor: no-drop;</code></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><img height="24" alt="文字/编辑" src="http://www.sharkui.com/articles/examples/19/text.gif" width="17" /></td>
      <td><span style="cursor: text;">文字/编辑</span></td>
      <td><code>cursor: text;</code></td>
    </tr>
    <tr class="odd">
      <td bgcolor="#FFFFFF"><img height="28" alt="可移动对象" src="http://www.sharkui.com/articles/examples/19/move.gif" width="24" /></td>
      <td><span style="cursor: move;">可移动对象</span></td>
      <td><code>cursor: move;</code></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><img height="24" alt="向上改变大小" src="http://www.sharkui.com/articles/examples/19/nresize.gif" width="17" /></td>
      <td><span style="cursor: n-resize;">向上改变大小(North) </span></td>
      <td><code>cursor: n-resize;</code></td>
    </tr>
    <tr class="odd">
      <td bgcolor="#FFFFFF"><img height="24" alt="向下改变大小" src="http://www.sharkui.com/articles/examples/19/sresize.gif" width="17" /></td>
      <td><span style="cursor: s-resize;">向下改变大小(South) </span></td>
      <td><code>cursor: s-resize;</code></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><img height="19" alt="向右改变大小" src="http://www.sharkui.com/articles/examples/19/eresize.gif" width="26" /></td>
      <td><span style="cursor: e-resize;">向右改变大小(East) </span></td>
      <td><code>cursor: e-resize;</code></td>
    </tr>
    <tr class="odd">
      <td bgcolor="#FFFFFF"><img height="19" alt="向左改变大小" src="http://www.sharkui.com/articles/examples/19/wresize.gif" width="26" /></td>
      <td><span style="cursor: w-resize;">向左改变大小(West) </span></td>
      <td><code>cursor: w-resize;</code></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><img height="28" alt="向上右改变大小" src="http://www.sharkui.com/articles/examples/19/neresize.gif" width="23" /></td>
      <td><span style="cursor: ne-resize;">向上右改变大小(North East) </span></td>
      <td><code>cursor: ne-resize;</code></td>
    </tr>
    <tr class="odd">
      <td bgcolor="#FFFFFF"><img height="24" alt="向上左改变大小" src="http://www.sharkui.com/articles/examples/19/nwresize.gif" width="26" /></td>
      <td><span style="cursor: nw-resize;">向上左改变大小(North West) </span></td>
      <td><code>cursor: nw-resize;</code></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><img height="24" alt="向下右改变大小" src="http://www.sharkui.com/articles/examples/19/seresize.gif" width="26" /></td>
      <td><span style="cursor: se-resize;">向下右改变大小(South East) </span></td>
      <td><code>cursor: se-resize;</code></td>
    </tr>
    <tr class="odd">
      <td bgcolor="#FFFFFF"><img height="28" alt="向下左改变大小" src="http://www.sharkui.com/articles/examples/19/swresize.gif" width="23" /></td>
      <td><span style="cursor: sw-resize;">向下左改变大小(South West) </span></td>
      <td><code>cursor: sw-resize;</code></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><img height="24" alt="自动" src="http://www.sharkui.com/articles/examples/19/auto.gif" width="17" /></td>
      <td><span style="cursor: auto;">自动</span></td>
      <td><code>cursor: auto;</code></td>
    </tr>
    <tr class="odd">
      <td bgcolor="#FFFFFF"><img height="24" alt="禁止" src="http://www.sharkui.com/articles/examples/19/not-allowed.gif"
      width="24" /></td>
      <td><span style="cursor: not-allowed;">禁止</span></td>
      <td><code>cursor:not-allowed;</code></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><img height="28" alt="处理中" src="http://www.sharkui.com/articles/examples/19/progress.gif" width="31" /></td>
      <td><span style="cursor: progress;">处理中</span></td>
      <td><code>cursor: progress;</code></td>
    </tr>
    <tr class="odd">
      <td bgcolor="#FFFFFF"><img height="29" alt="系统默认" src="http://www.sharkui.com/articles/examples/19/default.gif" width="25" /></td>
      <td><span style="cursor: default">系统默认</span></td>
      <td><code>cursor: default;</code></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF" style="cursor: url('http://www.sharkui.com/articles/examples/19/cursor2.ani');"><img height="32" alt="用户自定义" src="http://www.sharkui.com/articles/examples/19/cursor2.gif" width="32" /></td>
      <td><span style="cursor: url('http://www.sharkui.com/articles/examples/19/cursor2.ani')">用户自定义(可用动画)</span></td>
      <td><code>cursor: url(' # ');</code><br />
  # = 光标文件地址   (注意文件格式必须为:.cur 或 .ani)。</td>
    </tr>
  </tbody>
</table>

2005-11-5 20:57 xlfdll
这个。。。没话说了

为SAi鼓一下掌吧。。。

页: [1]
查看完整版本: CSS光标属性一览表


Powered by Discuz! Archiver 5.5.0  © 2001-2006 Comsenz Inc.