一、精灵图（重点）
1.1为什么需要精灵图
网页中往往会有很多的小背景图像作为修饰，当频繁向服务器发送请求时，服务器压力过大，降低加载速度。
使用精灵图的目的：减少服务器的请求次数，提高加载速度
例子
1.2精灵图的使用
1.主要针对于小的背景图片
2.借助于背景位置来实现----background-position
3.一般都是负值。
1.3精灵图的缺点
1.文件相对于来说还是较大
2.图片本身放大和缩小会失真
3.制作完成后想要更换非常复杂
案例
二、字体图标（重点）
2.1字体图标的优点
1.减少服务器请求，比一般的图像要小
2.本质就是文字，可以添加样式，css属性
3.兼容更多的浏览器
2.2 字体图标使用步骤
1.字体图标的下载
2.字体图标的引入 （引入到我们html页面中）
3.添加类名
2.3 字体图标的下载
推荐下载网站：
阿里巴巴矢量图标库：iconfont-阿里巴巴矢量图标库
2.4字体图标的引入
下载完毕之后，注意原先的文件不要删，后面会用。
-
把下载包里面的 fonts 文件夹放入页面根目录下
2.在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。
在你的项目文件夹中引入css文件，然后给标签添加iconfont和对应的类名
三、网页三角的实现
3.1介绍
网页中常见得三角可以直接用css代码实现，不用字体图标和精灵图
通过使用transparent透明度来实现上下左右四个方位的三角形
四、CSS 用户界面样式
4.1 什么是界面样式
更改一些用户操作样式，以便提高更好的用户体验。
更改用户的鼠标样式
表单轮廓
防止表单域拖拽
4.1.1 鼠标样式 cursor
li** {
cursor: pointer;
}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
4.1.2轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input** {
outline: none;
}
4.1.3防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的。
textarea{
resize: none;
}
五、vertical-align 属性应用
用于设置图片或者表单(行内块元素）和文字垂直对齐。但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align : baseline | top | middle | bottom
5.1图片、表单和文字对齐
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐
行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了
5.2 解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2.把图片转换为块级元素 display: block;
六、 溢出的文字省略号显示
6.1 单行文本溢出显示省略号
单行文本溢出显示省略号--必须满足三个条件：
\*1.先强制一行内显示文本/* white-space: nowrap;（默认 normal自动换行） \*2.超出的部分隐藏/* overflow: hidden; \*3.文字用省略号替代超出的部分/* text-overflow: ellipsis;
七、常见布局技巧
巧妙利用一个技术更快更好的布局：
-
margin负值的运用
-
文字围绕浮动元素
-
行内块的巧妙运用
-
CSS三角强化
7.1. margin负值运用
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加相对定位（保留位置），如果有定位，则加z
index）
7.2 文字围绕浮动元素
7.3 行内块巧妙运用
页码在页面中间显示:
-
把盒子转换为行内块， 之后给父级指定 text-align:center;
-
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中