css各种手型集合(css禁止手型)

写这篇博客前不得不先吐槽下国内的技术性文章现状;

1:在国内真心缺少技术性的文章;

2:用百度搜技术性的文章真心不靠谱;

好吧;正题;下面是在国外搜刮来的;比较齐全的鼠标手型css;在国内的网站上是搜不到这么全的;比如说哪个禁止的手型;

鼠标往下移动即可看到效果;

html代码如下:<h1>Cursors</h1>

<div class="cursors">    <div class="auto">auto</div>    <div class="default">default</div>    <div class="none">none</div>    <div class="context-menu">context-menu</div>    <div class="help">help</div>    <div class="pointer">pointer</div>    <div class="progress">progress</div>    <div class="wait">wait</div>    <div class="cell">cell</div>    <div class="crosshair">crosshair</div>    <div class="text">text</div>    <div class="vertical-text">vertical-text</div>    <div class="alias">alias</div>    <div class="copy">copy</div>    <div class="move">move</div>    <div class="no-drop">no-drop</div>    <div class="not-allowed">not-allowed</div>    <div class="all-scroll">all-scroll</div>    <div class="col-resize">col-resize</div>    <div class="row-resize">row-resize</div>    <div class="n-resize">n-resize</div>    <div class="s-resize">s-resize</div>    <div class="e-resize">e-resize</div>    <div class="w-resize">w-resize</div>    <div class="ns-resize">ns-resize</div>    <div class="ew-resize">ew-resize</div>    <div class="ne-resize">ne-resize</div>    <div class="nw-resize">nw-resize</div>    <div class="se-resize">se-resize</div>    <div class="sw-resize">sw-resize</div>    <div class="nesw-resize">nesw-resize</div>    <div class="nwse-resize">nwse-resize</div></div>

css代码如下:

@import "compass/css3";

.auto            { cursor: auto; }.deafult         { 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; }.all-scroll      { cursor: all-scroll; }.col-resize      { cursor: col-resize; }.row-resize      { cursor: row-resize; }.n-resize        { cursor: n-resize; }.e-resize        { cursor: e-resize; }.s-resize        { cursor: s-resize; }.w-resize        { cursor: w-resize; }.ns-resize       { cursor: ns-resize; }.ew-resize       { cursor: ew-resize; }.ne-resize       { cursor: ne-resize; }.nw-resize       { cursor: nw-resize; }.se-resize       { cursor: se-resize; }.sw-resize       { cursor: sw-resize; }.nesw-resize     { cursor: nesw-resize; }.nwse-resize     { cursor: nwse-resize; }

.cursors > div {   float: left;   box-sizing: border-box;   width: 20%;   padding: 10px 2px;   text-align: center;     white-space: nowrap;   &:nth-child(even) {      background: #eee;        }   &:hover {      opacity: 0.25   }}

时间: 2025-01-05 13:34:12

css各种手型集合(css禁止手型)的相关文章

a标签有小手状和无小手状css的属性介绍

<p>     有小手状: XML/HTML Code复制内容到剪贴板<a href="http://www.zuiuren.com" title="2" style="cursor:pointer">   无小手状: XML/HTML Code复制内容到剪贴板</a><a href="javascript:void(0)" style="color:#404958;curs

CSS失效网页乱码原因兼容问题-手写CSS代码注意什么

我们在写html代码和css 代码应该注意些什么,这节我们讲解大小写与编码问题.(体感音乐) 乱码VS编码前面我们介绍过导致网页乱码.CSS失效等原因一部分是由于自己编写的时候没有注意编码问题,不编码转化问题,常常因为自己写的时候使用一种编码,发现别人比较好的DIV+CSS片段比较好直接就复制过来用,结果别人编码与自己编码不符合从而造成网页在IE中呈现乱码,或CSS失效(CSS声明).解决办法使用软件中编码转化功能进行网页代码转化.如使用Dreamweaver中功能转化编码.-了解语言编码cha

让IE和Firefox兼容的CSS技巧集合css hack

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不

CSS技巧----DIV+CSS规范命名大全集合

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录 命名规则说明 重要CSS命名 CSS命名参考表 命名技巧 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明:   -   TOP 1).所有的命名最好都小写2).属性的值

Bootstrap是快速开发Web应用程序的前端工具包 CSS和HTML的集合

版本主要新特性包括: Responsive embeds New responsive utility classes Copy docs snippets LMVTFY Browser bugs 其他更多: 提交有超过1000条,同时也很多改变的更加完美,下面几个值得注意的变化: The docs have been rearranged and updated to be more specific and easier to develop. The progress bar compon

CSS 中的强制换行和禁止换行

强制换行 1.word-break: break-all;       只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word;   只对英文起作用,以单词作为换行依据. 3.white-space: pre-wrap;     只对中文起作用,强制换行. 禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文或数字字串(

CSS清除浮动方法集合

CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用   -   

手写集合框架LinkedList实现篇

<手写集合框架>LinkedList篇 嘿嘿嘿,拖延症犯了,这几天不怎么想写代码,所以趁没事干就写写了.进入正文 还是老套路嘻嘻嘻,因为我之前写了那个准备篇,对node已经描述的从差不多了,所以我就不过多描述了. 直接贴完代码强行解释一波 一.定义接口 public interface newList<T> { //定义泛型,因为Object可以存储任意类型,有时候我们需要 //用泛型 代替Object public void add(Object object); //集合的添加

DIV+CSS规范命名大全集合

一.命名规则说明: 1).所有的命名最好都小写2).每个标签都要有开始和结束,且要有正确的层次,排版有规律工整3).表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor.border等4).<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询.5).给每一个表格和表单加上一个唯一的.结构标记id6).给图片加上alt标签7).尽量使用英文命名原则8).尽量不缩写,除非一看就明白的单词 二.相对网页外层重要部分CSS