0基础学习网页结构编程

目录

一、雪碧图/精灵图（图片整合技术）

二、渐变

1、linear-gradient线性渐变（参数逗号隔开）

2、repeat-linear-gradient重复的线性渐变（和上面使用方法一样）

3、radial-gradient放射性渐变

---

！！浏览器编译网站是有顺序，显示html结构，然后再加载外部资源；例如css文件，图片，数据请求
背景图片是以外部资源的形式加载进网页的
浏览器每加载一个外部资源就需要一个单独的请求，但是我们外部资源并不是同时加载，浏览器会在资源使用才去加载资源
第一个练习：分了三次请求 
问题： （1）第一次切换图片时，会发现图片有一个非常快的闪烁
          （2）网站性能不好！！

一、雪碧图/精灵图（图片整合技术）

解决图片闪烁的问题，提高网站的性能，可以使用雪碧图
实现原理：将多张图片整合在一起，然后一次性引入到网站中，减少网站请求，以提高网站性能

实现步骤：
1、先确定好使用哪个图片或图标
2、测量图片的大小
3、根据测量的结果区建一个盒子对外展示
4、将图片作为背景图引入到盒子中
5、设置图片的位置，以正确的显示图片（移动整个图片，在窗口显示各个部分）
background-position：水平 垂直；
！！！面试题：请你从提高网站性能上，提出建议（精灵图的使用）！！！

二、渐变

渐变色：从一个颜色向另一个颜色过度；不是单纯的背景色，可以看出是一个图片

background-img：；
可选值：

1、linear-gradient线性渐变（参数逗号隔开）

参数：
（1）参数1方向：
~to left 向左渐变    to right 向右渐变
~度数xxdeg  表示角度，度数，会更灵活，正值顺时针，负值逆时针
~turn  表示圈，1turn表示360度

（2）参数2直接放颜色(可选多个颜色)：red，yellow   
注意：
~可以写多个颜色，默认情况下，颜色是均分的；也可以手动设置占比多少（在颜色后面写百分比或者大小px）

2、repeat-linear-gradient重复的线性渐变（和上面使用方法一样）

3、radial-gradient放射性渐变

圆心的形状，默认情况是根据元素形状计算的
参数：

（1）参数1圆心形状、位置
①circle  圆心为圆形    ellipse椭圆
②设置宽高大小px   ； at px px   设置圆心位置

（2）参数2颜色