首页 > Web开发 > 详细

0031 CSS用户界面样式:鼠标样式cursor、轮廓线 outline、防止拖拽文本域resize

时间:2019-12-31 20:06:48      阅读:103      评论:0      收藏:0      [点我收藏+]
  • 所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验。
    • 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究)
    • 表单轮廓等。
    • 防止表单域拖拽

2.1 鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

鼠标放我身上查看效果哦:

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
  <li style="cursor:not-allowed">我是文本</li>
</ul>

2.2 轮廓线 outline

技术分享图片
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width 

但是我们都不关心可以设置多少,我们平时都是去掉的。 li

最直接的写法是 : outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

2.3 防止拖拽文本域resize

技术分享图片

实际开发中,我们文本域右下角是不可以拖拽:

<textarea  style="resize: none;"></textarea>

2.4 用户界面样式总结

属性 用途 用途
鼠标样式 更改鼠标样式cursor 样式很多,重点记住 pointer
轮廓线 表单默认outline outline 轮廓线,我们一般直接去掉,border是边框,我们会经常用
防止拖拽 主要针对文本域resize 防止用户随意拖拽文本域,造成页面布局混乱,我们resize:none

0031 CSS用户界面样式:鼠标样式cursor、轮廓线 outline、防止拖拽文本域resize

原文:https://www.cnblogs.com/jianjie/p/12126485.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!