html音乐播放器界面设计,网页设计音乐播放界面
Hello，大家好，我是wangzirui32，今天我们来学习如何给自己设计一个简单的网页音乐播放器。
开始学习吧！
1. 项目架构
结构如下，请自行创建文件：
demo/style.cssplayer.html 2. player.html 编写代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>wangzirui32专属的网页音乐播放器</title> <!-- 导入CSS文件 --> <link rel="stylesheet" rel="external nofollow" href="style.css" type="text/css" /></head><body> <div id="music-player"> <h1>-----wangzirui32专属的网页音乐播放器-----</h1> <h4>当前歌曲：Seve</h4> <audio controls> <!-- src为音乐的路径 --> <source src="D:/myMusic/music.mp3" type="audio/mpeg"> </audio> </div></body></html> 3. style.css 编写接下来继续编写css代码，如下：
#music-player { width: 600px; /* 宽为600px */ height: 300px; /* 长为300px */ background: #FFA500; /* 背景设为橙色 */ border-radius: 25px; /* 设置圆角 */}#music-player h1 { color: #ADD8E6 /* 设置颜色为蓝色 */} 4. 结果展示如图：
这个程序你还可以拓展，可以修改一下css样式，使其个性化；也可以添加多个歌曲，使其成为一个歌单。
好了，这就是今天的全部内容，喜欢的可以点个收藏，我们下次再见！