时间：2023-07-03 05:30:01 | 来源：网站运营
时间：2023-07-03 05:30:01 来源：网站运营
HTML期末大学生网页设计作业--官网仿qq音乐(1页)：> ⛵ 源码获取 文末联系 ✈Web前端开发技术 描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星音乐演唱会主题 | 爵士乐音乐 | 民族音乐 | 等网站的设计与制作 | HTML期末大学生网页设计作业，Web大学生网页
在线咨询
<!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>关键词：音乐,作业,设计,大学生
