CSS---用户界面样式

本文介绍了界面样式的重要性和一些关键CSS属性,如鼠标样式、表单轮廓、防止拖拽、vertical-align属性以及如何处理图片底部缝隙。还详细阐述了如何实现单行和多行文本溢出时显示省略号的技巧,提供了相应的CSS代码示例,旨在优化用户交互和视觉效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是界面样式?

所谓的界面样式, 就是更改一些用户操作样式, 以便提高更好的用户体验

        更改用户的鼠标样式

        表单轮廓

防止表单域拖拽

鼠标样式 curosr

li {cursor: pointer; }

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

属性值描述
default默认
pointer小手
move移动
text文本
not-allowed禁止

表单的轮廓和防止拖拽把文本域

表单的轮廓:    outline: none;

防止拖拽文本域: resize: none;


vertical-align 属性应用

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

作用: 用于设置一个元素的垂直对齐方式, 但是它只针对于行内元素或者行内块元素有效

语法:

                vertical-align: baseline  | top | middle | bottom  ;

属性值描述
baseline默认.元素放置在元素的基线上
top把元素的顶端于行中最高元素的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶端于行中最低的元素的顶端对齐

 文字一般默认的都是与基线对齐

图片底侧有空白缝隙

           自带BUG : 图片底侧 会有一个空白缝隙, 原因是行内块元素 和 文字的基线对齐

 主要解决方案:

        1. 给图片添加 vertical-align: middle | top | top  ;等

        2. 把图片转换为块级元素: display: block;

溢出的文字以省略号显示

1.单行文本溢出显示省略号

2. 多行文本溢出显示省略号

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

        1.先强制一行内显示文本

               white-space: nowrap; ( 默认 normal 自动换行)     (解释: 这个单词的意思是如果文字显示不开自动换行)

          2. 超出的部分隐藏

                overflow: hidden;

        3. 文字用省略号替代超出的部分

                text-overflow: ellipsis;   // 这个为核心代码   ellispsis 是省略号的意思

即:

        white-space: nowrap;  (normal 如果文字显示不开自动换行)

        overflow: hidden;

        text-overflow: ellipasis;

2) 多行文本溢出显示省略号

多行文本溢出显示省略号, 有较大兼容性问题, 适合于webKit浏览器或移动端 (移动端大部分是 webkit 内核)

overflow: hidden;

text-overflow: ellipsis;

/* 弹性伸缩盒子模型显示 */  解释: 把我们的盒子模型转换为弹性盒子模型

display: -webkit-box;

/* 限制在一个块元素显示的文本的行数*/    解释: 在第二行的时候就可以显示省略号

-webkit-line-clamp: 2;

/* 设置或检索伸缩盒对象的子元素的排列方式 */       

-webkit-box-orient: vertical;

这个多行省略的效果: 更推荐让后台人员来做这个效果, 后台可以设置多少字数, 操作更简单.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值