用html写一个音乐页面
时间: 2023-10-05 14:12:27 浏览: 46
好的,以下是一个简单的音乐页面示例,包括歌曲封面、歌曲名称、歌手名称、歌曲播放器和歌词显示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音乐页面</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1, h2 {
text-align: center;
}
#song-cover {
display: block;
margin: 0 auto;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #ccc;
background-image: url("https://example.com/song-cover.jpg");
background-size: cover;
background-position: center;
}
#song-title, #song-artist {
text-align: center;
margin: 10px;
}
#song-player {
display: block;
margin: 0 auto;
width: 400px;
height: 80px;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 5px;
text-align: center;
line-height: 80px;
font-size: 24px;
}
#lyrics {
margin: 20px;
white-space: pre-wrap;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<h1>歌曲名称</h1>
<div id="song-cover"></div>
<h2 id="song-title">歌曲名称</h2>
<h2 id="song-artist">歌手名称</h2>
<audio id="song-player" controls>
<source src="https://example.com/song.mp3" type="audio/mpeg">
您的浏览器不支持 HTML5 音频标签。
</audio>
<div id="lyrics">歌词</div>
</body>
</html>
```
你可以将其中的图片和音频链接替换为你自己的资源链接,以自定义你自己的音乐页面。
相关推荐
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)