剪映音乐向上移动像酷狗音乐

一样

1.在页面上新建一个div，设置它的宽高和位置，并将它设置为绝对定位；

2.在div中放入一个音乐播放器，如酷狗音乐；

3.使用CSS定义一个div的z-index属性，将其值设置为大于div中放入的音乐播放器的z-index值，以便让div中放入的音乐播放器在启塌div上方；

4.使用javascript来监听鼠标的 *** 作，比如当鼠标移动悄槐圆到div上时，就会触发明茄javascript来调整div的位置，使其在屏幕上方显示，从而实现悬浮音乐播放器的效果。

网页设计与制作音乐播带亮放界面需要在页面中插入HTML5的音茄磨频标签audio，即可播放音乐。

工具／原料：

华硕DN20

win10

浏览器1.026

1、先打开常用的网页设计的软件，然后新建一个网页文件。

2、进行一个简单的页面布局，让音乐播放器显示在网页的中间。并添加简单的样式。

<style type="text/css">

#music_player{width:400pxheight:150pxbackground:#ff9966margin:200px auto}

</style>

<div id="music_player" class=""></div>

3、在浏览器中进程预览，看下位置是否合适。

4、利用HTML5的标签audio标签进行音乐播放蠢纳宽器的设置。

<div id="music_player" class="">

<audio controls>

<source src="D:\KuGou\苍鹰－拜秦陵．mp3" type="audio/mpeg">

</audio>

</div>

5、播放器设置好以后，我们在＜source src="歌曲地址＂＞插入歌曲的地址，就可以自动播放了。例如：

<audio controls>

<source src="D:\KuGou\苍鹰－拜秦陵．mp3" type="audio/mpeg">

</audio>

6、在浏览者进行浏览，就可以发现点击播放后就响起音乐来了。

---