文章目录
前言
所谓的界面样式, 就是更改一些用户操作样式.
一、更改用户的鼠标样式
语法
li {cursor: pointer;}
属性
- default : 默认
- pointer : 小手
- move : 移动
- text : 文本
- not-allowed : 禁止
- url(./鼠标样式图) : 修改鼠标样式
二、表单轮廓线
给表单添加 outline: 0; 或者 outline: none; 样式, 就可以去掉默认的蓝色边框.
三、防止拖拽文本域
textarea{ resize: nonel; }
四、vertical-align属性应用
经常用于设置图片或者表单和文字垂直对齐. 只针对行内元素或者行内块元素有效.
语法
vertical-align: baseline | top | middle | bottom
属性
- baseline : 默认
- top : 把元素的顶端与行中最高元素的顶端对齐
- middle : 把此元素放置在父元素的中部.
- bottom : 把元素的顶端与行中最低的元素的顶端对齐.
五、图片底侧空白缝隙解决
原因 : 图片默认是和文字的基线对齐
解决方案
- 给图片添加
vertical-align: middle | top | bottom等. - 把图片转换为块级元素
六、溢出的文字省略号显示
单行溢出的文字省略号显示
/* 1. 先强制一行内显示文本 */
white-space: nowrap;
/* 2. 超出的部分隐藏 */
overflow: hidden;
/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
多行溢出的文字省略号显示
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;