今天早上在网上看到一篇关于光标类型的总结代码，很好，特定拿来：

最终结果：

代码：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8" />

    <title>cursor光标类型</title>

    <style>

        .test{width:400px;border-collapse:collapse;font:14px/1.5 georgia,arial,serif,sans-serif;}

        .test td{padding:2px 10px;border:1px solid #ddd;}

        .test td:hover{background:#eee;}

        .auto{cursor:auto;}

        .default{cursor:default;}

        .none{cursor:none;}

        .context-menu{cursor:context-menu;}

        .help{cursor:help;}

        .pointer{cursor:pointer;}

        .progress{cursor:progress;}

        .wait{cursor:wait;}

        .cell{cursor:cell;}

        .crosshair{cursor:crosshair;}

        .text{cursor:text;}

        .vertical-text{cursor:vertical-text;}

        .alias{cursor:alias;}

        .copy{cursor:copy;}

        .move{cursor:move;}

        .no-drop{cursor:no-drop;}

        .not-allowed{cursor:not-allowed;}

        .e-resize{cursor:e-resize;}

        .n-resize{cursor:n-resize;}

        .ne-resize{cursor:ne-resize;}

        .nw-resize{cursor:nw-resize;}

        .s-resize{cursor:s-resize;}

        .se-resize{cursor:se-resize;}

        .sw-resize{cursor:sw-resize;}

        .w-resize{cursor:w-resize;}

        .ew-resize{cursor:ew-resize;}

        .ns-resize{cursor:ns-resize;}

        .nesw-resize{cursor:nesw-resize;}

        .nwse-resize{cursor:nwse-resize;}

        .col-resize{cursor:col-resize;}

        .row-resize{cursor:row-resize;}

        .all-scroll{cursor:all-scroll;}

        .url{cursor:url(skin/cursor.gif),

        url(skin/cursor.png),

        url(skin/cursor.jpg),

        pointer;}

    </style>

</head>

<body>

<table class="test">

    <caption>cursor光标类型</caption>

    <tbody>

    <tr>

        <td class="auto">auto</td>

        <td class="default">default</td>

        <td class="none">none</td>

        <td class="context-menu">context-menu</td>

        <td class="help">help</td>

        <td class="pointer">pointer</td>

        <td class="progress">progress</td>

    </tr>

    <tr>

        <td class="wait">wait</td>

        <td class="cell">cell</td>

        <td class="crosshair">crosshair</td>

        <td class="text">text</td>

        <td class="vertical-text">vertical-text</td>

        <td class="alias">alias</td>

        <td class="copy">copy</td>

    </tr>

    <tr>

        <td class="move">move</td>

        <td class="no-drop">no-drop</td>

        <td class="not-allowed">not-allowed</td>

        <td class="e-resize">e-resize</td>

        <td class="n-resize">n-resize</td>

        <td class="ne-resize">ne-resize</td>

        <td class="nw-resize">nw-resize</td>

    </tr>

    <tr>

        <td class="s-resize">s-resize</td>

        <td class="se-resize">se-resize</td>

        <td class="sw-resize">sw-resize</td>

        <td class="w-resize">w-resize</td>

        <td class="ew-resize">ew-resize</td>

        <td class="ns-resize">ns-resize</td>

        <td class="nesw-resize">nesw-resize</td>

    </tr>

    <tr>

        <td class="nwse-resize">nwse-resize</td>

        <td class="col-resize">col-resize</td>

        <td class="row-resize">row-resize</td>

        <td class="all-scroll">all-scroll</td>

        <td class="url">url</td>

    </tr>

    </tbody>

</table>

</body>

</html>

cursor光标类型的更多相关文章

  1. 鼠标放上去，不同的cursor光标类型

    <!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf ...

  2. CSS display overflow 属性 cursor光标类型

    display属性   功能:规则网页元素如何显示的问题.   取值:none(隐藏).block(以块元素显示).inline(以行内元素显示)   block:可以实现将行内元素转成块元素.   ...

  3. css中cursor(光标类型)

    值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器 ...

  4. 常用cursor光标说明

    1.cursor语法: cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-res ...

  5. C++:CursorType光标类型 和 LockType锁定类型

    简要: CursorType光标类型: 1.   AdOpenForwardOnly   (默认值)一次只能向前移动一行. 2.   AdOpenKeyset   打开键集类型游标. 3.   AdO ...

  6. 用图片替代cursor光标样式

    鼠标光标样式有限,可参考http://css-cursor.techstream.org/,自定义光标样式可用设置cursor:url('xxx.cur'),auto;.还有一种办法,就是用图片替代鼠 ...

  7. 光标显示样式 css 中 cursor 属性使用

    记录一下 cursor 的各种样式,方便自己查找.之前用到不常用的每次去 百度 或 Google 找不如自己记录下好找些. cursor光标类型 auto default none context-m ...

  8. cursor属性

    cursor光标类型 auto default none context-menu help pointer progress wait cell crosshair text vertical-te ...

  9. css cursor效果图

    效果图: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset=& ...

随机推荐

  1. image_Magic图片处理功能

    :] 来自为知笔记(Wiz)

  2. java要注意的问题3

    十七.使用正则 正则表达式的结构摘录如下(来源: Oracle官网) 字符 x 字符x / 反斜杠 /0n 8进制值为0n的字符(0<=n<=7) /0nn   /0mnn 8进制值为0m ...

  3. ServiceModel 元数据实用工具 (Svcutil.exe)

    ServiceModel 元数据实用工具用于依据元数据文档生成服务模型代码,以及依据服务模型代码生成元数据文档 一.SvcUtil.exe ServiceModel 元数据实用工具可在 Windows ...

  4. UTC和时间相互转换

    // ToLocalTime() UTC时间转换为本地时间 public static DateTime UtcToDateTime(long number) { , , , , , , ).AddS ...

  5. springmvc 自定义拦截器

    <mvc:interceptors> <!-- 配置自定义的拦截器 --> <bean class="com.atguigu.springmvc.interce ...

  6. Python框架之Tornado（请求）

    概述 本篇就来详细介绍tornado服务器(socket服务端)是如何接收用户请求数据以及如果根据用户请求的URL处理并返回数据,也就是上图的3系列所有步骤,如上图[start]是一个死循环,其中利用 ...

  7. spring boot集成redis缓存

    spring boot项目中使用redis作为缓存. 先创建spring boot的maven工程,在pom.xml中添加依赖 <dependency> <groupId>or ...

  8. hadoop29---自定义注解

    自定义注解: package cn.itcast_04_springannotation.userdefinedannotation.annotation; import java.lang.anno ...

  9. Entity FrameWork Code First 迁移命令详解

    1. Enable-Migrations 启动迁移 执行get-help Enable-Migrations –detailed 查看Enable-Migrations的详细用法. -ContextT ...

  10. 【JavaScript】动态的小球

    参考: 1.CSS 对比 JavaScript 动画 2.CSS制作水平垂直居中对齐_水平居中, 垂直居中 教程_w3cplus:https://www.w3cplus.com/css/vertica ...