帮我用html+css写一个专辑详情页，并有播放歌曲功能
时间: 2024-05-04 14:17:06 浏览: 5
好的，以下是一个简单的专辑详情页的示例代码，包括播放歌曲功能：
```html
<!DOCTYPE html>
<html>
<head>
<title>专辑详情页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.album-cover {
float: left;
margin-right: 20px;
}
.album-info {
overflow: hidden;
}
.album-info h2 {
margin-top: 0;
}
.track-list {
margin-top: 30px;
}
.track-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.track-item:hover {
background-color: #f5f5f5;
}
.track-item .play-btn {
background-color: #f44336;
color: #fff;
border: none;
padding: 5px 10px;
margin-right: 10px;
cursor: pointer;
}
.track-item .play-btn:hover {
background-color: #d32f2f;
}
</style>
</head>
<body>
<header>
<h1>专辑详情页</h1>
</header>
<div class="container">
<div class="album-cover">
<img src="album-cover.jpg" alt="专辑封面">
</div>
<div class="album-info">
<h2>专辑名称</h2>
<p>歌手名称</p>
<p>发行时间：2021-01-01</p>
<p>流派：流行</p>
<p>标签：欢快，动感</p>
</div>
<div class="track-list">
<h3>曲目列表</h3>
<div class="track-item">
<button class="play-btn">播放</button>
<div class="track-name">歌曲名称1</div>
<div class="track-duration">3:30</div>
</div>
<div class="track-item">
<button class="play-btn">播放</button>
<div class="track-name">歌曲名称2</div>
<div class="track-duration">4:10</div>
</div>
<div class="track-item">
<button class="play-btn">播放</button>
<div class="track-name">歌曲名称3</div>
<div class="track-duration">2:45</div>
</div>
<!-- 更多曲目... -->
</div>
</div>
<script>
// 获取所有播放按钮
var playBtns = document.querySelectorAll('.play-btn');
// 循环遍历所有播放按钮
playBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
// 获取当前按钮所在的曲目名称和时长
var trackName = btn.nextElementSibling.textContent;
var trackDuration = btn.nextElementSibling.nextElementSibling.textContent;
// 在控制台输出播放信息
console.log('播放：' + trackName + '，时长：' + trackDuration);
});
});
</script>
</body>
</html>
```
注：这只是一个简单的示例代码，实际项目中可能需要更复杂的功能和样式，还需要更多的优化和测试。
相关推荐
最新推荐
html5+css3面试题答案.docx
html5+css3面试题答案.docx
html+css 选择题50（加答案）
html+css 选择题（加答案）,适合学过html和css的人加强和巩固知识（内有50个选择题）。
html+css 实现简易导航栏功能
主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧
html+css实现数据图表的展示效果
一下收集分享的数据图表的展示效果，是完全用html和css来实现的。通过仔细研究学习这些案例对于我们学习css会有很大帮助的。
计算机专业毕业设计范例845篇jsp2118基于Web停车场管理系统的设计与实现_Servlet_MySql演示录像.rar
博主给大家详细整理了计算机毕业设计最新项目,对项目有任何疑问(部署跟文档),都可以问博主哦~ 一、JavaWeb管理系统毕设项目【计算机毕设选题】计算机毕业设计选题，500个热门选题推荐,更多作品展示 计算机毕业设计|PHP毕业设计|JSP毕业程序设计|Android毕业设计|Python设计论文|微信小程序设计
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MySQL数据库性能提升秘籍：揭秘性能下降幕后真凶及解决策略
# 1. MySQL数据库性能优化概述**
MySQL数据库性能优化是一项至关重要的任务，可以显著提高应用程序的响应时间和整体用户体验。优化涉及识别和解决影响数据库性能的因素，包括硬件资源瓶颈、软件配置不当和数据库设计缺陷。通过采取适当的优化策略，可以显著提升数据库性能，满足业务需求并提高用户满意度。
# 2. MySQL数据库性能下降的幕后真凶
### 2.1 硬件资源瓶颈
#### 2.1.1 CPU利用率过高
**症状：
如何在unity创建按钮
在 Unity 中创建按钮的步骤如下：
1. 在 Unity 中创建一个 UI Canvas，选择 GameObject -> UI -> Canvas。
2. 在 Canvas 中创建一个按钮，选择 GameObject -> UI -> Button。
3. 在场景视图中调整按钮的位置和大小。
4. 在 Inspector 中设置按钮的文本、颜色、字体等属性。
5. 添加按钮的响应事件，选择按钮，在 Inspector 的 On Click () 中添加相应的方法。
这样就可以创建一个按钮了，你可以在游戏中使用它来触发相应的操作。
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。