一、精灵图
1.1 精灵图的介绍
Ø 场景：项目中将多张小图片，合并成一张大图片,这张大图片称之为精灵图
Ø 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
Ø 例如：需要在网页中展示8张小图片
• 8张小图片分别发送 → 发送8次
• 合成一张精灵图发送 → 发送1次
1.2 精灵图的使用步骤
-
创建一个盒子
-
通过PxCook量取小图片大小，将小图片的宽高设置给盒子
-
将精灵图设置为盒子的背景图片（img会导致整个图片都展现出来）
-
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y （水平、垂直 00左上角，默认方向是右下）
备注：如果要取第n个测量据该元素的宽或高，改变background-position相应值，例如，竖着第三张图取0 -90px(高)
二、背景图片
2.1 背景图片大小
Ø 作用：设置背景图片的大小，
Ø 语法：background-size：宽度 高度；
Ø 取值：
（contain:如果图的宽或者高与背景尺寸有一个一样那么就会停止另一个方向缩放，会导致盒子有留白）
（cover:保证宽和高和盒子尺寸完全相同，会使图片部分消失）
2.2 background连写
background-size单独书写
三、阴影
3.1 文字阴影
Ø 作用：给文字添加阴影效果，吸引用户注意
Ø 属性名：text-shadow （方向都是右下）
Ø 取值：
3.2 盒子阴影（数字+px）
Ø 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
Ø 属性名：box-shadow
Ø 取值：
四、过渡
Ø 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
Ø 属性名：transition
Ø 常见取值：
Ø 注意点：
1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同的
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果（不可取）
五、骨架结构标签
5.1 DOCTYPE文档说明
Ø <!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本 (Html5)
Ø 注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签
5.2 网页语言
Ø 标识 网页 使用的 语言
Ø 作用：搜索引擎归类 + 浏览器翻译
Ø 常见语言：zh-CN 简体中文 / en 英文
5.3 字符编码
Ø 标识网页 使用的字符编码
Ø 作用：保存和打开的字符编码需要统一设置，否则可能会出现 乱码
Ø 常见字符编码：
-
UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
-
GB2312：6000+ 汉字
-
GBK：20000+ 汉字
Ø 注意点：开发中 统一使用 UTF-8 字符编码 即可
六、SEO简介
SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
- 提升SEO的常见方法：
-
竞价排名
-
将网页制作成html后缀
-
标签语义化（在合适的地方使用合适的标签）
SEO三大标签
-
title：网页标题标签
-
description：网页描述标签
-
keywords：网页关键词标签
有语义的布局标签
Ø 场景：在HTML5新版本中，推出了一些有语义的布局标签，可以增强网页的语义化
ico图标
Ø 场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
Ø 常见代码：（直接放在根目录下）
可以自己做： tool.520101.com/diannao/ico…
版心：
场景：把页面的主体内容约束在网页中间
作用：让不同大小的屏幕都能看到页面的主体内容
代码：
Ø 注意点：
• 版心类名常用：container、wrapper 等
CSS书写顺序
衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的规范（专业性）
不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯
注意点：
• 开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐 不要超过 3 个
