【html5期末大作业】基于HTML仿QQ音乐官网网站

最新推荐文章于 2025-12-17 03:24:49 发布

原创最新推荐文章于 2025-12-17 03:24:49 发布 · 594 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#dreamweaver #html5期末大作业 #html静态网页 #html网页作业 #网页设计与制作

网页设计专栏收录该内容

1045 篇文章

订阅专栏

本文详细介绍了一个音乐主题网页的设计与制作过程，包括布局、代码实现等内容。网页采用了DIV+CSS布局，具备丰富的多媒体元素和交互功能。

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码：【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

一、👨‍🎓网站题目

🎵 音乐网页设计、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。

二、✍️网站描述

🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、💠网站演示

在这里插入图片描述

五、⚙️ 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QQ音乐</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
<!--头部-->
<div class="head">
  <div class="head_con">
    <h1 class="logo"><a href="#"><img src="picture/logo.png" alt=""></a></h1>
    <ul class="top_list">
      <li class="current"><a href="#">音乐馆</a></li>
      <li><a href="#">我的音乐</a></li>
      <li class="spec"><a href="#">客户端</a><img src="picture/mark_1.png"></li>
      <li><a href="#">开发平台</a></li>
      <li><a href="#">VIP</a></li>
    </ul>
    <div class="head_search">
      <input type="text" class="sear_input" placeholder="搜索音乐、MV、歌单、用户">
      <button>
        <i></i>
      </button>
    </div>
    <div class="head_right">
      <a href="#" class="land">登录</a>
      <a href="#" class="open_v">开通VIP</a>
      <a href="#" class="recharge">充值</a>
    </div>
    <ul class="subnav">
      <li><a href="#">首页</a></li>
      <li><a href="#">歌手</a></li>
      <li><a href="#">新碟</a></li>
      <li><a href="#">排行榜</a></li>
      <li><a href="#">分类歌单</a></li>
      <li><a href="#">电台</a></li>
      <li><a href="#">MV</a></li>
      <li><a href="#">数字专辑</a></li>
      <li><a href="#">票务</a></li>
    </ul>
  </div>
</div>
<!--歌单推荐-->
<div class="song-reco">
  <div class="reco-con">
    <h2 class="tit">歌单推荐</h2>
    <ul class="reco-list">
      <li class="play_name">
        <div class="list_pic">
          <div class="ico_play"></div>
          <img src="picture/recommend-01.png" alt="无法显示">

        </div>
        <h4 class="list_tit"><a href="#">祝你生日快乐</a></h4>
      </li>
      <li class="play_name">
        <div class="list_pic">
          <div class="ico_play"></div>
          <img src="picture/recommend-02.png" alt="无法显示">
        </div>
        <h4 class="list_tit"><a href="#">学习工作阅读|柔和静心轻音乐</a></h4>
      </li>
      <li class="play_name">
        <div class="list_pic">
          <div class="ico_play"></div>
          <img src="picture/recommend-03.png" alt="无法显示">
        </div>
        <h4 class="list_tit"><a href="#">Boom Boom 心动预警来袭</a></h4>
      </li>
      <li class="play_name">
        <div class="list_pic">
          <div class="ico_play"></div>
          <img src="picture/recommend-04.png" alt="无法显示">
        </div>
        <h4 class="list_tit"><a href="#">【极丧】细节中崩溃</a></h4>
      </li>
      <li class="nomargin play_name">
        <div class="list_pic">
          <div class="ico_play"></div>
          <img src="picture/recommend-05.png" alt="无法显示">
        </div>
        <h4 class="list_tit"><a href="#">治愈钢琴曲静心｜仰望晨光熹微</a></h4>
      </li>

    </ul>
  </div>
