#博学谷IT学习技术支持#
CSS样式补充
（一）精灵图
1、场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
2、优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
3、例如：需要在网页中展示8张小图片
8张小图片分别发送 → 发送8次
合成一张精灵图发送 → 发送1次
4、精灵图的使用步骤
（1）. 创建一个盒子
（2）. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
（3）. 将精灵图设置为盒子的背景图片
（4）. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
（二）背景图片大小
1、作用：设置背景图片的大小；
2、语法：background-size：宽度 高度；
3、background连写拓展
（1）注意点：
background-size和background连写同时设置时，需要注意覆盖问题
（2）解决：
A、 要么单独的样式写连写的下面
B、 要么单独的样式写在连写的里面
（三）文字阴影：text-shadow
作用：给文字添加阴影效果，吸引用户注意
（四）盒子阴影：box-shadow
作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
（五）过渡：transition
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
注意点：
1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同的
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
项目前置认知
1.网页与网站的关系
A、 网页是网站中的每一“页”
B、网站是提供特定服务的一组网页集合。
2.骨架结构标签
A、 <!DOCTYPE html>的作用是什么？
文档类型声明，告诉浏览器该网页的 HTML版本
B、设置网页的语言为中文应该如何操作？
<html lang="zh-CN">
C、 开发中统一使用的字符编码是什么？
<meta charset="UTF-8">
3.SEO三大标签
（1）title：网页标题标签
（2）description：网页描述标签
（3）keywords：网页关键词标签
4. ico图标设置
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
5. 版心
场景：让页面的主体内容约束在网页中间
项目结构搭建
(一)文件和目录准备
1. 新建项目文件夹，在VScode中打开
在实际开发中，项目文件夹不建议使用中文
所有项目相关文件都保存在项目文件夹目录中
2. 复制 favicon.ico 到项目文件夹目录
一般习惯将ico图标放在项目根目录
3. 复制 images 和 uploads 目录到项目文件夹目录中
images ：存放网站 固定使用 的图片素材，如：logo、样式修饰图片… 等
uploads：存放网站 非固定使用 的图片素材，如：商品图片、宣传图片…等
4. 新建 index.html 在根目录
5. 新建 css 文件夹保存网站的样式，并新建以下CSS文件：
base.css：基础公共样式
common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
index.css：首页样式
（二）基础公共样式
1、场景：一般项目开始前，首先会 去除掉浏览器默认样式，设置为 当前项目需要的初始化样式
2、作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发
四、总结
今天的分享就到这咯，大家一起加油学习呦！
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
