八、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
轮廓线表单默认outlineoutline 轮廓线,我们一般直接去掉,border是边框,我们会经常用
防止拖拽主要针对文本域resize防止用户随意拖拽文本域,造成页面布局混乱,我们resize:none

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471312.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 2138. 将字符串拆分为若干长度为 k 的组

文章目录1. 题目2. 解题1. 题目 字符串 s 可以按下述步骤划分为若干长度为 k 的组&#xff1a; 第一组由字符串中的前 k 个字符组成&#xff0c;第二组由接下来的 k 个字符串组成&#xff0c;依此类推。每个字符都能够成为 某一个 组的一部分。对于最后一组&#xff0c;如果字…

九、一篇文章帮助你读懂CSS属性:vertical-align 垂直对齐

3. vertical-align 垂直对齐 有宽度的块级元素居中对齐&#xff0c;是margin: 0 auto;让文字居中对齐&#xff0c;是 text-align: center; 但是我们从来没有讲过有垂直居中的属性。 vertical-align 垂直对齐&#xff0c;它只针对于行内元素或者行内块元素&#xff0c; verti…

LeetCode 2139. 得到目标值的最少行动次数(贪心)

文章目录1. 题目2. 解题1. 题目 你正在玩一个整数游戏。从整数 1 开始&#xff0c;期望得到整数 target 。 在一次行动中&#xff0c;你可以做下述两种操作之一&#xff1a; 递增&#xff0c;将当前整数的值加 1&#xff08;即&#xff0c; x x 1&#xff09;。加倍&#…

十、CSS三行代码实现 溢出的文字省略号显示(white-space: nowrap;overflow: hidden;text-overflow: ellipsis;)

4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容 white-space:normal &#xff1b;默认处理方式white-space:nowrap &#xff1b; 强制在同一行内显示所有文本&#xff0c;直到文本结束或者遭遇br标签对…

LAMP环境安装与apache配置

可以写在一起也可以分开写 sudo apt-get install apache2 php5 sudo apt-get install libapache2-mod-php5 php5-mysql 修改apache2.conf AddType 是与类型表相关的&#xff0c;描述的是扩展名与文件类型之间的关系&#xff0c;如&#xff1a;AddType application/x-x509-ca-ce…

LeetCode 2140. 解决智力问题(动态规划)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的二维整数数组 questions &#xff0c;其中 questions[i] [pointsi, brainpoweri] 。 这个数组表示一场考试里的一系列题目&#xff0c;你需要 按顺序 &#xff08;也就是从问题 0 开始依次解决&#xff09;&#xff0…

计算机的起源和历史英语作文,端午节的由来和历史英语作文

端午节的由来和历史英语作文端午节与春节和中秋节并列为中国三大节日。下面是小编分享给大家的端午节的由来和历史英语作文&#xff0c;希望能给您带来帮助&#xff01;端午节的由来和历史英语作文1The Dragon Boat Festival is a lunar holiday, occurring on the fifth day o…

LeetCode 2141. 同时运行 N 台电脑的最长时间(二分查找)

文章目录1. 题目2. 解题1. 题目 你有 n 台电脑。给你整数 n 和一个下标从 0 开始的整数数组 batteries &#xff0c;其中第 i 个电池可以让一台电脑 运行 batteries[i] 分钟。 你想使用这些电池让 全部 n 台电脑 同时 运行。 一开始&#xff0c;你可以给每台电脑连接 至多一个…

十二、HTML5新增标签特性详解(audio、video、input)

HTML5 第一天 一、什么是 HTML5 HTML5 的概念与定义 定义&#xff1a;HTML5 定义了 HTML 标准的最新版本&#xff0c;是对 HTML 的第五次重大修改&#xff0c;号称下一代的 HTML两个概念&#xff1a; 是一个新版本的 HTML 语言&#xff0c;定义了新的标签、特性和属性拥有一…

联想新电脑桌面没有计算机,联想电脑没有wifi图标不见了怎么办

