HTML+CSS+JS制作音乐网页仿QQ音乐（内附源码，含6个页面）

WebDesign_Mu

于 2024-12-23 15:40:09 发布

阅读量1.3k

点赞数 13

文章标签： html css javascript

本文链接：https://blog.csdn.net/WebDesign_Mu/article/details/144668526

版权

一、作品介绍

仿QQ音乐网页，HTML+CSS+JS制作一个音乐网页，包含首页、歌手页、专辑页、排行榜页、分类歌单页、登录页等6个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。

二、页面结构

1. 顶部导航栏

固定在页面顶部，包含：Logo、主导航菜单（首页、歌手、专辑、排行榜、分类歌单）、搜索框、用户头像/登录入口

2. 主横幅区域

大型轮播图展示区，呈现热门歌曲、新歌发布、音乐活动等推广内容

3. 推荐歌单模块

网格布局展示6-8个精选歌单，每个包含封面图、标题和播放量信息

4. 新歌首发模块

横向滚动展示最新发布的歌曲，包含歌曲封面、歌名、歌手名和发布时间

5. 精彩推荐模块

展示3-4个大型推广卡片，包括音乐节、演唱会、新专辑等活动信息

6. 新碟上架模块

网格布局展示最新发布的专辑，每个包含专辑封面、专辑名和歌手名

7. 排行榜模块

以卡片形式展示多个排行榜（如飙升榜、热歌榜、新歌榜），每个排行榜显示前3首歌曲信息

8. 底部区域

包含版权信息、友情链接、关于我们等页脚内容

9. 播放控制栏

固定在页面底部，包含：当前播放歌曲信息、播放控制按钮、进度条、音量控制、播放模式切换等

三、作品演示

四、代码目录

五、首页代码

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>音乐网页 - 首页</title>
  <link type="text/css" href="css/family.css" rel="stylesheet" />
  <link type="text/css" href="css/all.min.css" rel="stylesheet" />
</head>

