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

最新推荐文章于 2024-03-05 15:32:42 发布
最新推荐文章于 2024-03-05 15:32:42 发布
阅读量1.1k 收藏 26
点赞数 20
分类专栏： web前端大作业 dw静态网页设计与制作 html期末大作业 文章标签： html html5 前端 课程设计 美食
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html_wangye/article/details/126168774
版权

📂文章目录

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

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

二、✍️网站描述

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

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

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

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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>
/*  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条忠告

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

七、🎁更多干货

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

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

3.

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

html精品源码
关注
  • 20
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QQ音乐静态项目html源码
04-27
<div class="mod_index_tab"><a class="index_tab__item index_tab__item--current">为你推荐</a><a class="index_tab__item ">背景音乐</a><a class="index_tab__item ">情歌</a><a class="index_tab__item ">网络歌曲</a><a class="index_tab__item ">官方歌单</a><a class="index_tab__item ">经典</a></div>
QQ音乐页面(纯HTML)
xiaozgm的博客
07-07 5667
QQ音乐项目
html网页制作之音乐播放器
最新发布
不蒸馒头曾口气的博客
03-05 815
【代码】html网页制作之音乐播放器。
【QQ音乐Html + CSS静态笔记】
Zhangyongqi77的博客
09-23 3275
qq音乐
每个人都能制作的简易版QQ音乐（HTML+CSS+JQuery）
有没有料，进来看看就知道！
09-21 8442
自制系列二它来了。 如果在制作过程中有如何问题你都可以私信我，我会答复你的。 今天中秋节，首先祝大家中秋节快乐！ 因为没什么礼物送给大家，所以在这里给大家安利一份简易版QQ音乐的制作，过程很简单，每个人都能学会。 下面将是制作步骤了： 先建好目录如下： source文件夹里存放如下： 下面就是把代码复制到相应的目录中： QQ音乐播放器.html <!DOCTYPE html> <html> <head> &lt...
仿QQ音乐(HTML+CSS)
HTML网页设计
08-06 2537
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结......
基于HTML+CSS实现qq音乐项目html静态网页设计（期末大作业）.zip
10-17
基于HTML+CSS实现qq音乐项目html静态网页设计（期末大作业）.zip 已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。 基于HTML+CSS实现qq...
基于Html5仿造王者荣耀官网静态页面（HTML5期末大作业）
06-25
使用HTML5+CSS3+JavaScript 实现仿造王者荣耀官网静态页面 1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。 2.网页作品编辑：作品下载后可使用任意HTML编辑...
HTML5期末大作业：基于 html css js仿腾讯课堂首页
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
基于Html5个人博客网页（HTML5期末大作业）
06-25
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。 2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、...
HTML5期末大作业 基于HTML+CSS+JavaScript学校官网首页
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
【web课程设计】HTML+CSS仿QQ音乐网站
qq_38514921的博客
03-20 1580
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
html网页制作 仿QQ音乐(HTML+CSS)
12-14 1618
加粗样式 📂文章目录二、✍️网站描述三、📚网站介绍四、💠网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货录) ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨‍🎓网站题目 🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。 二、✍️网站描述 🏷️HTML音乐网
QQ音乐静态页面设计-思路分享和代码
热门推荐
SouthWind37的博客
01-25 2万+
QQ音乐静态页面设计布局思路一、 顶部导航栏设计< Header >二、内容版块设计< content >歌单推荐三、新歌首发四、底部版权、外链部分设计< footer >五、关于不同浏览器格式的统一五、完整代码行六、完整代码实现效果 布局思路 这个练习项目通过模仿QQ音乐网页版的布局模式和基础动画效果达到以下目的： 1.掌握基本的HTML标签，乃至⼀些⽐较新的H5标签，⽐如<header> <footer> 。 2.掌握基本
用HTML+CSS做一个漂亮简单的个人音乐网页
网页设计与制作
01-05 191
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
计算机毕业设计-仿QQ音乐--HTML+CSS
Snake-Ma的博客
02-19 3159
HTML部分 <body> <!--头部--> <header> <div class="nav"> <div class="first"> <div class="logo"> <a href="#"><img src="./img/logo.png" alt="" />.
html页面音乐播放器_embed代码
#维多利亚的秘密#
04-01 2304
播放器代码如下： HTML播放器样式1 代码： width=315 border=1> style="FILTER: invert(); WIDTH: 315px; HEIGHT: 28px" src=音乐地址 type=audio/mpeg  autostart="true">
使用HTML5仿制的QQ音乐PC版界面
kirinmin的博客
03-28 1万+
QQ音乐界面仿制 在专业认识实习中，我们通过学习HTML超文本标记语言，提高了静态web前端页面的开发能力，下面就给大家展示一下我们小组仿制的QQ音乐官网界面，只是仿制了PC版，但是部分手机浏览器（QQ浏览器Anoriod）也可以打开（无法进行手机版界面自适应）。 下面展示一下各界面的源码： 主页 <!DOCTYPE html> <html lang="en"> <h...
HTML仿QQ音乐页面附源码（无框架）
qq_45566354的博客
06-21 5696
大概的仿了一下，没有仿上面的导航栏部分 效果展示 qq官网姐妹界面 我仿照写的页面 hover效果 源码 1.html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>梦不落雨林</title> <link href="css/zhuanji.css" type="text/css" rel="stylesheet" /> &lt
HTML5期末大作业
12-07
HTML5期末大作业是一项考核学生HTML5编程能力的任务，通常由学校或老师布置。这项任务要求学生使用HTML5技术，设计并实现一个网站或应用程序。这个网站或应用程序需要包含多种元素，例如文本、图片、音频、视频、动画等等。学生需要在规定的时间内完成这个任务，并提交源代码和演示文稿等材料。 由于每个学校或老师的要求可能不同，因此每个学生的HTML5期末大作业可能会有所不同。有些作业可能需要使用JavaScript等技术，有些作业可能需要使用特定的API或框架。但总的来说，这项任务的目的是考察学生的HTML5编程能力和创新能力。 如果你需要更多关于HTML5期末大作业的信息，可以向你的老师或同学咨询，或者在网上搜索相关的资料。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值