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

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

时间: 2024-01-13 16:04:21 浏览: 95

好的，以下是一个简单的音乐播放界面的 HTML 代码示例，包含播放画面、歌名、歌词和一些创意设计。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Music Player</title> <style> body { background-color: #333; color: #fff; font-family: Arial, sans-serif; text-align: center; } h1 { font-size: 32px; margin-top: 50px; } #music-video { width: 800px; height: 450px; margin: 50px auto; background-color: #000; position: relative; } #play-button { width: 80px; height: 80px; background-color: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; } #play-button:hover { background-color: #f0f0f0; } #song-info { margin-top: 50px; } #lyrics { margin-top: 50px; font-size: 24px; line-height: 36px; max-width: 800px; margin: 0 auto; text-align: left; white-space: pre-line; } #lyrics:hover { color: #f00; } #lyrics::before { content: "🎤 "; } </style> </head> <body> <h1>Music Player</h1> <div id="music-video"> <div id="play-button"></div> </div> <div id="song-info"> <h2>Song Title</h2> <p>Artist Name</p> </div> <div id="lyrics"> Lyrics will appear here. </div> </body> </html> ``` 代码中的样式和布局可以根据实际需要进行修改和扩展。其中，播放按钮和歌词添加了一些小的创意设计，让界面更加生动有趣。

阅读全文