</div>
<!--新歌首发-->
<div class="new_song">
  <div class="song_con">
    <h2 class="tit">新歌首发</h2>
    <div class="tab">
      <a href="#">最新</a>
      <a href="#">内地</a>
      <a href="#">港台</a>
      <a href="#">欧美</a>
      <a href="#">韩国</a>
      <a href="#">日本</a>
    </div>
    <ul class="song_list">
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-01.Png" alt="">
          </a>

        </div>
        <div class="txt">
          <h3><a href="#">青春如你《荣耀乒乓》电视剧片尾曲</a></h3>
          <p><a href="#">UNINE</a></p>
        </div>
        <div class="time">03:40</div>
      </li>
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-02.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">吉祥话</a></h3>
          <p><a href="#">hanser/泠鸢yousa/祖娅纳</a></p>
        </div>
        <div class="time">04:28</div>
      </li>
      <li class="nomargin">
        <div class="pic">
          <a href="#"><img src="picture/song-03.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">One LastKiss《新世纪福音战士:终》剧场版主题曲</a></h3>
          <p><a href="#">宇多田光(宇多田匕力儿)</a></p>
        </div>
        <div class="time">04:12</div>
      </li>
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-04.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">如梦非梦《如梦令》微剧憾爱版主题曲</a></h3>
          <p><a href="#">双笔</a></p>
        </div>
        <div class="time">03:41</div>
      </li>
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-05.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">笑看江湖《山河令》网剧江湖推广曲</a></h3>
          <p><a href="#">满舒克</a></p>
        </div>
        <div class="time">03:22</div>
      </li>
      <li class="nomargin">
        <div class="pic">
          <a href="#"><img src="picture/song-06.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">相信希望(Believe)《复工》纪录片主题曲</a></h3>
          <p><a href="#">FIR飞儿乐团</a></p>
        </div>
        <div class="time">05:14</div>
      </li>
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-07.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">Winner Ready2021PEL开赛曲 韩剧主题曲</a></h3>
          <p><a href="#">Ailee</a></p>
        </div>
        <div class="time">04:18</div>
      </li>
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-08.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">Winner Ready2021PEL开赛曲</a></h3>
          <p><a href="#">艾福杰尼</a></p>
        </div>
        <div class="time">03:32</div>
      </li>
      <li class="nomargin">
        <div class="pic">
          <a href="#"><img src="picture/song-09.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">秘境(KickBack)</a></h3>
          <p><a href="#">威神V</a></p>
        </div>
        <div class="time">03:40</div>
      </li>

    </ul>
  </div>
</div>
<!--精彩推荐-->
<div class="brilliant">
  <div class="bri_con">
    <h2 class="tit">精彩推荐</h2>
    <ul class="bri_list">
      <li>
        <a href="#"><img src="picture/bri-01.png"></a>
      </li>
      <li class="flo_rig">
        <a href="#"><img src="picture/bri-02.png"></a>
      </li>
    </ul>
  </div>
