2020-12-02

学习内容：

学习产出：

1、元素的层级
如果定位元素层级是一样的，那么下边的元素会盖住上边的；
通过z-index属性可以设置元素的层级：指定一个正数作为值，该值会作为元素的层级，越高层级越高，对于没有开启定位的元素不能设置z-index；
父元素的层级再高，也不会盖住子元素；

2、设置元素的透明背景：
opacity：设置元素的透明背景，一个0-1之间的值
0：完全透明
1：完全不透明

3、背景一：
background-image：设置图片背景(默认左上角）
background-image：url（相对路径）
如果背景图片大于元素，会默认显示图片的左上角;
如果背景图片小于元素，会平铺，让图片充满元素；
可以同设置背景颜色和图片，背景颜色会作为背景图片的底色
background-repeat:

4、背景二：
设置背景图片的位置：background-position：

如果只设置一个值，另外一个值默认50%，可以设置负值，负值向左上移动
background-attachment ：设置背景图是否和页面一起滚动，一般是设置给body的背景图

一般设置了attachment属性的都是body的背景图片

5、按钮练习
超链接-将超链接变为块元素-给超链接设置背景图和大小-设置伪类（给不同伪类设置不同的图片）
但是在第一次切换图片时，会有一个闪烁，因为之前hover active没有被触发，所以图片没有被加载。所以可以将是三个状态的图片整合成一张图，并且在不同伪类下移动背景图片（使用background-position)。
图片整合技术：CSS-Sprite（精灵图，雪碧图）
好处：图片更小；只用发送一次请求，加载多次图片；

6、简写属性
background:#bfa url(img/1.jpg) center center no-repeat fixed;
没有顺序要求 ，也没有数量要求，没有设置的属性为默认值

7、雪碧图的制作和使用：
运用ps

8、表格简介:
table标签：tr表示一行；在tr里面写td创建单元格；默认没有边框；

合并单元格：
colspan：横向合并单元格 <td colspan="2"></td>
rowspan：纵向合并单元格

完成情况：完成
没有问题