1.联想笔记本电脑WiFi图标不见了,怎么回事吧,试了很多方法一、无线网卡开关未打开&#xff1b;1、查看周边有没有手动百机械开关&#xff0c;一般在前面板&#xff0c;上面标有无线符号。2、按一下Fn无线信号键(度F几中的一个)找打无线WIFI3、打开控制机板&#xff0c;右上角查…

十三、CSS 3新特性详解(一)——属性、结构伪类、伪元素选择器,nth-child与nth-of-type区别,2D rotate,calc函数、滤镜filter、过渡transition

七、CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展、新增的样式 CSS3 发展现状 移动端支持优于 PC 端CSS3 目前还草案&#xff0c;在不断改进中CSS3 相对 H5&#xff0c;应用非常广泛 属性选择器列表 属性选择器代码演示 &#xff08;1&#xff09;E[att] 选择具有…

信息的表示和处理

文章目录1. 信息存储2. 整数的表示learn from 《深入理解计算机系统》 1. 信息存储 大多数计算机&#xff0c;一字节&#xff08;最小的寻址单元&#xff09; byte 8 bits 位 C语言中一个指针的值&#xff08;无论它指向一个整数、一个结构或是某个其他程序对象&#xff09;…

学硕计算机考296算高分么,考研总分是多少算高分?考研340分是什么水平?

原标题&#xff1a;考研总分是多少算高分?考研340分是什么水平?每个考研的学生都想考一个高分&#xff0c;分数越高代表录取的希望越大&#xff0c;但是考研达到多少分算高分呢?有没有衡量考研分数的标准呢?小编为大家整理了关于考研总分高分相关的相关信息&#xff0c;一起…

十四、CSS 3新特性详解(二)——2D转换(transform)、动画(animation)、动画序列

HTML5 第二天 一、rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤&#xff1a; 给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{transform: rotate(0deg); }二、三角 <!DOCTYPE html&…

pip/conda导出 requirements.txt 注意事项

pip 使用 pip freeze > ./requirements.txt 导出 requirements.txt 发现很多包没有版本号&#xff0c;而是 file:/// 使用pip list --formatfreeze > ./requirements.txt 导入安装 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt con…

fortune命令简介

本文转自《阮志峰的网络日志》&#xff0c;原文网址&#xff1a;http://www.ruanyifeng.com/blog/2015/04/fortune.html 作者&#xff1a; 阮一峰 日期&#xff1a; 2015年4月14日 美国中餐馆的最后一道菜&#xff0c;往往是小甜饼&#xff0c;叫做"幸运饼"&#xff…

十五、CSS 3新特性详解(三)——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style

HTML5 第三天 一、 认识 3D 转换 3D 的特点 近大远小物体和面遮挡不可见 三维坐标系 x 轴&#xff1a;水平向右 – 注意&#xff1a;x 轴右边是正值&#xff0c;左边是负值 y 轴&#xff1a;垂直向下 – 注意&#xff1a;y 轴下面是正值&#xff0c;上面是负值 z 轴&#x…

用计算机表白的数字,用数字表白的句子大全 如何用数字表白一段话

表白总是一个让人十分难忘的经历&#xff0c;如果大家想要对喜欢的人表白&#xff0c;又不好意思直说自己的想法&#xff0c;那么今天的这份用数字表白的句子大全就对你们很有帮助了。跟我一起看看&#xff0c;如何用数字表白一段话呢&#xff1f;一、用数字表白的句子大全1、3…

pip安装pytorch1.10.1+paddlepaddle-gpu2.2.1+cuda10.2+cudnn7.6.5

NV驱动下载安装https://www.nvidia.cn/Download/index.aspx多卡的话&#xff0c;安装 NCCL https://developer.nvidia.com/nccl/nccl-download配置 pip 源 vim ~/.pip/pip.conf [global] index-url https://pypi.tuna.tsinghua.edu.cn/simple安装virtualenv包pip install vir…

jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)

day01 - jQuery 学习目标&#xff1a; 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画 1.1. jQuery 介绍 1.1.1 JavaScript 库 ​…