CSDN个人博客 :https://blog.csdn.net/weixin_44538322/article/details/86546707
CSDN专业技术论坛:https://bbs.csdn.net/
学习了几个月的前端,总会遇到一些令自己苦恼的问题,总会用几十种方法尝试去解决一个问题,也因为这样,我们的技术才能提高,解决问题的方法才能广泛。代码不是照搬照用,而是活学活用,一句代码放在不同的地方会有不一样的效果。
下面分享一下一些简单的小代码常识:
一、网页标题图标设置:
1. 选择一张图片,将图片的后缀改为“ico”格式;

2. 将link 标签的rel="stylesheet"属性改为rel="icon",链接图标;

3. 网页图标效果完成;

二、CSS3的transform属性容易覆盖(同一个类内只允许出现一个transform属性):
1.用transform属性使用实现多种特效的书写方法;

2.在一个类内写了一个transform属性,再加上一个关键帧动画效果;这时如果关键帧动画里也写了transform属性,这样属性也会产生冲突;

三、图层样式层次不一,浮动定位造成的影响;
正常情况应该是弹窗样式在最上面,文本样式中间,背景样式在最下面,这就是图层样式层次不一

这时我们就要规划他们的图层顺序,这用到一个新的属性“z-index”,z-index属性的初始值为0,值越大,他的图层就在越上面,所我们就给弹窗样式z-index:2,文本样式z-index:1,背景样式z-index:0;

实现的效果如下:

四、音乐播放器
Audio标签是音乐播放器标签,这个标签有自动播放功能,无限循环播放功能,播放器控制台功能等等。可是当网页外部有音源正在播放时,Audio标签的自动播放功能将失效,需点击控制台才能播放,若是作为没有控制台的背景音乐将彻底失效。

Object标签也是音乐播放器标签,这个标签可以在标签内设置播放器控制台的宽高,自带自动播放功能,外部音源不冲突。

结合上面两个标签,就可以达到与外部音源不冲突,自动播放和无限循环播放的背景音乐。

有兴趣的也可以玩一下。
如有错漏,感谢纠正!
CSDN专业技术论坛:https://bbs.csdn.net/
学习了几个月的前端,总会遇到一些令自己苦恼的问题,总会用几十种方法尝试去解决一个问题,也因为这样,我们的技术才能提高,解决问题的方法才能广泛。代码不是照搬照用,而是活学活用,一句代码放在不同的地方会有不一样的效果。
下面分享一下一些简单的小代码常识:
一、网页标题图标设置:
1. 选择一张图片,将图片的后缀改为“ico”格式;

2. 将link 标签的rel="stylesheet"属性改为rel="icon",链接图标;

3. 网页图标效果完成;

二、CSS3的transform属性容易覆盖(同一个类内只允许出现一个transform属性):
1.用transform属性使用实现多种特效的书写方法;

2.在一个类内写了一个transform属性,再加上一个关键帧动画效果;这时如果关键帧动画里也写了transform属性,这样属性也会产生冲突;

三、图层样式层次不一,浮动定位造成的影响;
正常情况应该是弹窗样式在最上面,文本样式中间,背景样式在最下面,这就是图层样式层次不一

这时我们就要规划他们的图层顺序,这用到一个新的属性“z-index”,z-index属性的初始值为0,值越大,他的图层就在越上面,所我们就给弹窗样式z-index:2,文本样式z-index:1,背景样式z-index:0;

实现的效果如下:

四、音乐播放器
Audio标签是音乐播放器标签,这个标签有自动播放功能,无限循环播放功能,播放器控制台功能等等。可是当网页外部有音源正在播放时,Audio标签的自动播放功能将失效,需点击控制台才能播放,若是作为没有控制台的背景音乐将彻底失效。

Object标签也是音乐播放器标签,这个标签可以在标签内设置播放器控制台的宽高,自带自动播放功能,外部音源不冲突。

结合上面两个标签,就可以达到与外部音源不冲突,自动播放和无限循环播放的背景音乐。

有兴趣的也可以玩一下。
如有错漏,感谢纠正!