八、pink老师的学习笔记—— CSS用户界面样式(鼠标样式、轮廓线、防止拖拽文本域)
2. CSS用户界面样式
- 所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验。
- 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究)
- 表单轮廓等。
- 防止表单域拖拽
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 |
八、pink老师的学习笔记—— CSS用户界面样式(鼠标样式、轮廓线、防止拖拽文本域)相关推荐
- 五、pink老师的学习笔记——CSS精灵技术(sprite)
5. CSS精灵技术(sprite) 重点 5.1 为什么需要精灵技术 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一 ...
- 户界面样式-表单轮廓和防止拖拽文本域(HTML、CSS)
户界面样式-表单轮廓和防止拖拽文本域(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><m ...
- 四、pink老师的学习笔记——元素的显示与隐藏
1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 1.1 display 显示(重点) display ...
- web前端入门学习 css(7)css高级技巧 (精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化)
文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
- web前端基础 html5+css3(九.精灵图,字体图标,css三角,鼠标样式cursor,.轮廓线 outline,vertical-align,文本溢出显示省略号)
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
- 我的学习笔记——CSS背景渐变(Gradients)详解
我的学习笔记--CSS背景渐变(Gradients)详解 一.线性渐变(Linear Gradients) 1.语法 background-image: linear-gradient(directi ...
- pink老师js869集笔记
B站pink老师JavaScript 869集笔记 计算机基础部分 1.编程语言 1.1 编程 编程:就是让计算机为解决某个问题而使用某种程序设计语言编写代码程序,并最终的得到的过程 计算机程序:就是 ...
- amazeui学习笔记--css(常用组件4)--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- amazeui学习笔记--css(HTML元素2)--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
最新文章
- PDGAN: A Novel Poisoning Defense Method in Federated Learning Using Generative Adversarial Network笔记
- 《Python程序设计》教学大纲
- Android studio无法创建类和接口问题解决办法。提示 Unable to parse template Class
- macOS Big Sur:快速入门的50个使用技巧
- 安装sphinx的心得和错误处理
- 21. Don't try to return a reference when you must return an object
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_06 Properties集合_3_Properties集合中的方法load...
- .tar.bz2 解压出错问题解决方案
- Android Startup实现分析
- APP开发者如何选择适合的广告联盟或聚合广告平台
- java 登陆qq_纯java的QQ登陆界面
- 推荐一个美中不失优雅的博客网主页(素材参考---麋鹿鲁哟)
- Matlab中pickic_高颜值甜品DIY |春季甜品Picnic野餐系列,一起过个惬意慵懒的午后时光❗️...
- (转)日本語を輸入について
- 阿卡迪亚大学计算机专业好考吗,考上阿卡迪亚大学有多难?
- Microsoft Edge浏览器使用时过滤网页广告弹窗等插件推荐---电脑初始维护
- 【2021年蓝桥杯Java-B组国赛题解】
- Androidq下编译efr32mg21
- 但见新人笑,那闻旧人哭,大衣哥前儿媳陈亚楠好可怜
- 人工智能导论学习笔记(考前复习)
热门文章
- java同名变量在list中添加两次_快速解决List集合add元素,添加多个对象出现重复的问题...
- c语言编写一个菜单系统_一招教你,轻松解决C语言编写一个正整数的所有因子!...
- 机器学习之 sklearn.preprocessing 模块
- html浏览器的区别是什么意思,不同浏览器对css的识别有区别吗?
- listview 每行后面的小箭头_主卧带小衣帽装修,这几个装修方案,你喜欢哪个?...
- java不规则算法_分布式id生成算法 snowflake 详解
- mysql current_timestamp 不自动更新_MySQL ON UPDATE CURRENT_TIMESTAMP不更新
- Ubuntu16.04通过GPT挂载硬盘
- Java:抽象类笔记
- 纯CSS方块转化梯形动画