首页用html制作音乐播放界面，要求界面布局合理，有播放画面、有歌名有歌词。

用html制作音乐播放界面，要求界面布局合理，有播放画面、有歌名有歌词。

时间: 2024-01-22 15:17:47 浏览: 56

以下是一个简单的 HTML 音乐播放界面示例： ```html <!DOCTYPE html> <html> <head> <title>音乐播放器</title> <style type="text/css"> /* 设置背景 */ body { background-color: #f1f1f1; font-family: Arial, sans-serif; padding: 0; margin: 0; } /* 设置播放器外框架 */ #player { background-color: #fff; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); margin: 50px auto; padding: 20px; width: 500px; } /* 设置播放器控件 */ #player audio { display: block; margin: 0 auto; width: 100%; } #player h2 { margin-top: 0; text-align: center; } #player p { margin: 10px 0; text-align: center; } #player .lyrics { height: 200px; overflow-y: scroll; padding: 10px; text-align: center; } </style> </head> <body> <div id="player"> <audio controls src="music.mp3"></audio> <h2>歌曲名</h2> <p>歌手名</p> <div class="lyrics"> <p>歌词内容</p> </div> </div> </body> </html> ``` 你可以将上述代码保存为一个 `.html` 文件并在浏览器中打开来查看效果。该示例使用了 HTML5 中的 `<audio>` 标签来播放音乐，同时使用 CSS 来布局和美化播放器界面。

阅读全文