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

📂文章目录

一、👨‍🎓网站题目
二、✍️网站描述
三、📚网站介绍
四、💠网站演示
五、⚙️ 网站代码
- 🧱HTML结构代码
- 💒CSS样式代码
六、🥇 如何让学习不再盲目
七、🎁更多干货

一、👨‍🎓网站题目

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

二、✍️网站描述

🏷️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="static/css/style.css">
</head><body>
<!--头部-->
<div class="head"><div class="head_con"><h1 class="logo"><a href="#"><img src="static/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="static/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></li><li><div><a href="#"><img src="static/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="static/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="static/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="static/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="static/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="static/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="static/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="static/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;
}