今天学习了CSS的cursor属性,第一篇博客就用来总结它吧。
cursor属性用于控制光标的显示样式,可取的值有这些:
cursor:url()*|{auto|default|pointer|crosshair|text|vertical-text|help|not-allowed|no-drop|move|e-reszie|s-resize|w-resize|w-resize|n-resize|all-scroll|ne-resize|se-resize|nw-resize|sw-resize|col-resize|row-resize|}
*表示至少写一个该值,url后面可再选{}内的一个值。
1 2 3 4 5 CSS之cursor属性 6 7 h2#auto{cursor:auto;} 8 h2#default{cursor:defaut;} 9 h2#hand{cursor:hand;}10 h2#pointer{cursor:pointer;}11 h2#text{cursor:text;}12 h2#crosshair{cursor:crosshair;}13 h2#move{cursor:move;}14 h2#wait{cursor:wait;}15 h2#progress{cursor:progress;}16 h2#help{cursor:help;}17 h3#ne-resize{cursor:ne-resize;}18 h3#nw-resize{cursor:nw-resize;}19 h3#n-resize{cursor:n-resize;}20 h3#se-resize{cursor:se-resize;}21 h3#sw-resize{cursor:sw-resize;}22 h3#s-resize{cursor:s-resize;}23 h3#w-resize{cursor:w-resize;}24 h3#e-resize{cursor:e-resize;}25 h2#vertical-text{cursor:vertical-text;}26 h2#not-allowed{cursor:not-allowed;}27 h2#no-drop{cursor:no-drop;}28 h3#col-resize{cursor: col-resize;}29 h3#row-resize{cursor: row-resize;}30 h3#all-scroll{cursor:all-scroll;}31 h2#url{cursor: url();}32 tr{border:1px solid red;}33 34 35 36 百度37 指示和选择光标
38 auto:浏览器默认
39 default:操作系统默认光标
40 hand:手型
41 text:大写的I,水平文本选择
42 vertical-text:大写的I,垂直文本选择
43 help:箭头加问号,获取帮助
44 pointer:手形,表示链接
45 not-allowed:红色圆圈和斜杠,禁止操作
46 no-drop:红色圆圈和斜杠,无法释放
47 crosshair:十字瞄准,表示精确选择
48 49 表程序状态
50 wait:选转环,表示等待直到不忙,不能交互
51 progress:箭头加旋转环,处理中,可以交互
52 53 54 move用于移动对象
55 move:移动对象,两端带箭头的十字
56 all-scroll:移动
57 在四个角上改变窗口大小
58 ne-resize:向东(右)或/和北(上)
59 sw-resize:向西(左)或/和南(下)
60 nw-resize:向西(左)或/和北(上)
61 se-resize:向东(右)或/和南(下)
62 63 在四条边上改变窗口大小
64 东西用于改变水平宽度
65 e-resize:向东(右)
66 w-resize:向西(左)
67 南北用于改变垂直高度
68 s-resize:向南(下)
69 n-resize:向北(上)
70 col-resize:改变列宽
71 row-resize:改变行高
72 73
还有几个属性值没有弄清楚:hand url col-resize row-resize 弄清楚了再在修改博客。
第一次写博客,各种不熟悉。学的也不够扎实,欢迎指正。
查看更多关于CSS之cursor属性_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did112405