微信公众号:Python爬虫与数据挖掘,回复“书籍”有福利

CSS样式更改——用户界面和指针类型

前言

上篇文章主要讲述了CSS样式更改中的多列、元素是否可见、图片透明度基础知识,这篇文章我们来介绍下CSS样式更改中用户界面和指针类型基础用法。

1.用户界面 UserGui

1).重设元素大小 resize

div
{
resize:both
}
none           不调整
both           调整元素的高度和宽度
horizontal     调整元素的宽度
vertical       调整元素的高度

2).规定两个并排的带边框的框 box-sizing

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
content-box  宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

3).对轮廓进行偏移outline-offset

div
{
outline-offset:15px  轮廓与边框边缘的距离
}

2.指针类型Cursor

div{
  cursor:auto
}
光标形状:
default       默认光标(箭头)
auto        浏览器设置的光标。
crosshair           十字线
pointer             一只手
move                指示某对象可被移动。
e-resize            指示矩形框的边缘可被向右(东)移动
ne-resize           指示矩形框的边缘可被向上及向右移动(北/东)
nw-resize           指示矩形框的边缘可被向上及向左移动(北/西)
n-resize            指示矩形框的边缘可被向上(北)移动
se-resize           指示矩形框的边缘可被向下及向右移动(南/东)
sw-resize           指示矩形框的边缘可被向下及向左移动(南/西)
s-resize            指示矩形框的边缘可被向下移动(南)
w-resize            指示矩形框的边缘可被向左移动(西)
text                指示文本
wait                指示程序正忙(通常是一只表或沙漏)
help                指示可用的帮助(通常是一个问号或一个气球)

参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的用户界面和指针类型基础知识,希望让大家对CSS样式更改有个简单的认识和了解。

——————- End ——————-

往期精彩文章推荐:

喜欢 (2)
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦



Warning: copy(C:\inetpub\wordpress/avatar/.png): failed to open stream: No such file or directory in C:\inetpub\wordpress\wp-content\themes\XHBlog\functions.php on line 264

Warning: filesize(): stat failed for C:\inetpub\wordpress/avatar/.png in C:\inetpub\wordpress\wp-content\themes\XHBlog\functions.php on line 269

Warning: copy(C:\inetpub\wordpress/avatar/.png): failed to open stream: No such file or directory in C:\inetpub\wordpress\wp-content\themes\XHBlog\functions.php on line 270
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址