在这个数字音乐盛行的时代，拥有一个个性化的QQ音乐网页不仅能够让你更好地享受音乐，还能让你的音乐之旅变得更加有趣。今天，我们就来一起用HTML5打造一个属于你自己的QQ音乐网页，让你轻松实现音乐播放与互动体验。

准备工作

在开始之前，请确保你已经安装了以下工具：

  • HTML编辑器：如Visual Studio Code、Sublime Text等。
  • 音乐素材：从QQ音乐或其他合法渠道获取音乐文件。

步骤一：创建基本结构

首先，我们需要创建一个基本的HTML5页面结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个性化QQ音乐网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 音乐播放器区域 -->
        <div class="music-player">
            <audio id="music" controls>
                <source src="music.mp3" type="audio/mpeg">
                您的浏览器不支持 audio 元素。
            </audio>
            <div class="controls">
                <button onclick="playMusic()">播放</button>
                <button onclick="pauseMusic()">暂停</button>
            </div>
        </div>
        <!-- 音乐列表区域 -->
        <div class="music-list">
            <ul>
                <!-- 音乐列表项 -->
                <li onclick="playMusic('music1.mp3')">歌曲1</li>
                <li onclick="playMusic('music2.mp3')">歌曲2</li>
                <!-- ... -->
            </ul>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

步骤二：添加样式

接下来，我们需要为网页添加一些基本的样式，使其看起来更加美观。

/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

.music-player {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.controls button {
    background-color: #5cb85c;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.music-list ul {
    list-style: none;
    padding: 0;
}

.music-list ul li {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    cursor: pointer;
}

.music-list ul li:hover {
    background-color: #f5f5f5;
}

步骤三：编写脚本

最后，我们需要编写一些JavaScript脚本，以便实现音乐播放和列表交互功能。

// script.js
function playMusic(src) {
    var music = document.getElementById('music');
    music.src = src;
    music.play();
}

function pauseMusic() {
    var music = document.getElementById('music');
    music.pause();
}

总结

通过以上步骤，我们已经成功打造了一个个性化的QQ音乐网页。在这个网页中，你可以轻松实现音乐播放和列表交互功能。当然，这只是一个基础版本，你可以根据自己的需求进行扩展和优化。希望这个教程能帮助你更好地享受音乐！