内容

对HTML新增的video和audio标签进行分析

结构伪类nth-child和nth-of-type的二者的用法区别

background-size的使用

视频

针对视频有两种方案

1. 没有兼容性的 将视频文件上传到第三方网站获取其分享代码放到自己的页面中即可

• 优点：没有兼容性
• 缺点：有广告植入

2. 使用H5新增的video方法

<video src="视频路径">
</video>

• 优点：没有广告
• 缺点：有兼容性，一般运用在手机端

video标签的常用属性(音频的使用类似)

具体使用如图:

结构伪类选择器

结构伪类选择器主要是为了解决不破坏HTML结构而发明的,如在一个有li中选择其中某一个li,这个时候结构伪类选择器就发挥了作用

注意: li:nth-child(5)或者是li:nth-of-type(5)都是交集选择器,从后往前找,li:nth-child(5)具体就是---兄弟排行老五,并且还是li,如果发现不是,则不选中),li:nth-of-type(5)---则是在li中选排行老五的标签

1. nth-child():

选择第五个li

li:nth-child(5)

找前10个li/找后10个li(高级用法)

li:nth-child(-n+10)  li:nth-child(n+10)

找第一个和最后一个

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Wpx1dXL-1596090333539)(C:\Users\Administrator\Desktop\黑马学习\课程截图\7-30\老大和老小.png)]

总结: n从0开始,依次加1,最后得到索引就是我们选择的标签

2. nth-of-type:

如果子元素都是一样的,nth-child和nth-of-type用法一样,但是子元素不是同一类型的时候,二者就会有区别,以后推荐使用nth-of-type

找同类的兄弟,不是同类则忽略

查看如下问题—都不能选中

盒子阴影

背景图片的大小(background-size)

用来设置背景图片的大小

background-size: 图片宽度 图片高度;

取值说明

• 像素
• 百分比 (参照的是盒子的宽高)
• contain (包含) 前提是不能超出
• cover (完全覆盖) 前提是不能留白

contain和cover一般用在 盒子固定 但是图片不固定的情况 这种情况下,图片不能变形 , 同时尽可能让图片和盒子保持一样的大小 一般配合background-position: center 实现最终的效果

注意点

background-size也是background的一个子属性,可以支持连写:
background：color image repeat attachment position / size

在CSS3中，可以做到给一个盒子设置多个背景图片, 通过逗号分隔不同的背景图片即可。

background: url(images/d1.jpg) no-repeat right bottom,url(images/dd.jpg) no-repeat left bottom,pink url(images/d3.png) no-repeat center center; 

注意点：

• 每组背景属性之间需要通过逗号隔开

• 如果多组背景图片之间存在层叠关系，则前面的会覆盖在后面的背景图上

• 如果需要设置背景颜色，则背景颜色需要设置到最后一组中。