</div>
<!--新碟首发-->
<div class="new_disc">
  <div class="disc_con">
    <h2 class="tit">新碟首发</h2>
    <div class="tab">
      <a href="#">内地</a>
      <a href="#">港台</a>
      <a href="#">欧美</a>
      <a href="#">韩国</a>
      <a href="#">日本</a>
      <a href="#">其他</a>
    </div>
    <ul class="disc_list">
      <li class="playlist_item">
        <div class="play_pic ">
          <a href="#"><img src="picture/new_disc-01.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">甜甜的你</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">蝴蝶效应（B.E.）</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-02.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">其实你不懂我的心</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">INTO1-林墨</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-03.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">可以</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">贺一航</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-04.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">锄禾日当午</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">金志文</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-05.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">星月(The MoonStar）（prod.大副）</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">左良甫</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-06.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">飞跃</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">凌LING</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-07.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">旧时雨</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">烧煤er/梅畅 </a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-08.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">上瘾</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">陈又又</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-09.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">山风</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">秦瑜</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-10.PNG" alt=""></a>
        </div>
        <div>
          <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">一剑江湖</a>
          </span>
          </h4>
        </div>
        <div class="playlist_author">
          <a href="#">壹声壹社</a>
        </div>
      </li>
    </ul>
  </div>
</div>
<!--排行榜-->
<div class="rank">
  <div class="rank_con">
    <h2 class="tit">排行榜</h2>
    <ul class="rank_list">
      <li class="list_item">
        <h3>热歌</h3>
        <i></i>
        <ul class="item_del">
          <li>
            <div class="num">1</div>
            <div class="del_txt">
              <p><a href="#">清空</a></p>
              <p><a href="#">王汐辰/苏星婕</a></p>
            </div>
          </li>
          <li>
            <div class="num">2</div>
            <div class="del_txt">
              <p><a href="#">TA</a></p>
              <p><a href="#">不是花火呀</a></p>
            </div>
          </li>
          <li>
            <div class="num">3</div>
            <div class="del_txt">
              <p><a href="#">星辰大海</a></p>
              <p><a href="#">黄霄云</a></p>
            </div>
          </li>
        </ul>
      </li>
      <li class="list_item two">
        <h3>新歌</h3>
        <i></i>
        <ul class="item_del">
          <li>
            <div class="num">1</div>
            <div class="del_txt">
              <p><a href="#">气象站台</a></p>
              <p><a href="#">Uu</a></p>
            </div>
          </li>
          <li>
            <div class="num">2</div>
            <div class="del_txt">
              <p><a href="#">蓝色灰色</a></p>
              <p><a href="#">Zkaaai</a></p>
            </div>
          </li>
          <li>
            <div class="num">3</div>
            <div class="del_txt">
              <p><a href="#">我叫长安你叫故里</a></p>
              <p><a href="#">尹昔眠/小田音乐社</a></p>
            </div>
          </li>
        </ul>
      </li>
      <li class="list_item three">
        <h3>流行指数</h3>
        <i></i>
        <ul class="item_del">
          <li>
            <div class="num">1</div>
            <div class="del_txt">
              <p><a href="#">织梦</a></p>
              <p><a href="#">Chimney于恩众</a></p>
            </div>
          </li>
          <li>
            <div class="num">2</div>
            <div class="del_txt">
              <p><a href="#">终于等到这一句</a></p>
              <p><a href="#">小乐哥</a></p>
            </div>
          </li>
          <li>
            <div class="num">3</div>
            <div class="del_txt">
              <p><a href="#">所有</a></p>
              <p><a href="#">杨博然</a></p>
            </div>
          </li>
        </ul>
      </li>
      <li class="list_item four">
        <h3>欧美</h3>
        <i></i>
        <ul class="item_del">
          <li>
            <div class="num">1</div>
            <div class="del_txt">
              <p><a href="#">Love Story(Taylor's Version)</a></p>
              <p><a href="#">Taylor Swift</a></p>
            </div>
          </li>
          <li>
            <div class="num">2</div>
            <div class="del_txt">
              <p><a href="#">FakeASmileAlanWalker</a></p>
              <p><a href="#">salemilese</a></p>
            </div>
          </li>
          <li>
            <div class="num">3</div>
            <div class="del_txt">
              <p><a href="#">GasolineHAIM</a></p>
              <p><a href="#">TaylorSwift</a></p>
            </div>
          </li>
        </ul>
      </li>
      <li class="list_item five nomargin">
        <h3>韩国</h3>
        <i></i>
        <ul class="item_del">
          <li>
            <div class="num">1</div>
            <div class="del_txt">
              <p><a href="#">TAIL</a></p>
              <p><a href="#">宣美</a></p>
            </div>
          </li>
          <li>
            <div class="num">2</div>
            <div class="del_txt">
              <p><a href="#">MAGNETIC</a></p>
              <p><a href="#">Rain(郑智薰)/王嘉尔</a></p>
            </div>
          </li>
          <li class="nomargin">
            <div class="num">3</div>
            <div class="del_txt">
              <p><a href="#">WhyWhyWhy</a></p>
              <p><a href="#">iKON</a></p>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<!--MV-->
<div class="movie">
  <div class="movie_con">
    <h2 class="tit">MV</h2>
    <div class="movie_tab">
      <a href="#">精选</a>
      <a href="#">内地</a>
      <a href="#">港台</a>
      <a href="#">欧美</a>
      <a href="#">韩国</a>
      <a href="#">日本</a>
      <div class="check">
        <a class="index_more" href="#">更多
          <i class="icon_index_arrow sprite"></i>
        </a>
      </div>
    </div>
    <ul class="movie_list">
      <li>
        <div>
          <a href="#"><img src="picture/movie-01.png"></a>
          <h3 class="movie_list_title">热爱105℃的你 (《超能一家人》电影推广曲) </h3>
          <p class="movie_list_singer">腾格尔/艾伦/沈腾</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>2.0万</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-02.png"></a>
          <h3 class="movie_list_title">《小小的美好》</h3>
          <p class="movie_list_singer">黄龄/初音未来</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>6.5万</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-03.png"></a>
          <h3 class="movie_list_title">为我们失去的(《穿过寒冬拥抱你 萤火(《终钥之 歌》虫穴主题曲)</h3>
          <p class="movie_list_singer">硬糖少女303希林娜依-高</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>8.1万</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-04.png"></a>
          <h3 class="movie_list_title">萤火(《终钥之歌》虫穴主题曲)</h3>
          <p class="movie_list_singer">阿云顺</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>11.6万</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>
      <li class="nomargin">
        <div>
          <a href="#"><img src="picture/movie-05.png"></a>
          <h3 class="movie_list_title">《父亲的童谣》</h3>
          <p class="movie_list_singer">陈思诚/肖央</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>4.8万</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-06.png"></a>
          <h3 class="movie_list_title">安静~JapaneseVer.~</h3>
          <p class="movie_list_singer">七德</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>5.1万</i>
            </span>
          </div>
        </div>

      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-07.png"></a>
          <h3 class="movie_list_title">INTOI沉浸纪录EP《万里》广东曲Live </h3>
          <p class="movie_list_singer">李宇春</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>10.6万</i>
            </span>
          </div>
        </div>

      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-08.png"></a>
          <h3 class="movie_list_title">From Here(《文明与征服》手游</h3>
          <p class="movie_list_singer">袁娅维</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>4.8万</i>
            </span>
          </div>
        </div>

      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-09.png"></a>
          <h3 class="movie_list_title">《野蛮生长》-李字春演唱会 </h3>
          <p class="movie_list_singer">腾格尔/艾伦/沈腾</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>14.9万</i>
            </span>
          </div>
        </div>
      </li>
      <li class="nomargin">
        <div>
          <a href="#"><img src="picture/movie-10.png"></a>
          <h3 class="movie_list_title">《BabyIKnow》 </h3>
          <p class="movie_list_singer">刘用断</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>15.2万</i>
            </span>
          </div>
        </div>
      </li>
    </ul>


  </div>
</div>


<!--底部-->
<div class="foot">
  <div class="foot_con">
    <div class="con_top">

      <div class="download">
        <h3 class="bt"><a href="#">下载QQ客户端</a></h3>
        <ul class="down_list">
          <li class="down_item item01">
            <a href="#">
              <i></i>
              <span>PC版</span>
            </a>
          </li>
          <li class="down_item item02">
            <a href="#">
              <i></i>
              <span>MAC版</span>
            </a>
          </li>
          <li class="down_item item03">
            <a href="#">
              <i></i>
              <span>Android版</span>
            </a>
          </li>
          <li class="down_item item04">
            <a href="#">
              <i></i>
              <span>iphone版</span>
            </a>
          </li>
        </ul>
      </div>
      <!--特色产品-->
      <div class="download pro">
        <h3 class="bt"><a href="#">特色产品</a></h3>
        <ul class="down_list">
          <li class="down_item item01">
            <a href="#">
              <i></i>
              <span>全民K歌</span>
            </a>
          </li>
          <li class="down_item item02">
            <a href="#">
              <i></i>
              <span>SuperSound</span>
            </a>
          </li>
          <li class="down_item item03">
            <a href="#">
              <i></i>
              <span>QPlay</span>
            </a>
          </li>
          <li class="down_item item04">
            <a href="#">
              <i></i>
              <span>Fan直播伴侣</span>
            </a>
          </li>
          <li class="down_item item04 item_spec">
            <a href="#">
              <span>车载互联</span>
            </a>
          </li>
          <li class="down_item item04">
            <a href="#">
              <span>QQ演出</span>
            </a>
          </li>
          <li class="down_item item04">
            <a href="#">
              <span></span>
            </a>
          </li>
        </ul>
      </div>
      <!--合作链接-->
      <div class="link">
        <h3 class="bt"><a href="#">合作链接</a></h3>
        <ul class="link_list">
          <li><a href="#">CJ·ENM</a></li>
          <li><a href="#">腾讯视频</a></li>
          <li><a href="#">手机QQ空间</a></li>
          <li><a href="#">最新版QQ</a></li>
          <li><a href="#">腾讯社交广告</a></li>
          <li><a href="#">电脑管家</a></li>
          <li><a href="#">QQ浏览器</a></li>
          <li><a href="#">腾讯微云</a></li>
          <li><a href="#">腾讯云</a></li>
          <li><a href="#">企鹅FM</a></li>
          <li><a href="#">智能电视网</a></li>
          <li><a href="#">当贝市场</a></li>

        </ul>
      </div>

      <!--开发平台-->
      <div class="platform">
        <h3 class="bt"><a href="#">开发平台</a></h3>
        <ul class="link_list">
          <li><a href="#">QQ音乐开放平台</a></li>
          <li><a href="#">腾讯音乐人</a></li>
        </ul>
      </div>

      <!--TME集团官网-->
      <div class="platform">
        <h3 class="bt"><a href="#">TME集团官网</a></h3>
        <ul class="link_list">
          <li><a href="#">腾讯音乐</a></li>
        </ul>
      </div>
    </div>
    <!-- 权利声明 -->
    <div class="copyright">
      <p>
        <a href="#">关于腾讯</a> |
        <a href="#">AboutTencent</a> |
        <a href="#">服务条款</a> |
        <a href="#">用户服务协议</a> |
        <a href="#">隐私政策</a> |
        <a href="#">权利声明</a> |
        <a href="#">广告服务</a> |
        <a href="#">腾讯招聘</a> |
        <a href="#">客服中心</a> |
        <a href="#">网站导航</a>
      </p>
      <p>Copyright 1998-2021Tencent.All Rights Reserved.</p>
      <p>腾讯公司 <a href="#">版权所有 </a><a href="#">网络文化经营许可证: </a><a href="#">粤网文2018]6725-2386号 </a></p>
    </div>
  </div>
</div>
</body>
</html>

💒CSS样式代码

body,ul,h2,h4,h3,p,h1,input,button{
  margin: 0;
  padding: 0;
}
img{
  border: 0;
}
body{
  font-family: "微软雅黑";
}
.reco-con, .song_con, .bri_con, .rank_con,.foot_con,.head_con,.movie_con {
  width: 1200px;
  margin: 0 auto;
}
.tit {
  font-size: 30px;
  color: #333;
  letter-spacing: 14px;
  text-align: center;
  line-height: 30px;
  margin-bottom: 34px;
}

ul,li {
  list-style: none;

}
a{
  color: #333;
  text-decoration: none;
}
.song-reco, .new_song, .brilliant, .new_disc, .rank, .foot , .movie{

  padding: 51px 0px 50px 0px;
}
.reco-list {
  overflow: hidden;

}
.reco-list li {
  width: 224px;
  float: left;
  margin-right: 20px;
}
.reco-list .nomargin{
  margin-right: 0px;
}

.list_pic img {
  width:224px  ;
  vertical-align: top;

}

.play_name:hover .ico_play {
  background-image: url("../image/ico_play.png");


}
.ico_play {
  position: absolute;
  margin: 82px 82px;
  width: 60px;
  height: 60px;
}

.list_tit {
  font-size: 14px;
  font-weight: normal;
  line-height: 28px;
  margin-top: 6px;
}
/*新歌首发*/
.tab {
  overflow: hidden;
  padding-left: 360px;
  margin-bottom: 39px;
}
.tab a{
  font-size: 14px;
  line-height: 22px;
  float: left;
  margin-right: 52px;
}
/*新碟首发*/

.disc_con{
  width: 1200px;
  margin: 0 auto;
}
.new_disc .tab {
  padding-left: 350px;
  margin-bottom: 39px;
}
.song_list {
  overflow: hidden;
}
.song_list li {
  padding: 12px 0px;
  overflow: hidden;
  border-bottom:  1px solid #f2f2f2;
  width: 380px;
  float: left;
  margin-right: 30px;

}
.pic,.txt,.time{
  float: left;
}
.pic{
  width: 86px;
  height: 86px;

}

.pic img {
  width: 86px;

}
.txt {
  padding: 19px 0px 17px 0px;
  width: 200px;
  margin: 0px 38px 0px 14px;
}
.txt h3 {
  font-size: 14px;
  line-height: 25px;
  font-weight: normal;
  text-overflow: ellipsis;  /* 单行文本 */
  overflow: hidden;  /* 溢出隐藏、清除浮动、解决外边距塌陷等等；这里是溢出隐藏 */
  white-space: nowrap;  /* 规定h3标签不换行 */
}
.txt p{
  font-size: 14px;
  line-height: 25px
}
.txt p a{
  color: #999;
}
.time{
  font-size: 14px;
  color: #999;
  line-height: 86px;
}
.song_list .nomargin{
  margin-right: 0px;
}
/*精彩推荐*/
.bri_list  {
  overflow: hidden;
}
.bri_list  li {
  width: 590px;
  height: 235px;
  float: left;

}
.bri_list .flo_rig{
  float: right;
}
.bri_list li img{
  width: 590px;
}

/*新碟首发*/
.disc_list{
  overflow: hidden;
}
.disc_list li {
  width: 210px;
  height: 280px;
  float: left;
  margin-right: 30px;
}

.play_pic{
  width: 210px;
  height: 210px;

}
.play_pic img{
  width: 210px;
}
.playlist_item {
  width:240px ;
  height:300px;
  padding-bottom: 15px;
}
/*.playlist_item .play_pic {*/
/*  position: relative;*/
/*  !*margin-right: 30px;*!*/
/*}*/

.playlist_item .playlist_title{
  /*float: left;*/
  max-width: 100%;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 22px;
  max-height: 44px;
}
.playlist_title h4{
  margin-top: 4px;

}


.playlist_title_txt a {
  font-size: 14px;
}
.playlist_item .playlist_author{

  max-width: 100%;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 22px;
  max-height: 44px;
}
.playlist_item .playlist_author a {
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 22px;
  font-size: 14px;
}

/*排行榜*/
.rank_list {
  overflow: hidden;
}
.list_item {
  width: 164px;
  height: 430px;
  margin-right: 20px;
  float: left;
  /*精灵图，通过background-position调整图片对应位置*/
  /*no-repeat属性是不让图片重复*/
  background: url(../image/rank.png) no-repeat;
  padding: 70px 30px 0px;
}

.two{
  background-position: -309px 0px ;
}
.three{
  background-position: -618px 0px ;
}
.four{
  background-position: -927px 0px ;
}.five{
   background-position: -1238px 0px ;
 }

.rank_list .nomargin {
  margin-right: 0px;
}
.list_item h3{
  font-size: 26px;
  line-height: 58px;
  color: #fff;
  font-weight: 400;
  text-align: center;
}
.list_item i {
  display: block;
  width: 36px;
  height: 2px;
  background-color: #fff;
  margin: 32px auto;
}
.item_del li {
  font-size: 13px;
  color: #fff;
  overflow: hidden;
  margin-bottom: 20px;
}
.item_del .num {
  line-height: 29px;
  float: left;
  width: 20px;
}
.item_del .del_txt{
  float: left;
  width: 144px;
}
.del_txt p{
  line-height: 29px;
  text-overflow: ellipsis;
  overflow: hidden;  /* 溢出隐藏、清除浮动、解决外边距塌陷等等；这里是溢出隐藏 */
  white-space: nowrap
}
.del_txt p a{
  color: #fff;
}
.del_txt p a:hover{
  color: #fff;
}

/*底部*/
.foot {
  background: rgb(58,58,58);
}
.foot a{
  color: #999;
  display: block;
}
.bt {
  font-size: 15px;
  font-weight: 500;
  line-height: 77px;
  margin-bottom: 12px;
}
.down_list {
  overflow: hidden;
}
.down_item {
  float: left;
}
.down_item i {
  display: block;
  background: url("../image/foot.png") no-repeat;
  margin: 0px 29px;
  height: 33px;
}
.item01 {
  margin-left: -23px;
}
.item01 i{
  width: 33px;
  background-position: -1px -1px;
}
.item01 a:hover i{
  background-position: -1px -34px;
}
.item02 i{
  width: 41px;
  background-position: -56px -1px;
}
.item02 a:hover i{
  background-position: -56px -34px;
}
.item03 i{
  width: 36px;
  background-position: -130px -1px;
}
.item03 a:hover i{
  background-position: -130px -34px;
}
.item04 i{
  width: 36px;
  background-position: -190px -1px;
}

.item04 a:hover i{
  background-position: -190px -34px;
}
.download{
  width: 438px;
}
.pro {
  width: 370px;
  margin-right: 80px;
}
.down_item span {
  display: block;
  font-size: 14px;
  line-height: 40px;
  text-align: center;

}
.con_top{
  overflow: hidden;
  padding-bottom: 30px;
  border-bottom: 1px solid #353535;
}
.download,.pro {
  float: left;
}
.pro .item01 {
  margin-left: -24px;
}
.pro .item01 i{
  width: 38px;
  height: 32px;
  background-position: -249px -3px;
}
.item01 a:hover i {
  background-position: -249px -34px;
}
.pro .item02 i{
  width: 38px;
  height: 32px;
  background-position: -314px -3px;
}
.item02 a:hover i {
  background-position: -314px -34px;
}
.pro .item03 i{
  width: 38px;
  height: 32px;
  background-position: -380px -3px;
}
.item03 a:hover i {
  background-position: -380px -34px;
}
.pro .item04 i{
  width: 38px;
  height: 32px;
  background-position: -443px -3px;
}
.item04 a:hover i {
  background-position: -443px -34px;
}
.item_spec{
  margin-right:33px;
}
/*合作链接*/
.link{
  width: 303px;
  float: left;

}
.link_list li{
  font-size: 14px;
  margin-bottom: 18px;
  line-height: 14px;
  min-width: 101px;
  float: left;
}
.link_list li a:hover{
  color: #31c27c;
}
.platform {
  width: 464px;
  float: left;
  margin-top:52px ;

}
.platform li {
  margin-right: 30px;
}
.copyright{
  font-size: 12px;
  color: #999;
  padding-top: 23px;
}
.copyright p {
  line-height: 20px;
  text-align: center;
}
.copyright p a{
  display: inline;
}
.copyright p a:hover{
  color: #31c27c;
}
/*头部*/
.head_con {
  position: relative;
  padding-top: 90px;

}
.logo {
  width: 170px;
  height:46px;
  position: absolute;
  left: 0;
  top:22px;
}
.logo a{
  display: block;
}
.logo img{
  width: 170px;
}
.top_list {
  font-size: 18px;
  overflow: hidden;
  position: absolute;
  left: 198px;
  top:0px;
}
.top_list li {
  float: left;
}
.top_list .current{
  background: #31c27c;
}
.top_list .current a {
  color: #fff;
}
.top_list .current a:hover {
  color: #fff;
}
.top_list a{
  color: #000;
  display: block;
  line-height:90px ;
  padding: 0px 20px;
}
.top_list a:hover {
  color:#31c27c ;
}
.spec {
  position: relative;
}
.spec img{
  position: absolute;
  top:18px;
  left: 56px;
  width: 38px;
  height: 14px;
}

.head_search{
  width: 218px;
  height: 36px;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  position: absolute;
  left: 720px;
  top:26px
}
.sear_input{
  padding-left: 11px;
  height: 36px;
  line-height: 36px;
  border: none;
  outline: none;
  width: 174px;
  float: left;
}
.sear_input::placeholder{
  color: #757575;
  font-size: 10px;
}
button i{
  width: 17px;
  height: 17px;
  display: block;
  background: url("../image/mark-2.png") no-repeat;
  margin-left: 6px;
}
button {
  background: none;
  border: none;
  width: 33px;
  height: 36px;
  float: right;
}
button:hover i{
  background: url("../image/mark-3.png");
}
.head_right{
  height: 40px;
  position: absolute;
  left: 980px;
  top:24px
}
.head_right a{
  display: block;
  float: left;
}
.land{
  font-size: 16px;
  color: #000;
  line-height: 40px;
}
.open_v {
  font-size: 12px;
  color: #fff;
  width: 102px;
  height: 40px;
  line-height: 40px;
  background: #31c27c;
  border-radius: 2px;
  text-align: center;
  margin: 0px 5px 0px 8px;
  position: relative;
}
/*通过伪类，border设置小箭头*/
.open_v::after {
  content: "";
  width: 0px;
  height: 0px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #fff;
  position: absolute;
  top:16px;
  right: 8px;
}
.recharge{
  width: 51px;
  height: 38px;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  text-align: center;
  color: #000;
  font-size: 12px;
  line-height: 38px;
  position: relative;
}
.recharge::after {
  content: "";
  width: 0px;
  height: 0px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #000;
  position: absolute;
  top:14px;
  right: 2px;
}
.subnav {
  overflow: hidden;
  border-top: 1px solid #f2f2f2;
  padding-left: 230px;
}
/*.subnav {*/
/*  overflow: hidden;*/
/*}*/
.subnav li {
  line-height: 51px;
  height: 51px;
  font-size: 14px;
  float: left;
}
.subnav a{
  color: #000;
  display: block;
  line-height: 50px;
  padding: 0px 20px;
}
.subnav li a:hover {
  color: #31c27c;
}
.song-reco, .new_song,.brilliant,.new_disc,.rank,.movie {
  background: url("../image/background02.jpg") repeat-x;
}
/*MV*/
.movie_tab{
  overflow: hidden;
  padding-left: 350px;
  margin-bottom: 39px;
  position: relative;

}
/*.movie_con{*/
/*  position: relative;*/
/*}*/
.movie_tab a{
  font-size: 14px;
  line-height: 22px;
  float: left;
  margin-right: 52px;

}
.movie_tab a:hover{
  color: #31c27c;
}

.index_more{
  position: absolute;
  right: 0;
  top: auto;
}
/*.index_more i:hover{*/
/*  background-position: -120px -60px;*/
/*}*/
.movie_tab .index_more a:hover i{
  background-position: -120px -60px;
}
.icon_index_arrow{
  display: inline-block;
  width: 7px;
  height: 12px;
  background-position: -120px -40px;
  margin-left: 6px;
}
.sprite {
  background-image: url(../image/icon_sprite.630b3e60.png);
}
.check:hover i{
  background-position: -120px -60px;
}

.movie_list{
  overflow: hidden;
}
.movie_list li{
  width: 224px;
  height: 210px;

  margin-bottom: 20px;
  float: left;
  margin-right: 20px;
}
.movie_list li img{
  width: 224px;
  height: 127px;
}
.movie_list .nomargin{
  margin-right: 0px;
}
.movie_list_title {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.movie_list_singer{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 24px;
  font-weight: 400;
  font-size: 14px;
  color: #9b9b9b;
}
.movie_list_listen_icon{
  display: inline-block;
  width: 19px;
  height: 12px;
  background-position: -180px -20px;
  vertical-align: -1px;
}
.movie_list_info span{
  margin:0px 10px 0px 0px;
}
.movie_list_listen_icon sprite{
  background-image:  url(../image/icon_sprite.630b3e60.png);
}
.movie_list_info i{
  font-size: 14px;
  color: #9b9b9b;
}
.movie_list_title:hover{
  color: #31c27c;
}
.movie_list_singer:hover{
  color: #31c27c;
}

六、🥇 如何让学习不再盲目

21年程序员总结给编程菜鸟的16条忠告

入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。
多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。
菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。
不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。
没积累足够知识和经验前，你是开发不出一个完整项目的。
把最新技术挂在嘴边，还不如把过时技术牢记心中。
活到老学到老，只有一招半式是闯不了江湖的。
看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。
书读百遍其义自见，别指望读一遍就能掌握。
请把教程里的例子亲手实践下，即使案例中有完整源码。
把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。
不要漏掉教程中任何一个习题——请全部做完并做好笔记。
水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。
每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。
做好保存源文件的习惯，这些都是你的知识积累。
遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