拓展：前端开发尽可能的降低对服务器的请求。
1，css精灵
将项目中的所有小图放到一张大图上面，减少页面对服务器的请求。
1.1精灵图的使用步骤
创建一个盒子，设置盒子尺寸与小图尺寸相同；（一般精灵图都用行内标签，span;b;为了设置宽高，需要调整块i)
将精灵图设置为盒子的背景图；
修改背景图的位置。 (核心重点：定位背景标签background-position:0 0;)
2，背景图的缩放（background-size）
background-size：宽度 高度；（ 数字+px；百分比；contain包含；cover覆盖）
数值+px，当
百分比：
contain：包含（将图片等比例缩放，当宽或者高有一边与盒子尺寸相同时停止缩放，可能导致图片覆盖不全，有留白）
cover：覆盖（将图片等比缩放，当宽和高全部与盒子尺寸相同时停止缩放，可能导致图片超出盒子显示不全）
1.3背景图片缩放的复合属性
background：color image repeat position/size；
3，盒子阴影（box-shadow）
属性值：（box-shadow:h-shadow v-shadow blur spread color inset;)
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }
h-shadow：必须，水平偏移值，允许负值。数值+px
v-shadow：必须，垂直偏移值，允许负值。数值+px
blur：可选，模糊度 。 数值+px
spread：可选，阴影扩大 。 数值+px
color：可选，颜色
inset：可选，阴影改为内部阴影(默认值是外部阴影，写outset会报错)
4，过渡（transition）
4.1定义：transition:all/具体的属性 数字+s（秒）；
all:过渡所有的属性
width：过渡具体对应的属性
4.2写法：过渡给谁就给谁定义transtion。（opacity：0；渐变透明）
<style>
.box {
width: 400px;
height: 400px;
background-color: aqua;
transition:all 数字+s；
}
.box:hover {
widght：600px；
background-color：skybule；
opacity：0；（透明度）
}
</style>
......
<div class="box">
</div>
5，搜索引擎优化（SEO）
5.1作用：让浏览器搜索排名靠前。
5.2提升SEO排名的常见方法：
1.竞价排名
2，将网页制作成html后缀
3，标签语义化（在合适的地方使用合适的标签）
5.3 SEO的三大标签：
1，title：网页的标题标签
2.description：网页的描述标签
3，keywords：网页的关键标签
6,ICO图标（标题上显示的图片）
Favicon放在文件夹根目录，
用link：favicon来引入favicon.ico文件
