共计 2536 个字符，预计需要花费 7 分钟才能阅读完成。
11、界面款式
常见的界面款式：
- 更改用户的鼠标款式
- 表单轮廓
- 避免表单域的拖拽
- 解决图片或表单问题
- 溢出操作
11.1 鼠标款式 cursor
li {
/* 小手款式 */
cursor: pointer;
}设置在对象上挪动时的鼠标款式：
default：小白（默认）pointer：小手`move：：挪动text：文本not-allowed：禁止
11.2 轮廓线 outline
给表单增加 outline:0 或 outline:onne 款式后，就能够去掉默认的蓝色边框
input 文本框就会这个默认的蓝色边框款式，可用 outline:0 去除掉
input {outline: 0;}11.3 避免拖拽文本域 resize
文本域 textarea 默认是能够拖拽的，然而理论开发中，是不容许的，可增加 resize: none;
textarea {resize:none;}11.4 vertical-align 属性利用
1、设置图片或表单域文字垂直对齐
vertical-align 翻译过去就是垂直对齐，常常用于设置图片表单（行内块元素）与文字垂直对齐
vertical-align: baseline | top | middle | bottombaseline：元素搁置在父元素的基线上， 默认top：把元素的顶端与行中最高元素的顶端对齐middle：把次元素搁置在父元素的中部bottom：把元素的底端与最低元素的底端对齐
<style>
img {
/* 两头对齐 */
vertical-align: middle;
}
</style>
<body>
<img src="..." alt=""> 我失去过
</body>2、解决图片底部默认空白间隙问题
Bug：图片底部会有一个空白间隙，起因是行内块元素会和文字的底部基线对齐
解决办法：
- 给图片 img 增加：
vertical-align: top | middle | bottom（提倡应用） - 把图片转换为块级元素
display: block;
11.5 溢出文字处理
1、单行文本溢出
- 强制在一行内显示：
white-space: nowrap;（默认是normal，主动换行） - 超出的局部暗藏：
overflow: hidden; - 用省略号代替超出的局部：
text-overflow: ellipsis;
2、多行文本溢出
1. 超出的局部暗藏：overflow: hidden;
2. 用省略号代替超出的局部：text-overflow: ellipsis;
3. 弹性伸缩盒子模型显示：display: -webkit-box;
4. 限度在一个块级元素显示的文本行数：-webkit-line-clamp: 2
5. 设置或检索伸缩盒子的对象的子元素的排序形式：-webkit-box-orient: vertical- 多行文本溢出显示省略号，有较大的兼容性问题，适宜 webKit 浏览器或挪动端
- 更举荐让后盾人员来做这个
12、精灵图
在网页中，往往都会有一些图片来作为润饰，然而有些网站图片过多时（如 电商网页），服务器会频繁地接管和发送图片，造成服务器压力过大，升高页面的加载速度
为了解决这个问题，呈现了 CSS 精灵技术，所谓精灵技术，就是将一些小图片整合到一张大图片上，这样服务器只须要发送一次申请即可
所以，精灵技术的目标就是：为了无效地缩小服务器频繁接管和发送申请的次数，进步页面的加载速度
留神：精灵图针对的是小图片
精灵图的应用
- 获取背景图片的带大小，以及坐标
- 利用
background-position挪动到图片的地位 - 挪动的间隔就是图片的 x 和 y 坐标；个别都是往左上角挪动，所以数值时负的
具体方法：
- 用
width和height设置图片的大小（真是的图片大小） - 用
background导入图片，设置具体坐标
栗子：
.sprites {
width: 60px;
height: 60px;
margin: 50px auto;
/* 背景大图片 不平铺 小图片的坐标 */
background: url(...) no-repeat -155px -106px;
}13、字体图标 iconfont
精灵图有诸多长处，然而毛病也显著：图片大、制作麻烦、图片自身放大和放大会失真
所以字体图标就是来补救精灵图的毛病，长处：
- 轻量级：图片小
- 灵活性：实质是文字，能够扭转色彩、增加暗影、通明成果、旋转等等
- 兼容性：简直反对所有浏览器
精灵图和字体图标就是利用在小图片上：
- 简单的小图片，用精灵图
- 简略的小图片，用字体图标
实质：是文字
应用：
- 字体图片下载
- 引入（引入到 html 页面中）
- 字体图片的追加
13.1 字体图片下载
icomoon网站：icomoon 字库：http://icomoon.io- 阿里字库：
http：//www.iconfont.cn
13.2 字体图片引入
三个步骤：
- 把下载包外面的 fonts 文件夹放入页面根目录里下
-
在 CSS 款式中全局申明字体：简略了解吧这些字体文件通过 CSS 引入到咱们页面中
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?p4ssmb'); src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } -
html 标签内增加小图标（复制小图标到标签中）
<span> </span>
14、CSS 三角
css 三角 即用纯 css 做一个三角，不用做成图片或者字体图标
其实是利用了边框
- 首先设置
width: 0; height: 0; - 而后给它设置一个边框，留神：色彩为通明
- 而后给任意一侧的边框上色就能够了
.one {
width: 0;
height: 0;
/* 设置边框为通明色 */
border: 100px solid transparent;
/* 令其上边框为粉色 */
border-top-color: pink;
}
正文完
