CSS 用户界面样式

鼠标样式 cursor

 li {cursor: pointer; }

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

轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

 input {outline: none; }

防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

 textarea{ resize: none;}

vertical-align 属性应用

CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align : baseline | top | middle | bottom

单行文本溢出显示省略号

单行文本溢出显示省略号--必须满足三个条件：

  /*1. 先强制一行内显示文本*/white-space: nowrap;  （ 默认 normal 自动换行）/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;

CSS 用户界面样式相关推荐

前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
CSS基础(part16)--CSS用户界面样式
学习笔记,仅供参考,有错必纠参考自:pink老师课堂笔记文章目录 CSS用户界面样式鼠标样式cursor 轮廓线outline 防止拖拽文本域resize CSS用户界面样式鼠标样式curso ...
八、pink老师的学习笔记—— CSS用户界面样式（鼠标样式、轮廓线、防止拖拽文本域）
2. CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验. 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究) 表单轮廓等. 防止表单域拖拽 2.1 鼠标样 ...
CSS第六天-高级技巧（元素隐藏、精灵图、CSS用户界面样式、margi负值作用、CSS三角形）
ps 今天这是html和css初级部分的最后一份文章了,下次发的就是HTML5和CSS3的一些基础知识.越学到后面,感觉越有意思.到后面可以自己去尝试做一些比较炫酷的动画了,还是蛮期待的. CSS高级 ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
css学习_css用户界面样式
1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: ...
三十三、CSS三角的做法用户界面样式
一.CSS三角网页中常见的一些三角形,使用CSS直接画出来就可以了,不必做成图片或者字体图标.一张图,你就知道CSS三角是怎么来的了,做法如下: <!DOCTYPE html> < ...