本文已参与「新人创作礼」活动，一起开启掘金创作之路。

10、精灵图

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

10.1精灵图使用方法

1.创建一个盒子，设置盒子的尺寸和小图尺寸相同

2.将精灵图设置为盒子的背景图片

3.修改背景图位置

通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position:xy

span{
display:inline-block；
  width：18px；
  height：24px；
  background-color：pink；
  background-image:ur1（）；
/*背景图位置属性：改变背景图的位置*/
/*水平方向位置垂直方向的位置*/
/*想要向左侧移动图片，位置取负数；*/
background-position:-3px 0；
}

b{
  display:block；
  width：25px；
  height：21px；
  background-color：green；
  background-image:ur1（./images/taobao.png）；
  background-position:0 90px；
}

11、背景图缩放

作用：设置背景图片的大小

语法：background-size：宽度高度；

取值

background连写：

完整连写：background:color image repeat position/size；

注意点：

·background-size和background连写同时设置时，需要注意覆盖问题

解决：

1.要么单独的样式写连写的下面

2.要么单独的样式写在连写的里面

12、盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名：box-shadow

取值：

13、过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名：transition

取值：

注意点：

1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果

2.transition属性给需要过渡的元素本身加

3.transition属性设置在不同状态中，效果不同的

<1>给默认状态设置，鼠标移入移出都有过渡效果

<2>给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

14骨架标签

14.1DOCTYPE文档说明

<！DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本

14.2网页语言

标识网页使用的语言

作用：搜索引擎归类+浏览器翻译

常见语言：zh-CN简体中文/en英文

14.3字符编码

标识网页使用的字符编码

作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码

常见字符编码：

1.UTF-8：万国码，国际化的字符编码，收录了全球语言的文字

2.GB2312：6000+汉字

3.GBK：20000+汉字

注意点：开发中统一使用UTF-8字符编码即可

15、SEO

15.1简介

简介：SEO（Search Engine Optimization）：搜索引擎优化

作用：让网站在搜索引擎上的排名靠前

提升SEO的常见方法：

竞价排名
将网页制作成html后缀
标签语义化（在合适的地方使用合适的标签）
......

15.2三大标签

1.title：网页标题标签

2.description：网页描述标签

3.keywerds：网页关键词标签

例：

<head>
<！--meta:desc|-->
<meta name="description" content="京东JD.coM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。">
<！--meta:kw-->
<meta name="keywords" content="网上购物，网上商城，家电，手机，电脑，服装，居家，母婴，美妆，个护，食品，生鲜，京东">
<tit1e>京东（JD.CoM）-正品低价、品质保障、配送及时、轻松购物！</title>
  </head>

使用三大标签可以提高搜索排名

16网页图标

场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

常见代码：

图标一般放在根目录

快捷键：

CSS进阶（三）