CSS---用户界面样式

什么是界面样式?

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

        更改用户的鼠标样式

        表单轮廓

防止表单域拖拽

鼠标样式 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;

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