<body class="bg-gray-50">
  <div class="water-mark water-mark-left">
    公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span>
  </div>
  <div class="water-mark water-mark-right">
    公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span>
  </div>
  <nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
    <div class="container mx-auto px-6 py-3">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-8">
                <h1 class="text-2xl font-[&#39;Pacifico&#39;]">logo</h1>
                <div class="hidden md:flex space-x-8">
                    <a href="./index.html" class="text-custom hover:text-custom/80">首页</a>
                    <a href="./artists.html" class="text-gray-600 hover:text-custom">歌手</a>
                    <a href="./albums.html" class="text-gray-600 hover:text-custom">专辑</a>
                    <a href="./rankings.html" class="text-gray-600 hover:text-custom">排行榜</a>
                    <a href="./playlists.html" class="text-gray-600 hover:text-custom">分类歌单</a>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索音乐、歌手、歌词"
                        class="pl-10 pr-4 py-2 border border-gray-300 rounded-full w-64 focus:outline-none focus:border-custom" />
                    <i class="fas fa-search absolute left-4 top-3 text-gray-400"></i>
                </div>
                <a href="./login.html" class="flex items-center space-x-2">
                    <img src="./images/tx1.jpg"
                        class="w-8 h-8 rounded-full object-cover" alt="用户头像" />
                    <span class="text-gray-600">陈美琪</span>
                </a>
            </div>
        </div>
    </div>
  </nav>

  <main class="mt-20 container mx-auto px-6">
    <div class="glide mt-8">
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
          <li class="glide__slide">
            <img src="./images/b1.jpg" alt="音乐节"
              class="w-full h-[400px] object-cover rounded-lg">
          </li>
          <li class="glide__slide">
            <img src="./images/b2.jpg" alt="新专辑"
              class="w-full h-[400px] object-cover rounded-lg">
          </li>
          <li class="glide__slide">
            <img src="./images/b3.jpg" alt="新专辑"
              class="w-full h-[400px] object-cover rounded-lg">
          </li>
        </ul>
      </div>
      <div class="glide__bullets" data-glide-el="controls[nav]">
        <button class="glide__bullet" data-glide-dir="=0"></button>
        <button class="glide__bullet" data-glide-dir="=1"></button>
        <button class="glide__bullet" data-glide-dir="=2"></button>
      </div>
    </div>

    <section class="mt-12">
      <h2 class="text-2xl font-bold mb-6">推荐歌单</h2>
      <div class="grid grid-cols-4 gap-6">
        <div class="group relative">
          <img src="./images/tj1.jpg" alt="歌单封面"
            class="w-full aspect-square object-cover rounded-lg">
          <div class="absolute top-2 right-2 text-white">
            <i class="fas fa-play-circle"></i>
            <span>12.5万</span>
          </div>
          <h3 class="mt-2 text-sm font-medium">2024年热门华语歌曲精选</h3>
        </div>
        <div class="group relative">
          <img src="./images/tj11.jpg" alt="歌单封面"
            class="w-full aspect-square object-cover rounded-lg">
          <div class="absolute top-2 right-2 text-white">
            <i class="fas fa-play-circle"></i>
            <span>8.9万</span>
          </div>
          <h3 class="mt-2 text-sm font-medium">经典怀旧金曲100首</h3>
        </div>
        <div class="group relative">
          <img src="./images/tj12.jpg" alt="歌单封面"
            class="w-full aspect-square object-cover rounded-lg">
          <div class="absolute top-2 right-2 text-white">
            <i class="fas fa-play-circle"></i>
            <span>6.7万</span>
          </div>
          <h3 class="mt-2 text-sm font-medium">电音派对精选集</h3>
        </div>
        <div class="group relative">
          <img src="./images/tj13.jpg" alt="歌单封面"
            class="w-full aspect-square object-cover rounded-lg">
          <div class="absolute top-2 right-2 text-white">
            <i class="fas fa-play-circle"></i>
            <span>5.2万</span>
          </div>
          <h3 class="mt-2 text-sm font-medium">轻音乐放松时刻</h3>
        </div>
      </div>
    </section>

    <section class="mt-12">
      <h2 class="text-2xl font-bold mb-6">新歌首发</h2>
      <div class="flex space-x-6 overflow-x-auto pb-4">
        <div class="flex-none w-48">
          <img src="./images/xg10.jpg" alt="新歌封面"
            class="w-full aspect-square object-cover rounded-lg">
          <h3 class="mt-2 text-sm font-medium">星空下的约定</h3>
          <p class="text-sm text-gray-500">周杰伦</p>
        </div>
        <div class="flex-none w-48">
          <img src="./images/xg11.jpg" alt="新歌封面"
            class="w-full aspect-square object-cover rounded-lg">
          <h3 class="mt-2 text-sm font-medium">爱的进行时</h3>
          <p class="text-sm text-gray-500">林俊杰</p>
        </div>
        <div class="flex-none w-48">
          <img src="./images/xg12.jpg" alt="新歌封面"
            class="w-full aspect-square object-cover rounded-lg">
          <h3 class="mt-2 text-sm font-medium">心跳的声音</h3>
          <p class="text-sm text-gray-500">陈奕迅</p>
        </div>
        <div class="flex-none w-48">
          <img src="./images/phb1.jpg" alt="新歌封面"
            class="w-full aspect-square object-cover rounded-lg">
          <h3 class="mt-2 text-sm font-medium">我们的时光</h3>
          <p class="text-sm text-gray-500">张惠妹</p>
        </div>
        <div class="flex-none w-48">
          <img src="./images/phb2.jpg" alt="新歌封面"
            class="w-full aspect-square object-cover rounded-lg">
          <h3 class="mt-2 text-sm font-medium">Cruel Summer</h3>
          <p class="text-sm text-gray-500">Taylor Swift</p>
        </div>
      </div>
    </section>

    <section class="mt-12">
      <h2 class="text-2xl font-bold mb-6">排行榜</h2>
      <div class="grid grid-cols-3 gap-6">
        <div class="bg-white rounded-lg p-4 shadow">
          <h3 class="text-lg font-bold mb-4">飙升榜</h3>
          <div class="space-y-4">
            <div class="flex items-center">
              <span class="text-custom font-bold mr-4">1</span>
              <div>
                <h4 class="font-medium">夜曲</h4>
                <p class="text-sm text-gray-500">周杰伦</p>
              </div>
            </div>
            <div class="flex items-center">
              <span class="text-gray-400 font-bold mr-4">2</span>
              <div>
                <h4 class="font-medium">可惜没如果</h4>
                <p class="text-sm text-gray-500">林俊杰</p>
              </div>
            </div>
            <div class="flex items-center">
              <span class="text-gray-400 font-bold mr-4">3</span>
              <div>
                <h4 class="font-medium">红玫瑰</h4>
                <p class="text-sm text-gray-500">陈奕迅</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-white rounded-lg p-4 shadow">
          <h3 class="text-lg font-bold mb-4">热歌榜</h3>
          <div class="space-y-4">
            <div class="flex items-center">
              <span class="text-custom font-bold mr-4">1</span>
              <div>
                <h4 class="font-medium">说好不哭</h4>
                <p class="text-sm text-gray-500">周杰伦</p>
              </div>
            </div>
            <div class="flex items-center">
              <span class="text-gray-400 font-bold mr-4">2</span>
              <div>
                <h4 class="font-medium">修炼爱情</h4>
                <p class="text-sm text-gray-500">林俊杰</p>
              </div>
            </div>
            <div class="flex items-center">
              <span class="text-gray-400 font-bold mr-4">3</span>
              <div>
                <h4 class="font-medium">浮夸</h4>
                <p class="text-sm text-gray-500">陈奕迅</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-white rounded-lg p-4 shadow">
          <h3 class="text-lg font-bold mb-4">新歌榜</h3>
          <div class="space-y-4">
            <div class="flex items-center">
              <span class="text-custom font-bold mr-4">1</span>
              <div>
                <h4 class="font-medium">倒带</h4>
                <p class="text-sm text-gray-500">周杰伦</p>
              </div>
            </div>
            <div class="flex items-center">
              <span class="text-gray-400 font-bold mr-4">2</span>
              <div>
                <h4 class="font-medium">她说</h4>
                <p class="text-sm text-gray-500">林俊杰</p>
              </div>
            </div>
            <div class="flex items-center">
              <span class="text-gray-400 font-bold mr-4">3</span>
              <div>
                <h4 class="font-medium">富士山下</h4>
                <p class="text-sm text-gray-500">陈奕迅</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="bg-gray-800 text-white py-12 mt-10">
    <div class="container mx-auto px-6">
        <div class="grid grid-cols-4 gap-8">
            <div>
                <h3 class="text-lg font-bold mb-4">关于我们</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white">公司介绍</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">投资者关系</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">招贤纳士</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">联系我们</a></li>
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-bold mb-4">服务</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white">音乐服务</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">VIP会员</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">客服中心</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">音乐人</a></li>
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-bold mb-4">其他</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white">隐私政策</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">服务条款</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">广告服务</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">版权投诉</a></li>
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-bold mb-4">关注我们</h3>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white text-2xl">
                        <i class="fab fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white text-2xl">
                        <i class="fab fa-weixin"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white text-2xl">
                        <i class="fab fa-qq"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
            <p>© 2024 Music. All rights reserved.</p>
        </div>
    </div>
  </footer>

  <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-4">
        <img src="./images/bf2.jpg" alt="当前播放"
          class="w-12 h-12 rounded">
        <div>
          <h4 class="font-medium">告白气球</h4>
          <p class="text-sm text-gray-500">周杰伦</p>
        </div>
      </div>
      <div class="flex items-center space-x-6">
        <button class="text-gray-600 hover:text-custom"><i class="fas fa-step-backward text-xl"></i></button>
        <button class="text-custom hover:text-custom/80"><i class="fas fa-play-circle text-3xl"></i></button>
        <button class="text-gray-600 hover:text-custom"><i class="fas fa-step-forward text-xl"></i></button>
      </div>
      <div class="flex items-center space-x-4">
        <button class="text-gray-600 hover:text-custom"><i class="fas fa-volume-up"></i></button>
        <button class="text-gray-600 hover:text-custom"><i class="fas fa-random"></i></button>
        <button class="text-gray-600 hover:text-custom"><i class="fas fa-list-ul"></i></button>
      </div>
    </div>
  </div>
</body>

</html>