css基础 cursor:default/pointer/move/text 鼠标样式

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">
        li {
            margin:20px;
        }
        li:nth-child(2n) {
            background-color:green;
        }
        li:nth-child(2n+1) {
            background-color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li style="cursor:default;">default</li>
        <li style="cursor:pointer">pointer</li>
        <li style="cursor:move">move</li>
        <li style="cursor:text">text</li>
    </ul>
</body>
</html>

效果



CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8442055.html

时间: 2024-11-14 03:09:04

css基础 cursor:default/pointer/move/text 鼠标样式的相关文章

CSS中cursor的pointer 与 hand-备

cursor:hand 与 cursor:pointer 的效果是一样,都像手形光标(在浏览器上时   鼠标会显示成 小手 ).但用FireFox浏览时才注意到使用cursor:hand在FireFox里并被支持.cursor:hand :IE完全支持.但是在firefox是不支持的,没有效果.cursor:pointer :是CSS2.0的标准.所以firefox是支持的,但是IE5.0既之前版本不支持.IE6开始支持. 下面的东西  有空看看 附:cursor属性收集 光标类型   CSS十

CSS中cursor的pointer 与 hand

附:cursor属性收集 光标类型   CSS 十字准心 cursor: crosshair; 手 cursor: pointer; cursor: hand; 写两个是为了照顾IE5,它只认hand. 等待/沙漏 cursor: wait; 帮助 cursor: help; 无法释放 cursor: no-drop; 文字/编辑 cursor: text; 可移动对象 cursor: move; 向上改变大小(North)   cursor: n-resize; 向下改变大小(South)  

css基础 outline:none 取消input的 鼠标点击时蓝色的框框 效果

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css基础 设置div 上下左右边框线的样式

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

CSS基础知识(2)三种样式表的写法,块、行内、行内块元素之间的转换

margin: 0 auto /*可以让盒子居中*/1.三种样式表的书写方法 (1)内嵌式写法 特点:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type="text/css"> 样式表写法 </style></head> (2)外链式写法 特点:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离. <link rel="stylesheet" href="

css基础语法,简单选择器,文本样式2018/4/26

MDN-CSS 介绍 MDN-CSS如何工作 MDN-CSS 语法 MDN-选择器 MDN-简单选择器 MDN-属性选择器 MDN-基本文本和字体样式 color font-family font-style font-weight font-size text-align text-decoration text-indent line-height text-shadow 验证 今天代码部分其实比较简单,主要是多尝试,学习之后,回顾以下自己是否已经掌握以下概念: 什么是CSS,CSS是如何工

CSS 基础篇、绝对有你想要

本章内容: 简介 CSS 定义 四种引入方式 样式应用的顺序 选择器(Selector) * 通用元素选择器 标签选择器 class 类选择器 # ID选择器 , 多元素选择器 后代元素选择器 > 子元素选择器 + 毗邻元素选择器 [] 属性选择器 伪类选择器 常用属性 颜色属性(color .transparent.opacity) 字体属性(font-style. font-weight.font-size. font-family.font) 文本属性(white-space.direct

cursor -- 定义鼠标样式

cursor -- 定义鼠标样式 取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit [<uri> ,]*: 根据用户定义的资源显示 a

CSS基础篇

本章内容: 简介 CSS 定义 四种引入方式 样式应用的顺序 选择器(Selector) * 通用元素选择器 标签选择器 class 类选择器 # ID选择器 , 多元素选择器 后代元素选择器 > 子元素选择器 + 毗邻元素选择器 [] 属性选择器 伪类选择器 常用属性 颜色属性(color .transparent.opacity) 字体属性(font-style. font-weight.font-size. font-family.font) 文本属性(white-space.direct