项目样式
CSS精灵图
定义：
所谓精灵图就是图片拼合技术，把多张小图片合成一张大图。
优点：
可以缓解加载时间过长的问题，缓解服务器压力，减少服务器发送和接收请求的次数，提高页面加载的性能。
使用步骤：
1、创建一个盒子，设置盒子的尺寸和小图的尺寸相同
2、将精灵图设置为盒子的背景图片
3、修改背景图位置
插入精灵图时用行内标签（行内标签的宽高不生效），然后将行内标签转换类型（display：inline-block）
//css
span{
display:inline-block;
width:*px;
height:*px;
background-image:url(图片相对路径)；
background-position:*px *px;
}
//html
背景图缩放
语法：background-size：宽度 高度；
取值：数字px（最常用）
百分比（相当于当前盒子自身的宽高百分比）
contain（将图片等比缩放，直至一条边铺满）
cover（覆盖，将图片铺满盒子）
盒子阴影
语法：box-shadow：
取值：h-shadow（必须写，水平偏移，允许负值）
v-shadow（必须写，垂直偏移，允许负值）
blur（模糊度）
spread（阴影扩大）
color（阴影颜色）
inset（默认是外阴影，不用写，写inset将阴影改为内部阴影）
过渡
作用：让元素样式慢慢变化，通常配合hover使用，增强网页交互体验
属性名：transition
参数：过度的属性：all（所有能过度的属性都过度）
过度的时长：数字+s（秒）
谁变谁加transition
项目前置认知
骨架标签结构
DOCTYPE文档说明：
文档类型声明，告诉浏览器该网页的HTML版本是HTML5版本。
字符编码：
标识网页使用的字符编辑
utf-8：万国码，国家化字符编码，收录了全球语言
SEO三大标签
seo：搜索引擎优化
作用：让网站在搜索引擎上排名靠前
提升seo的常见方法：
1，竞价排名
2，将网页制作成HTML后缀
3，标签语义化（在合适的地方使用合适的标签）
seo三大标签:
1, title:网页标题标签
2，description：网页描述标签
3，keywords：网页关键词标签
ico图标设置：
场景：显示在标签页标题左侧的小图标，用.ico格式的图标
常见代码：<link rel="shortcut icon" href="ico图片路径”type="image/x-icon">
写法：拼写linkfavicon，选择即可，通常图标放在网页的根目录下
项目结构搭建
一：文件和目录准备
1、新建文件夹
注：在实际项目开发中，项目文件夹不建议使用中文。所有的项目相关文件要放在新建文件夹的目录中
2、复制图片到新建文件夹目录中
注：一般习惯将ico图标放在项目根目录
3、创建images和uploads目录到新建文件夹中
注：images存放网站固定使用的图片素材
uploads存放网站非固定的图片素材
4、新建HTML文件在新文件夹内
5、新建css文件保存网站的样式，创建一下css文件
base.css：基础公共样式
common.css：改网站中多个页面相同模块的重复样式
index.css：首页独有的样式
