CSS - 界面样式

文章目录

  • 前言
  • 一、更改用户的鼠标样式
    • 语法
    • 属性
  • 二、表单轮廓线
  • 三、防止拖拽文本域
  • 四、vertical-align属性应用
    • 语法
    • 属性
  • 五、图片底侧空白缝隙解决
    • 解决方案
  • 六、溢出的文字省略号显示
    • 单行溢出的文字省略号显示
    • 多行溢出的文字省略号显示


前言

所谓的界面样式, 就是更改一些用户操作样式.

一、更改用户的鼠标样式

语法

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 : 把元素的顶端与行中最低的元素的顶端对齐.

五、图片底侧空白缝隙解决

原因 : 图片默认是和文字的基线对齐

解决方案

  1. 给图片添加 vertical-align: middle | top | bottom 等.
  2. 把图片转换为块级元素

六、溢出的文字省略号显示

单行溢出的文字省略号显示

/* 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;

你可能感兴趣的:(CSS,css)