htmlcss音乐盒子模型代码

以下是一个简单的 HTML/CSS 音乐盒子模型代码示例：

HTML 代码：

<div class="music-box">
  <div class="controls">
    <button class="play-btn">Play</button>
    <button class="pause-btn">Pause</button>
  </div>
  <audio src="music.mp3"></audio>
</div>

CSS 代码：

.music-box {
  width: 300px;
  height: 100px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.controls {
  margin-right: 10px;
}

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #3e8e41;
}

audio {
  display: none;
}

解释：

- `.music-box` 定义音乐盒子的样式，包括背景颜色、边框、圆角、居中等。
- `.controls` 定义控制按钮的样式，包括向右对齐等。
- `button` 定义按钮的样式，包括背景颜色、边框、圆角等。
- `audio` 定义音乐文件的样式，设置为不可见。

JavaScript 代码：

const playBtn = document.querySelector('.play-btn');
const pauseBtn = document.querySelector('.pause-btn');
const audio = document.querySelector('audio');

playBtn.addEventListener('click', () => {
  audio.play();
});

pauseBtn.addEventListener('click', () => {
  audio.pause();
});

解释：

- `const playBtn = document.querySelector('.play-btn');` 获取 Play 按钮的元素。
- `const pauseBtn = document.querySelector('.pause-btn');` 获取 Pause 按钮的元素。
- `const audio = document.querySelector('audio');` 获取音乐文件的元素。
- `playBtn.addEventListener('click', () => { audio.play(); });` 给 Play 按钮添加点击事件，点击后播放音乐。
- `pauseBtn.addEventListener('click', () => { audio.pause(); });` 给 Pause 按钮添加点击事件，点击后暂停音乐。