精灵图，字体图标，用户界面样式（鼠标样式，表单轮廓，表单域拖拽，文字对齐，省略号）

精灵图

原理： 将网页中的一些小背景图像整合到一张大图中，这样服务器就只需要一次请求。

background-position

用ps 的矩形工具，测出 宽高 和xy 坐标。

因是精灵图移动 找到盒子的位置，所以 x,y 写负值

字体图标 iconfont

主要用于显示网页中 通用，常用的一些小图标

展示的是图标，本质是字体

字体图标的下载：

icomoon 字体 http://icomoon.io

阿里 iconfont 字体 http://www.iconfont.cn/

1.把下载包里面的 fonts 文件夹放入页面根目录下，注意路径问题

2.在 CSS 样式中全局声明字体

​ 复制 style.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;
}

3.html 标签内添加小图标

打开 demo.html 文件

4.给标签定义字体。

新字体的追加

用户界面样式

更改用户鼠标样式

cursor:default； 小白 默认

cursor: pointer; 小手

cursor: move; 移动

cursor: text; 文本

cursor: not-allowed; 禁止

表单轮廓

给表单 添加 outline:0; 或者 outline: none; 可以去掉默认的蓝色边框

input{ outline: none}

防止表单域拖拽

文本域右下角不可以拖拽

textarea{ resize: none}

文字和图片/表单的对齐

vertical-align:经常用于 设置图片 或者 表单（行内块元素）和 文字的垂直对齐。

设置一个元素的垂直对齐方式，但只针对 行内元素和行内块元素

vertical-align: baseline; 默认，元素在父元素的基线上。

vertical-align:top; 把元素的顶端与行中的最高元素的顶端对齐。

vertical-align: middle; 把元素放在父元素的中部。

vertical-align: bottom; 把元素的顶端与行中的最低元素的顶端对齐。

图片底部默认空白缝隙

原因：行内块元素会和文字的基线对齐。

解决方法：

1.给图添加 vertical-align:middle; /top;/bottom;等

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

溢出的文字省略号显示

布局技巧