项目样式补充
精灵图
精灵图的介绍：
> 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图。
> 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
> 例如：需要在网页中展示8张小图片
· 8张小图片分别发送 → 发送8次
· 合成─张精灵图发送 → 发送1次
精灵图的使用步骤：
1. 创建一个盒子，设置盒子的尺寸和小图尺寸相同
2．将精灵图设置为盒子的背景图片
3. 修改背景图位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的 background-position: x y;
Document span { display: inline-block; width: 18px; height: 14px; background-color: pink; background-image: url('./images/taobao.png'); /* 背景图位置属性：改变背景图的位置 */ /* 水平方向位置 垂直方向位置 */ /* 想要向左侧移动图片，位置取负数 */ background-position: -3px 0; } b { display: block; width: 25px; height: 21px; background-color: green; background-image: url(./images/taobao.png); background-position: 0 -90px; } <!-- 
--> 背景图片大小
> 作用：设置背景图片的大小
> 语法：background-size:宽度高度;
> 取值：
background连写拓展：
> 完整连写：background: color image repeat position/size;
> 注意点：
· background-size 和 background 连写同时设置时，需要注意覆盖问题
> 解决：
1. 要么单独的样式写连写的下面
2．要么单独的样式写在连写的里面
Document div { width: 500px; height: 400px; background-color: pink; background-image: url(../小兔鲜/uploads/history_goods_1.jpg); background-repeat: no-repeat; /* background-size: 319px; */ /* background-size: 50%; */ /* 如果图的宽或高与盒子的尺寸相同了，另一个方向停止缩放 -- 导致盒子可能有留白 */ /* background-size: contain; */ /* 保证宽或高和盒子尺寸完全相同，导致图片显示不全 */ /* background-size: cover; */ /* 工作中，图的比例和盒子的比例都是相同的，contain 和 cover 效果完全相同 */ } 文字阴影
> 作用：给文字添加阴影效果，吸引用户注意，体现页面的制作细节
> 属性名：text-shadow
> 取值：
盒子阴影
> 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
> 属性名：box-shadow
> 取值：
Document div { width: 300px; height: 300px; background-color: pink; box-shadow: 5px 10px 20px 10px green inset; /* 注意：外阴影，不能添加outset，添加了会导致属性报错 */ /* box-shadow: 5px 10px 20px 10px green outset; */ } 过渡
> 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
> 属性名：transition
> 常见取值：
> 注意点：
1. 过渡需要：默认状态和hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同的
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
Document /* 过渡配合hover使用，谁变化谁加过渡属性 */ .box { width: 200px; height: 200px; background-color: pink; /* 宽度200，悬停的时候宽度600，花费1秒钟 */ /* transition: width 1s, background-color 2s; */ /* 如果变化的属性多，直接写all，表示所有 */ transition: all 2s; } .box:hover { width: 600px; background-color: skyblue; } 项目前置认知
网页与网站的关系：
“网站是由网页集合而成的,而大家通过浏览器所看到的画面就是网页,网页说具体了是一个html文件,浏览器是用来解读这份文件的。也可以这样说:网页是有许多html文件集合而成。
骨架结构标签：
DOCTYPE文档说明：
> 文档类型声明，告诉浏览器该网页的HTML版本
网页语言：
> 标识网页使用的语言
> 作用：搜索引擎归类＋浏览器翻译
> 常见语言：zh-CN简体中文 / en英文
字符编码（了解)：
> 标识网页使用的字符编码
> 作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
> 常见字符编码：
1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
2. GB2312: 6000＋汉字
3. GBK: 20000+汉字
> 注意点：开发中统一使用UTF-8字符编码即可
Document SEO三大标签：
SEO简介：
> SEO (Search Engine Optimization)：搜索引擎优化
> 作用：让网站在搜索引擎上的排名靠前
> 提升SEO的常见方法：
1. 竞价排名
2. 将网页制作成html后缀
3. 标签语义化(在合适的地方使用合适的标签)
4. ......
SEO三大标签:
1. title：网页标题标签
2. description：网页描述标签
3. keywords：网页关键词标签
京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！ ico图标设置：
> 场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
> 常见代码：
