Html实现QQ音乐首页（响应式）

项目访问

reset.css

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-weight: normal;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
  display: block;
}
ol, ul, li{
  list-style: none;
}
blockquote, q{
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
  content: '';
  content: none;
}
table{
  border-collapse: collapse;
  border-spacing: 0;
}
 
/* custom */
a{
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track-piece{
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
html, body{
  width: 100%;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
body{
  line-height: 1;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{
  overflow-y: scroll;
}
 
/*隐藏*/
.dn{
  display: none;
}

.container {
  width: 1000px;
}
/* 头部 */
.mod_header .header_container {
  width: 1000px;
  margin: 0 auto;
}
.mod_header .header_container .mod_top_subnav {
  min-width: max-content;
}
.mod_header .header_container .qqmusic_title {
  margin-right: 0px;
}
.mod_header .header_container .mod_top_nav {
  margin-left: -20px;
}
.mod_header .header_container .mod_top_search {
  margin-left: -20px;
}
.mod_header .header_container .header_opt {
  clear: left;
  float: none;
  position: absolute;
  right: -51px;
  transform: scale(0.6);
}
.mod_header .header_container .mod_top_subnav {
  justify-content: space-between;
  padding-left: 0px;
  margin-right: 0px;
}
.mod_header .header_container .mod_top_subnav li {
  margin-right: 0px;
}
.mod_header .header_container .media_scale {
  transform: scale(0.83);
}
/* 歌单推荐 */
.mod_index-hot .section_inner .mod_playlist .playlist_item {
  justify-content: space-between;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li:nth-child(n + 6) {
  display: block;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li:nth-child(6) {
  margin-left: 20px;
}
/* 歌单首发 */
.mod_index-song .section_inner .mod_index_tab .all {
  transform: scale(0.83);
  left: 89px;
}
.mod_index-song .section_inner .slide_list {
  justify-content: space-around;
}
.mod_index-song .section_inner .slide_list .colum:nth-child(3) {
  display: none;
}
/* 精彩推荐 */
.mod_index-event .section_inner .slide_list {
  justify-content: center;
}
.mod_index-event .section_inner .slide_list li:last-child {
  display: none;
}
/* 新碟首发 */
.mod_index-album .section_inner .js_list li:nth-child(n + 9) {
  display: none;
}
/* 排行榜 */
.toplist_list li {
  /* 将最右一个 li 隐藏掉 */
}
.toplist_list li:last-child {
  display: none;
}
/* MV */
.mod_index-mv .section_inner .mod_mv li:nth-child(n + 9) {
  display: none;
}
/* 向左向右 */
.mod_slide_box {
  z-index: -10;
}
.mod_slide_box .slide_action {
  display: none;
}
/* 客户端 */
.popup_guide {
  transform: scale(0.83);
  right: 0px;
}

icon.css

@font-face {
  font-family: "iconfont"; /* Project id 2691407 */
  src: url('//at.alicdn.com/t/font_2691407_ni95wafj4na.woff2?t=1626922468488') format('woff2'),
       url('//at.alicdn.com/t/font_2691407_ni95wafj4na.woff?t=1626922468488') format('woff'),
       url('//at.alicdn.com/t/font_2691407_ni95wafj4na.ttf?t=1626922468488') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bofang:before {
  content: "\e635";
}

.icon-fangdajing:before {
  content: "\e690";
}

index.css

.container {
  width: 1200px;
  margin: 0px auto;
}
/* 清浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* 向左向右 页面宽度 */
.mod_slide_box {
  width: 100%;
  min-width: max-content;
  position: relative;
  overflow: hidden;
}
.mod_slide_box:hover .slide_action {
  transform: translateX(0%);
  transition: transform 0.8s;
}
.mod_slide_box .slide_action {
  position: absolute;
  width: 59px;
  height: 108px;
  background-color: #efefef;
  text-align: center;
  transition: transform 0.8s;
}
.mod_slide_box .slide_action:hover {
  background-color: #e2e2e2;
}
.mod_slide_box .slide_action a {
  display: block;
  width: 51px;
  height: 91px;
  margin-top: 8px;
  transform: scale(0.5);
}
.mod_slide_box .slide_action-left {
  top: 228px;
  transform: translateX(-100%);
}
.mod_slide_box .slide_action-left a {
  margin-left: 0px;
  background-image: url("../image/icon.png");
  background-repeat: no-repeat;
  background-position: -40px -229px;
}
.mod_slide_box .slide_action-right {
  top: 228px;
  right: 0;
  transform: translateX(100%);
}
.mod_slide_box .slide_action-right a {
  margin-left: 18px;
  background-image: url("../image/icon.png");
  background-repeat: no-repeat;
  background-position: 11px -232px;
}
/* 分栏条 */
.mod_slide_box .section_inner .mod_index_tab {
  text-align: center;
  height: 50px;
}
.mod_slide_box .section_inner .mod_index_tab a {
  line-height: 22.5px;
  font-size: 15px;
  color: #333333;
  font-weight: 400;
  margin: 0px 24px;
}
.mod_slide_box .section_inner .mod_index_tab a:hover {
  color: #31c27c;
}
/* section 头部 */
.mod_slide_box .section_inner .index_hd {
  height: 40px;
  padding: 50px 0px 24px;
}
.mod_slide_box .section_inner .index_hd .index_tit {
  width: 196px;
  height: 40px;
  margin: 0px auto;
}
/* 图片放大特效 */
.img_cover_box {
  position: relative;
  overflow: hidden;
}
.img_cover_box:hover img {
  transform: scale(1.2);
  -ms-transform: scale(1.2);
}
.img_cover_box:hover i {
  opacity: 1;
}
.img_cover_box img {
  cursor: pointer;
  transition: all 0.8s;
  -ms-transition: all 0.8s;
}
.img_cover_box i {
  background: url(../image/bofang.png) no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.8s;
}
/* 小点 */
.mod_slide_box .section_inner .mod_slide_switch {
  display: flex;
  justify-content: center;
}
.mod_slide_box .section_inner .mod_slide_switch a {
  width: 28px;
  height: 12px;
  padding-bottom: 26px;
  margin: 0px 1px;
}
.mod_slide_box .section_inner .mod_slide_switch a:first-child i {
  background-color: #afafaf;
}
.mod_slide_box .section_inner .mod_slide_switch a i {
  margin: 0 auto;
  display: block;
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.mod_slide_box .section_inner .mod_slide_switch a i:hover {
  background-color: #afafaf;
}
/* 头部 */
.mod_header {
  width: 100%;
  min-width: max-content;
  height: 142px;
  margin: 0 auto;
}
.mod_header .header_container {
  width: 1200px;
  margin: 0px auto;
  position: relative;
}
.mod_header .header_container .qqmusic_title {
  width: 172px;
  height: 90px;
  padding-top: 22px;
  box-sizing: border-box;
  margin-right: 30px;
  float: left;
}
.mod_header .header_container .qqmusic_title .qqmusic_logo {
  width: 170px;
  height: 46px;
}
.mod_header .header_container .mod_top_nav {
  height: 90px;
  float: left;
}
.mod_header .header_container .mod_top_nav li {
  position: relative;
  height: 90px;
  margin-right: -5px;
  float: left;
  text-align: center;
  padding: 0px 20px;
  box-sizing: border-box;
}
.mod_header .header_container .mod_top_nav li:first-child {
  background-color: #31c27c;
}
.mod_header .header_container .mod_top_nav li:first-child a {
  color: #fff;
}
.mod_header .header_container .mod_top_nav li:last-child {
  width: 66.1px;
}
.mod_header .header_container .mod_top_nav li:nth-child(n + 2):hover a {
  color: #31c27c;
}
.mod_header .header_container .mod_top_nav li:nth-child(n + 3):hover .popup_data_detail {
  visibility: visible;
}
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail {
  visibility: hidden;
  position: absolute;
  top: 68px;
  left: 20px;
  width: 160px;
  padding: 9px 0px 18px;
  box-sizing: border-box;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0 0 4px #000000;
  border-radius: 4px;
}
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail p {
  margin-left: 16px;
  line-height: 18px;
  font-size: 12px;
  color: #000000;
  font-weight: 400;
}
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail p i {
  display: inline-block;
  transform: scale(0.6);
  margin-right: -8px;
  vertical-align: middle;
}
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail p .icon-hq {
  width: 30px;
  height: 30px;
  margin-left: -24px;
  background-image: url("../image/icon1.png");
  background-repeat: no-repeat;
  background-position: 0 0;
}
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail p .icon-dts {
  width: 30px;
  height: 34px;
  margin-left: -28px;
  background-image: url("../image/icon1.png");
  background-repeat: no-repeat;
  background-position: 0 -54px;
}
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail p .icon-skin {
  width: 30px;
  height: 33px;
  margin-left: -28px;
  background-image: url("../image/icon1.png");
  background-repeat: no-repeat;
  background-position: 0 -113px;
}
.mod_header .header_container .mod_top_nav li:nth-child(n + 3) .popup_data_detail .btn {
  display: block;
  margin: 6px auto 0;
  line-height: 25px;
  font-size: 12px;
  color: #ffffff;
  font-weight: 400;
  width: 135px;
  height: 25px;
  text-align: center;
  border-radius: 25px;
  background-color: #31c27c;
  background-image: linear-gradient(90deg, #24ccaa, #31c27c);
}
.mod_header .header_container .mod_top_nav li a {
  line-height: 90px;
  font-size: 18px;
  color: #000000;
  font-weight: 500;
  height: 100%;
}
.mod_header .header_container .mod_top_nav li .top_nav_mark {
  height: 14px;
  position: absolute;
  top: 18px;
  right: 0;
}
.mod_header .header_container .mod_top_search {
  position: relative;
  width: 220px;
  height: 64px;
  margin-left: 40px;
  float: left;
  padding-bottom: 26px;
}
.mod_header .header_container .mod_top_search .mod_search_input {
  position: relative;
  width: 225px;
  height: 38px;
  box-sizing: border-box;
  margin-top: 26px;
}
.mod_header .header_container .mod_top_search .mod_search_input input {
  width: 174px;
  height: 34px;
  line-height: 1.5;
  outline: none;
  border: none;
  font-size: 14px;
  padding-left: 5px;
  padding-right: 0px;
  border: 1px solid #c9c9c9;
  border-right: none;
}
.mod_header .header_container .mod_top_search .mod_search_input button {
  position: absolute;
  width: 43px;
  height: 38px;
  border: none;
  top: 0px;
  right: 2px;
  border: 1px solid #c9c9c9;
  border-left: none;
  background-color: #fff;
}
.mod_header .header_container .mod_top_search .mod_search_input button:hover {
  color: #31c27c;
}
.mod_header .header_container .mod_top_search .mod_search_other {
  visibility: hidden;
  transition: height 0.8s;
  position: absolute;
  top: 63px;
  left: 0px;
  border: 1px solid #c9c9c9;
  width: 221px;
  height: 237px;
  z-index: 11;
  background-color: #fff;
}
.mod_header .header_container .mod_top_search .mod_search_other .search_hot {
  height: 180px;
  width: 100%;
  box-sizing: border-box;
}
.mod_header .header_container .mod_top_search .mod_search_other .search_hot li {
  padding: 0 11px;
}
.mod_header .header_container .mod_top_search .mod_search_other .search_hot li:hover {
  background-color: #31c27c;
}
.mod_header .header_container .mod_top_search .mod_search_other .search_hot li:hover .info span {
  color: #fff;
}
.mod_header .header_container .mod_top_search .mod_search_other .search_hot li .info .search_hot_number {
  float: left;
  width: 18px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #ff4222;
  font-weight: 400;
}
.mod_header .header_container .mod_top_search .mod_search_other .search_hot li .info .search_hot_name {
  float: left;
  line-height: 36px;
  font-size: 14px;
  color: #333333;
  font-weight: 400;
}
.mod_header .header_container .mod_top_search .mod_search_other .search_hot li .info .search_hot_listen {
  float: right;
  line-height: 36px;
  font-size: 12px;
  color: #999999;
  font-weight: 400;
}
.mod_header .header_container .mod_top_search .mod_search_other .search_history {
  height: 57px;
  width: 100%;
  padding-left: 11px;
  box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: 10px;
}
.mod_header .header_container .mod_top_search .mod_search_other .search_history span {
  display: block;
  height: 36px;
  float: left;
  line-height: 36px;
  font-size: 14px;
  color: #999999;
  font-weight: 400;
}
.mod_header .header_container .mod_top_search .mod_search_other .search_history i {
  display: block;
  float: right;
  width: 35px;
  height: 34px;
  transform: scale(0.6);
  background-image: url("../image/icon.png");
  background-repeat: no-repeat;
  background-position: -197px 0px;
}
.mod_header .header_container .header_opt {
  float: right;
  width: 263px;
  height: 90px;
}
.mod_header .header_container .header_opt .top_login__link {
  float: left;
  width: 38px;
  height: 90px;
  font-size: 16px;
  font-weight: 400;
  margin-right: 10px;
  color: #000;
  line-height: 90px;
}
.mod_header .header_container .header_opt .top_login__link:hover {
  color: #31c27c;
}
.mod_header .header_container .header_opt .mod_select {
  float: left;
  text-align: center;
  width: 122px;
  height: 38px;
  margin-top: 24px;
  background-color: #31c27c;
  border-radius: 4px;
  position: relative;
}
.mod_header .header_container .header_opt .mod_select:hover .select_choose:after {
  transform: rotate(180deg);
}
.mod_header .header_container .header_opt .mod_select:hover .select_box {
  visibility: visible;
}
.mod_header .header_container .header_opt .mod_select .select_choose {
  width: 95px;
  height: 37.6px;
  padding: 1px 15px 1px 10px;
  line-height: 37.6px;
  color: #fff;
  font-size: 13px;
}
.mod_header .header_container .header_opt .mod_select .select_choose:after {
  position: absolute;
  content: " ";
  right: 8px;
  top: 16px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid;
}
.mod_header .header_container .header_opt .mod_select .select_box {
  visibility: hidden;
  position: absolute;
  width: 100%;
  z-index: 10;
  top: 38px;
}
.mod_header .header_container .header_opt .mod_select .select_box .select_item {
  font-size: 13px;
  color: #000000;
  font-weight: 400;
  line-height: 40px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  background-color: #fff;
  border: 1px solid #c9c9c9;
}
.mod_header .header_container .header_opt .mod_select .select_box .select_item:hover {
  background-color: #31c27c;
  color: #fff;
}
.mod_header .header_container .header_opt .mod_select .select_box .select_item:first-of-type {
  border-top: 1px solid #c9c9c9;
}
.mod_header .header_container .header_opt .mod_select .select_box .select_item:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.mod_header .header_container .header_opt .mod_select-pay {
  text-align: center;
  float: left;
  margin-left: 10px;
  box-sizing: border-box;
  width: 81px;
  height: 36px;
  margin-top: 24px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #333;
  position: relative;
}
.mod_header .header_container .header_opt .mod_select-pay:hover {
  background-color: #31c27c;
  border-color: #31c27c;
}
.mod_header .header_container .header_opt .mod_select-pay:hover .select_choose:after {
  transform: rotate(180deg);
}
.mod_header .header_container .header_opt .mod_select-pay:hover a {
  color: #fff;
}
.mod_header .header_container .header_opt .mod_select-pay:hover .select_box {
  visibility: visible;
}
.mod_header .header_container .header_opt .mod_select-pay .select_choose {
  width: 56px;
  height: 37.6px;
  padding: 0px 15px 0px 10px;
  display: inline-block;
  line-height: 37.6px;
  color: #000;
  font-size: 13px;
  position: relative;
}
.mod_header .header_container .header_opt .mod_select-pay .select_choose:after {
  position: absolute;
  content: "";
  right: 8px;
  top: 16px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid;
}
.mod_header .header_container .header_opt .mod_select-pay .select_box {
  visibility: hidden;
  position: absolute;
  width: 100%;
  z-index: 10;
  top: 35px;
}
.mod_header .header_container .header_opt .mod_select-pay .select_box .select_item {
  font-size: 13px;
  color: #000000;
  font-weight: 400;
  line-height: 40px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  background-color: #fff;
  border: 1px solid #c9c9c9;
}
.mod_header .header_container .header_opt .mod_select-pay .select_box .select_item:hover {
  background-color: #31c27c;
  color: #fff;
}
.mod_header .header_container .header_opt .mod_select-pay .select_box .select_item:first-of-type {
  border-top: 1px solid #c9c9c9;
}
.mod_header .header_container .header_opt .mod_select-pay .select_box .select_item:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.mod_header .header_container .mod_top_subnav {
  position: absolute;
  border-top: 1px solid #f2f2f2;
  width: 1020px;
  height: 51px;
  padding-left: 230px;
  margin-right: -50px;
  margin: 0 auto;
  z-index: -1;
  top: 90px;
  display: flex;
}
.mod_header .header_container .mod_top_subnav li {
  margin-right: 47px;
}
.mod_header .header_container .mod_top_subnav li a {
  line-height: 51px;
  font-size: 15px;
  color: #000000;
  font-weight: 400;
}
/* 歌单推荐 */
.mod_index-hot {
  background-color: #fafafa;
  /*歌单推荐主体 */
}
.mod_index-hot .section_inner .index_hd .index_tit {
  background-image: url("../image/font.png");
  background-repeat: no-repeat;
  background-position: 0px 1px;
}
.mod_index-hot .section_inner .mod_playlist {
  margin-bottom: 20px;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item {
  display: flex;
  flex-wrap: wrap;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li {
  flex: 0 0 auto;
  width: 224px;
  height: 310px;
  margin-right: 20px;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li:nth-child(5) {
  margin-right: 0px;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li:nth-child(n + 6) {
  display: none;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li .playlist_item_box .playlist_cover {
  width: 224px;
  height: 224px;
  margin-bottom: 12px;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li .playlist_item_box .playlist_cover img {
  width: 100%;
  height: 224px;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li .playlist_item_box .playlist_cover i {
  width: 65px;
  height: 65px;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li .playlist_item_box .playlist__title {
  cursor: pointer;
  line-height: 21px;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li .playlist_item_box .playlist__title:hover {
  color: #31c27c;
}
.mod_index-hot .section_inner .mod_playlist .playlist_item li .playlist_item_box .playlist__other {
  height: 22px;
  line-height: 21px;
  font-size: 14px;
  color: #999999;
  font-weight: 400;
}
/* 歌单首发 */
.mod_index-song {
  background-color: #fdfdfd;
  /*歌单首发主体*/
}
.mod_index-song .section_inner .index_hd .index_tit {
  background-image: url("../image/font.png");
  background-repeat: no-repeat;
  background-position: 0px -44px;
}
.mod_index-song .section_inner .mod_index_tab {
  position: relative;
}
.mod_index-song .section_inner .mod_index_tab .all {
  width: 75px;
  height: 36px;
  padding: 1px 23px;
  position: absolute;
  left: 0px;
  background-color: #f6f6f6;
  border: 1px solid #c9c9c9;
  margin-top: -31px;
  line-height: 38px;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
}
.mod_index-song .section_inner .mod_index_tab .all:hover {
  background: #ededed;
}
.mod_index-song .section_inner .mod_index_tab .all i {
  width: 13px;
  height: 16px;
  display: inline-block;
}
.mod_index-song .section_inner .slide_list {
  margin-top: 11px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mod_index-song .section_inner .slide_list .colum {
  height: 333px;
  width: 370px;
  margin-right: 30px;
}
.mod_index-song .section_inner .slide_list .colum:nth-child(4) {
  display: none;
}
.mod_index-song .section_inner .slide_list .colum ul li {
  position: relative;
  height: 111px;
  width: 370px;
  padding-top: 12px;
  padding-bottom: 12px;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f2f2;
}
.mod_index-song .section_inner .slide_list .colum ul li .img_cover {
  width: 86px;
  height: 86px;
}
.mod_index-song .section_inner .slide_list .colum ul li .img_cover img {
  width: 86px;
  height: 86px;
}
.mod_index-song .section_inner .slide_list .colum ul li .img_cover i {
  width: 40px;
  height: 40px;
}
.mod_index-song .section_inner .slide_list .colum ul li .debutlist_song {
  width: 190px;
  white-space: nowrap;
  /*先强制一行内显示文本*/
  overflow: hidden;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /*文字用省略号代替超出部分*/
  position: absolute;
  top: 31px;
  left: 100px;
  line-height: 21px;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
  cursor: pointer;
}
.mod_index-song .section_inner .slide_list .colum ul li .debutlist_song:hover {
  color: #31c27c;
}
.mod_index-song .section_inner .slide_list .colum ul li .debutlist_author {
  position: absolute;
  top: 55px;
  left: 99px;
  line-height: 21px;
  font-size: 14px;
  color: #999999;
  font-weight: 400;
}
.mod_index-song .section_inner .slide_list .colum ul li .debutlist_author span {
  margin-right: 4px;
}
.mod_index-song .section_inner .slide_list .colum ul li .debutlist_author span:hover {
  color: #31c27c;
  cursor: pointer;
}
.mod_index-song .section_inner .slide_list .colum ul li .debutlist_time {
  position: absolute;
  top: 36px;
  right: 0px;
  line-height: 21px;
  font-size: 14px;
  color: #999999;
  font-weight: 400;
}
/* 精彩推荐 */
.mod_index-event {
  background-color: #f3f3f3;
}
.mod_index-event .slide_action {
  top: 160px;
}
.mod_index-event .section_inner .index_hd .index_tit {
  background-image: url("../image/font.png");
  background-repeat: no-repeat;
  background-position: 0px -97px;
}
.mod_index-event .section_inner .slide_list {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.mod_index-event .section_inner .slide_list li:last-child {
  margin-right: 0px;
}
.mod_index-event .section_inner .slide_list li a {
  display: block;
  width: 590px;
  height: 236px;
}
.mod_index-event .section_inner .slide_list li a img {
  width: 100%;
  height: 100%;
}
/* 新碟首发 */
.mod_index-album {
  background-color: #fdfdfd;
  /* 新碟首发主体 */
}
.mod_index-album .slide_action {
  top: 360px;
}
.mod_index-album .section_inner .index_hd .index_tit {
  background-image: url("../image/font.png");
  background-repeat: no-repeat;
  background-position: 0px -143px;
}
.mod_index-album .section_inner .js_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mod_index-album .section_inner .js_list li {
  height: 282.6px;
  width: 224px;
  padding-bottom: 25px;
}
.mod_index-album .section_inner .js_list li .playlist_item_box {
  height: 282.6px;
  width: 224px;
  margin-right: 20px;
}
.mod_index-album .section_inner .js_list li .playlist_item_box .img_cover {
  width: 224px;
  height: 224px;
  margin-bottom: 15px;
}
.mod_index-album .section_inner .js_list li .playlist_item_box .img_cover img {
  width: 224px;
  height: 224px;
}
.mod_index-album .section_inner .js_list li .playlist_item_box .img_cover i {
  width: 60px;
  height: 60px;
}
.mod_index-album .section_inner .js_list li .playlist_item_box .playlist_title {
  line-height: 22px;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
}
.mod_index-album .section_inner .js_list li .playlist_item_box .playlist_author {
  line-height: 22px;
  font-size: 14px;
  color: #999999;
  font-weight: 400;
}
.mod_index-album .section_inner .js_list li .playlist_item_box .playlist_author a:hover {
  color: #31c27c;
}
/* 排行榜 */
.mod_index-top {
  background-color: #f3f3f3;
}
.mod_index-top .section_inner .index_hd .index_tit {
  background-image: url("../image/font.png");
  background-repeat: no-repeat;
  background-position: 0px -196px;
}
.mod_index-top .section_inner .toplist_list {
  display: flex;
  justify-content: space-between;
}
.mod_index-top .section_inner .toplist_list li {
  width: 220px;
  height: 500px;
  flex: 1;
  position: relative;
  padding-right: 20px;
}
.mod_index-top .section_inner .toplist_list li:hover .mod_cover_icon_play {
  opacity: 1;
  transition: opacity 0.8s;
}
.mod_index-top .section_inner .toplist_list li:hover .toplist_line {
  opacity: 0;
  transition: opacity 0.8s;
}
.mod_index-top .section_inner .toplist_list li .toplist_bg_box {
  width: 220px;
  height: 500px;
  overflow: hidden;
}
.mod_index-top .section_inner .toplist_list li .toplist_bg_box:hover .toplist_bg {
  transform: scale(1.2);
  transition: transform 0.8s;
}
.mod_index-top .section_inner .toplist_list li .toplist_bg_box .toplist_bg {
  width: 220px;
  height: 500px;
  background-color: yellow;
  overflow: hidden;
}
.mod_index-top .section_inner .toplist_list li .toplist_bg_box .bg_1 {
  background-image: url("../image/bg.jpg");
  background-repeat: no-repeat;
  background-position: 0 0;
}
.mod_index-top .section_inner .toplist_list li .toplist_bg_box .bg_2 {
  background-image: url("../image/bg.jpg");
  background-repeat: no-repeat;
  background-position: 0 0;
}
.mod_index-top .section_inner .toplist_list li .toplist_bg_box .bg_3 {
  background-image: url("../image/bg.jpg");
  background-repeat: no-repeat;
  background-position: -224px 0;
}
.mod_index-top .section_inner .toplist_list li .toplist_bg_box .bg_4 {
  background-image: url("../image/bg.jpg");
  background-repeat: no-repeat;
  background-position: -448px 0;
}
.mod_index-top .section_inner .toplist_list li .toplist_bg_box .bg_5 {
  background-image: url("../image/bg.jpg");
  background-repeat: no-repeat;
  background-position: -672px 0;
}
.mod_index-top .section_inner .toplist_list li .toplist_head {
  width: 200px;
  height: 56.6px;
  margin-left: -100px;
  position: absolute;
  top: 50px;
  left: 112px;
  text-align: center;
}
.mod_index-top .section_inner .toplist_list li .toplist_head:before {
  content: "";
  display: block;
  width: 66px;
  height: 22px;
  margin: 0 auto 9px;
  background-image: url("../image/font.png");
  background-repeat: no-repeat;
  background-position: 0 -300px;
}
.mod_index-top .section_inner .toplist_list li .toplist_head a {
  display: block;
  height: 36px;
  line-height: 1;
  font-size: 26px;
  color: #ffffff;
  font-weight: 400;
}
.mod_index-top .section_inner .toplist_list li .mod_cover_icon_play {
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  top: 123px;
  background: url(../image/bofang.png) no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.8s;
}
.mod_index-top .section_inner .toplist_list li .toplist_line {
  position: absolute;
  left: 50%;
  top: 148px;
  margin-left: -27px;
  width: 36px;
  height: 2px;
  background: #fff;
  opacity: 1;
  transition: opacity 0.8s;
}
.mod_index-top .section_inner .toplist_list li .toplist_songlist {
  position: absolute;
  top: 188px;
  left: 30px;
  right: 30px;
  white-space: nowrap;
  line-height: 21px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 400;
}
.mod_index-top .section_inner .toplist_list li .toplist_songlist .toplist_song {
  width: 149px;
  height: 46.6px;
  padding-left: 15px;
  margin-bottom: 27px;
}
.mod_index-top .section_inner .toplist_list li .toplist_songlist .toplist_song .toplist_number {
  position: absolute;
  top: 0;
  left: 0;
}
.mod_index-top .section_inner .toplist_list li .toplist_songlist .toplist_song .toplist_songname {
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod_index-top .section_inner .toplist_list li .toplist_songlist .toplist_song .toplist_songname a {
  line-height: 21px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 400;
}
.mod_index-top .section_inner .toplist_list li .toplist_songlist .toplist_song .toplist_artist {
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod_index-top .section_inner .toplist_list li .toplist_songlist .toplist_song .toplist_artist a {
  line-height: 21px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 400;
}
/* MV */
.mod_index-mv {
  background-color: #fdfdfd;
}
.mod_index-mv .section_inner .index_hd .index_tit {
  background-image: url("../image/font.png");
  background-repeat: no-repeat;
  background-position: 0px -249px;
}
.mod_index-mv .section_inner .mod_mv {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mod_index-mv .section_inner .mod_mv li {
  width: 224px;
  height: 206.5px;
  margin-bottom: 25px;
}
.mod_index-mv .section_inner .mod_mv li .img_cover {
  margin-bottom: 15px;
}
.mod_index-mv .section_inner .mod_mv li .img_cover img {
  width: 224px;
  height: 126.662px;
}
.mod_index-mv .section_inner .mod_mv li .img_cover i {
  width: 60px;
  height: 60px;
}
.mod_index-mv .section_inner .mod_mv li .mv_list_title {
  width: 100%;
  line-height: 21px;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mod_index-mv .section_inner .mod_mv li .mv_list_title:hover {
  color: #31c27c;
}
.mod_index-mv .section_inner .mod_mv li .mv_list_singer {
  line-height: 21px;
  font-size: 14px;
  color: #999999;
  font-weight: 400;
}
.mod_index-mv .section_inner .mod_mv li .mv_list_singer:hover {
  cursor: pointer;
  color: #31c27c;
}
.mod_index-mv .section_inner .mod_mv li .mv_list_info {
  position: relative;
  margin-left: 21px;
  line-height: 18px;
  font-size: 14px;
  color: #999999;
  font-weight: 400;
  vertical-align: bottom;
}
.mod_index-mv .section_inner .mod_mv li .mv_list_info .mv_list_listen_icon {
  position: absolute;
  left: -30px;
  top: -6px;
  width: 39px;
  height: 28px;
  display: inline-block;
  transform: scale(0.4);
  background-image: url("../image/icon.png");
  background-repeat: no-repeat;
  background-position: -359px -37px;
}
/* footer */
.footer {
  background-color: #333333;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
/* 客户端下载 */
.popup_guide {
  position: fixed;
  top: 164px;
  right: 40px;
  z-index: 999;
  padding: 18px;
  border-radius: 4px;
  box-shadow: 0 3px 5px rgba(70, 68, 68, 0.07);
  background-color: #fff;
}
.popup_guide img {
  width: 102px;
  margin: 0px 21px 9px;
}
.popup_guide .popup_guide_txt {
  width: 144px;
  margin: 0px auto 10px;
  line-height: 24px;
  font-size: 16px;
  color: #a6a6a6;
  font-weight: 400;
}
.popup_guide .popup_guide_btn {
  display: block;
  margin: 0 auto;
  width: 130px;
  height: 26px;
  line-height: 26px;
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  border-radius: 26px;
  text-align: center;
  background-color: #31c27c;
}
.popup_guide .popup_guide_btn .popup_guide__btn_icon {
  display: inline-block;
  margin-right: 4px;
  vertical-align: -1px;
  width: 30px;
  margin-right: -10px;
  height: 26px;
  background-image: url("../image/icon.png");
  background-repeat: no-repeat;
  background-position: -318px -640px;
  transform: scale(0.5);
  vertical-align: middle;
}

index.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/index.css" media="all" />
    <link rel="stylesheet" href="./css/reset.css" media="all"/>
    <link rel="stylesheet" href="./css/icon.css" media="all"/>
    <link rel="stylesheet" href="./css/media_index.css" media="(max-width: 1300px)" />
  </head>
  <body>
    <!-- 头部 -->
   <div class="mod_header">
      <div class="header_container clearfix">
        <h1 class="qqmusic_title media_scale">
          <img
            src="./image/logo.png"
            alt="QQ音乐"
            class="qqmusic_logo"
          />
        </h1>
        <ul class="mod_top_nav clearfix media_scale">
          <li>
            <a href="javascript:;">音乐馆</a>
          </li>
          <li>
            <a href="javascript:;">我的音乐</a>
          </li>
          <li>
            <a href="javascript:;">客户端</a>
            <img
              src="./image/mark_1.png"
              class="top_nav_mark"
              alt="抢特权"
            />
            <div class="popup_data_detail">
              <p>
                <i class="icon-hq"></i>
                HQ高品质 全员开启
              </p>
              <p>
                <i class="icon-dts"></i>
                独家音效 全面升级
              </p>
              <p>
                <i class="icon-skin"></i>
                轻盈视觉 动态皮肤
              </p>
              <a href="" class="btn">下载体验</a>
            </div>
          </li>
          <li><a href="">开放平台</a></li>
          <li>
            <a href="">VIP</a>
          </li>
        </ul>
        <div class="mod_top_search clearfix media_scale">
          <div class="mod_search_input">
            <input type="text" placeholder="搜索音乐、MV、歌单、用户" />
            <button><i class="iconfont icon-fangdajing"></i></button>
          </div>
          <div class="mod_search_other">
            <ul class="search_hot">
             <li>
                <div class="info clearfix">
                  <span class="search_hot_number">1</span>
                  <span class="search_hot_name">我们的歌 </span>
                  <span class="search_hot_listen">76.6万</span>
                </div>
             </li>  
             <li>
              <div class="info clearfix">
                <span class="search_hot_number">2</span>
                <span class="search_hot_name">冰雪奇缘2 </span>
                <span class="search_hot_listen">58.7万</span>
              </div>
             </li>
             <li>
              <div class="info clearfix">
                <span class="search_hot_number">3</span>
                <span class="search_hot_name">张杰</span>
                <span class="search_hot_listen">32.4万</span>
              </div>
             </li>
             <li>
              <div class="info clearfix">
                <span class="search_hot_number">4</span>
                <span class="search_hot_name">桥边姑娘 </span>
                <span class="search_hot_listen">28.8万</span>
              </div>
             </li>
             <li>
              <div class="info clearfix">
                <span class="search_hot_number">1</span>
                <span class="search_hot_name">星辰大海</span>
                <span class="search_hot_listen">20.3万</span>
              </div>
             </li>
            </ul>
            <div class="search_history clearfix">
              <span>历史搜索</span>
              <i></i>
            </div>
          </div>
        </div>
        <div class="header_opt clearfix ">
          <a href="javascript:;" class="top_login__link">登录</a>
          <div class="mod_select">
            <a href="javascript:;" class="select_choose"> 开通VIP</a>
            <ul class="select_box">
              <li class="select_item">开通绿钻豪华版</li>
              <li class="select_item">开通付费包</li>
            </ul>
          </div>
          <div class="mod_select-pay">
            <a href="javascript:;" class="select_choose"> 充值</a>
            <ul class="select_box">
              <li class="select_item">购买乐币</li>
              <li class="select_item">充值饭票</li>
            </ul>
          </div>
        </div>
        <ul class="mod_top_subnav media_scale">
          <li>
            <a href="javascript:;">首页</a>
          </li>
          <li>
            <a href="javascript:;">歌手</a>
          </li>
          <li>
            <a href="javascript:;">新碟</a>
          </li>
          <li>
            <a href="javascript:;">排行榜</a>
          </li>
          <li>
            <a href="javascript:;">分类歌单</a>
          </li>
          <li>
            <a href="javascript:;">电台</a>
          </li>
          <li>
            <a href="javascript:;">MV</a>
          </li>
          <li>
            <a href="javascript:;">数字专辑</a>
          </li>
          <li>
            <a href="javascript:;">票务</a>
          </li>
        </ul>
      </div>
    </div> 
    <!-- 歌单推荐 -->
    <div class="mod_index-hot mod_slide_box">
      <div class="slide_action-left slide_action">
        <a href="javascript:;"></a>
      </div>
      <!-- 主体 -->
      <div class="section_inner container">
        <div class="index_hd">
          <h2 class="index_tit"></h2>
        </div>
        <div class="mod_index_tab">
          <a href="javascript:;" style="color: #31c27c">为你推荐</a>
          <a href="javascript:;">官方歌单</a>
          <a href="javascript:;">情歌</a>
          <a href="javascript:;">网络歌曲</a>
          <a href="javascript:;">经典</a>
          <a href="javascript:;">KTV热歌</a>
        </div>
        <div class="mod_playlist">
          <ul class="playlist_item">
            <li>
              <div class="playlist_item_box">
                <div class="playlist_cover img_cover_box">
                  <img
                    src="./image/hot_1.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <h4 class="playlist__title">上分必备|身法操作不可少的BGM</h4>
                <div class="playlist__other">播放量：163.6万</div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box ">
                <div class="playlist_cover img_cover_box">
                  <img
                    src="./image/hot_2.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <h4 class="playlist__title">100首精选粤语歌 怀念旧时光</h4>
                <div class="playlist__other">播放量：1.1亿</div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box ">
                <div class="playlist_cover img_cover_box">
                  <img
                    src="./image/hot_3.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <h4 class="playlist__title">
                  绝对典藏！400首欧美动感热曲全收录
                </h4>
                <div class="playlist__other">播放量：1.5亿</div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box ">
                <div class="playlist_cover img_cover_box">
                  <img
                    src="./image/hot_4.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <h4 class="playlist__title">国产嘻哈：rap们的高能时刻！</h4>
                <div class="playlist__other">播放量：154.3万</div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box ">
                <div class="playlist_cover img_cover_box">
                  <img
                    src="./image/hot_5.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <h4 class="playlist__title">流行｜一秒倾心的神仙歌曲</h4>
                <div class="playlist__other">播放量：487.9万</div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box ">
                <div class="playlist_cover img_cover_box">
                  <img
                    src="./image/hot_6.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <h4 class="playlist__title">官方精选：小鬼-王琳凯 Lil Ghost </h4>
                <div class="playlist__other">播放量：879.1万</div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box ">
                <div class="playlist_cover img_cover_box">
                  <img
                    src="./image/hot_7.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <h4 class="playlist__title">欧美流行向｜爱于前奏 死于高潮</h4>
                <div class="playlist__other">播放量：1019.7万</div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box ">
                <div class="playlist_cover img_cover_box">
                  <img
                    src="./image/hot_8.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <h4 class="playlist__title">轻柔小众 | 愿你遇见所有的甜</h4>
                <div class="playlist__other">播放量：134.9万</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="mod_slide_switch">
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
        </div>
      </div>
      <!-- 主体 end -->
      <div class="slide_action-right slide_action">
        <a href="javascript:;"></a>
      </div>
    </div>
    <!-- 歌单首发 -->
    <div class="mod_index-song mod_slide_box">
      <div class="slide_action-left slide_action">
        <a href="javascript:;"></a>
      </div>
      <!-- 主体 -->
      <div class="section_inner container">
        <div class="index_hd">
          <h2 class="index_tit"></h2>
        </div>
        <div class="mod_index_tab">
          <a href="javascript:;" style="color: #31c27c">最新</a>
          <a href="javascript:;">内地</a>
          <a href="javascript:;">港台</a>
          <a href="javascript:;">欧美</a>
          <a href="javascript:;">韩国</a>
          <a href="javascript:;">日本</a>
          <div class="all">
            <i></i>
            播放全部
          </div>
        </div>
        <div class="slide_list">
          <div class="colum">
            <ul>
              <li>
                <div class="img_cover img_cover_box">
                  <img
                    src="./image/song_1.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <div class="debutlist_song">新造的人(feat. SHIMICA)</div>
                <div class="debutlist_author">
                  <span>郑秀文</span>/<span>黄宇希</span>
                </div>
                <div class="debutlist_time">03:26</div>
              </li>
              <li>
                <div class="img_cover img_cover_box">
                  <img
                    src="./image/song_2.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <div class="debutlist_song">Shining in the dark</div>
                <div class="debutlist_author">
                  <span>Ghost小鬼</span>
                </div>
                <div class="debutlist_time">03:42</div>
              </li>
              <li>
                <div class="img_cover img_cover_box">
                  <img
                    src="./image/song_3.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <div class="debutlist_song">泊 Anchor (Tomorrow 中文版)</div>
                <div class="debutlist_author">
                  <span>CORSAK胡梦周</span>
                </div>
                <div class="debutlist_time">03:25</div>
              </li>
            </ul>
          </div>
          <div class="colum">
            <ul>
              <li>
                <div class="img_cover img_cover_box">
                  <img
                    src="./image/song_4.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <div class="debutlist_song">心城 《俑之城》电影片尾曲</div>
                <div class="debutlist_author">
                  <span>黄霄雲</span>
                </div>
                <div class="debutlist_time">04:03</div>
              </li>
              <li>
                <div class="img_cover img_cover_box">
                  <img
                    src="./image/song_5.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <div class="debutlist_song">
                  Born A Winner 《和平精英》2021超级杯主题曲
                </div>
                <div class="debutlist_author">
                  <span>刘宪华 (Henry)</span>/<span>和平精英</span>
                </div>
                <div class="debutlist_time">03:22</div>
              </li>
              <li>
                <div class="img_cover img_cover_box">
                  <img
                    src="./image/song_6.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <div class="debutlist_song">对味 《你好，火焰蓝》网剧插曲</div>
                <div class="debutlist_author">
                  <span>BY2</span>
                </div>
                <div class="debutlist_time">03:26</div>
              </li>
            </ul>
          </div>
          <div class="colum">
            <ul>
              <li>
                <div class="img_cover img_cover_box">
                  <img
                    src="./image/song_7.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <div class="debutlist_song">唱支山歌给党听 (致敬版)</div>
                <div class="debutlist_author">
                  <span>李光羲</span>/<span>姜昆</span>/<span>王二妮</span>
                </div>
                <div class="debutlist_time">03:26</div>
              </li>
              <li>
                <div class="img_cover img_cover_box">
                  <img
                    src="./image/song_8.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <div class="debutlist_song">平行线 (Wish You Were Here)</div>
                <div class="debutlist_author">
                  <span>Vicetone</span>/<span>WILLIM缪维霖</span>/<span
                    >黄霄雲</span
                  >
                </div>
                <div class="debutlist_time">03:26</div>
              </li>
              <li>
                <div class="img_cover img_cover_box">
                  <img
                    src="./image/song_9.jpg"
                    alt=""
                  />
                  <i></i>
                </div>
                <div class="debutlist_song">Stoned at the Nail Salon</div>
                <div class="debutlist_author">
                  <span>Lorde</span>
                </div>
                <div class="debutlist_time">04:26</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="mod_slide_switch">
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
        </div>
      </div>
      <!-- 主体 end -->
      <div class="slide_action-right slide_action">
        <a href="javascript:;"></a>
      </div>
    </div>
    <!-- 精彩推荐 -->
    <div class="mod_index-event mod_slide_box">
      <div class="slide_action-left slide_action">
        <a href="javascript:;"></a>
      </div>
      <!-- 主体 -->
      <div class="section_inner container">
        <div class="index_hd">
          <h2 class="index_tit"></h2>
        </div>
        <ul class="slide_list">
          <li>
            <a href="javascript:;">
              <img
                src="./image/event_1.jpg"
                alt=""
              />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img
                src="./image/event_2.jpg"
                alt=""
              />
            </a>
          </li>
        </ul>
        <div class="mod_slide_switch">
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
        </div>
      </div>
      <!-- 主体 end -->
      <div class="slide_action-right slide_action">
        <a href="javascript:;"></a>
      </div>
    </div>
    <!-- 新碟首发 -->
    <div class="mod_index-album mod_slide_box">
      <div class="slide_action-left slide_action">
        <a href="javascript:;"></a>
      </div>
      <!-- 主体 -->
      <div class="section_inner container">
        <div class="index_hd">
          <h2 class="index_tit"></h2>
        </div>
        <div class="mod_index_tab">
          <a href="javascript:;" style="color: #31c27c">内地</a>
          <a href="javascript:;">港台</a>
          <a href="javascript:;">欧美</a>
          <a href="javascript:;">韩国</a>
          <a href="javascript:;">日本</a>
          <a href="javascript:;">其他</a>
        </div>
        <ul class="js_list">
            <li>
              <div class="playlist_item_box">
                  <div class="img_cover img_cover_box">
                    <img src="./image/album_1.jpg" alt="">
                    <i></i>
                  </div>
                  <h4 class="playlist_title">幼学琼林（卷二）</h4>
                  <div class="playlist_author">
                    <a href="javascript:;">窦唯</a> /
                    <a href="javascript:;">朝简</a>
                </div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box">
                <div class="img_cover img_cover_box">
                  <img src="./image/album_2.jpg" alt="">
                  <i></i>
                </div>
                <h4 class="playlist_title">单程人生</h4>
                <div class="playlist_author">
                  <a href="javascript:;">刘涛</a>  
              </div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box">
                <div class="img_cover img_cover_box">
                  <img src="./image/album_3.jpg" alt="">
                  <i></i>
                </div>
                <h4 class="playlist_title">太白</h4>
                <div class="playlist_author">
                  <a href="jacascript:;">小田音乐社</a> /
                  <a href="jacascript:;">小魂</a>
              </div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box">
                <div class="img_cover img_cover_box">
                  <img src="./image/album_4.jpg" alt="">
                  <i></i>
                </div>
                <h4 class="playlist_title">NEW STAR</h4>
                <div class="playlist_author">
                  <a href="jacascript:;">张欣尧</a> /
                  <a href="jacascript:;">星瞳</a>
              </div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box">
                <div class="img_cover img_cover_box">
                  <img src="./image/album_5.jpg" alt="">
                  <i></i>
                </div>
                <h4 class="playlist_title">微妙</h4>
                <div class="playlist_author">
                  <a href="javascript:;">裸儿</a> 
              </div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box">
                <div class="img_cover img_cover_box">
                  <img src="./image/album_6.jpg" alt="">
                  <i></i>
                </div>
                <h4 class="playlist_title">狼烟</h4>
                <div class="playlist_author">
                  <a href="javascript:;">郭皓月</a> 
              </div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box">
                <div class="img_cover img_cover_box">
                  <img src="./image/album_7.jpg" alt="">
                  <i></i>
                </div>
                <h4 class="playlist_title">自言自语</h4>
                <div class="playlist_author">
                  <a href="javascript:;">黄玉儿</a> 
              </div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box">
                <div class="img_cover img_cover_box">
                  <img src="./image/album_8.jpg" alt="">
                  <i></i>
                </div>
                <h4 class="playlist_title">牵你的手</h4>
                <div class="playlist_author">
                  <a href="javascript:;">Kyrie K</a> 
              </div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box">
                <div class="img_cover img_cover_box">
                  <img src="./image/album_9.jpg" alt="">
                  <i></i>
                </div>
                <h4 class="playlist_title">想去春天</h4>
                <div class="playlist_author">
                  <a href="javascript:;">王锵</a> /
                  <a href="javascript:;">白泽泽</a>/
                  <a href="javascript:;">边少帅</a> /
                  <a href="javascript:;">高明辉</a> 
              </div>
              </div>
            </li>
            <li>
              <div class="playlist_item_box">
                <div class="img_cover img_cover_box">
                  <img src="./image/album_10.jpg" alt="">
                  <i></i>
                </div>
                <h4 class="playlist_title">航海日记</h4>
                <div class="playlist_author">
                  <a href="javascript:;">Hayrul 海力</a> 
              </div>
              </div>
            </li>
        </ul>
        <div class="mod_slide_switch">
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
        </div>
      </div>
      <!-- 主体 end -->
      <div class="slide_action-right slide_action">
        <a href="javascript:;"></a>
      </div>
    </div>
    <!-- 排行榜 -->
    <div class="mod_index-top mod_slide_box">
      <!-- 主体 -->
      <div class="section_inner container">
        <div class="index_hd">
          <h2 class="index_tit"></h2>
        </div>
        <ul class="toplist_list">
           <li>
             <div class="toplist_bg_box">
                  <div class="toplist_bg bg_1"></div>
             </div>
             <i class="mod_cover_icon_play"></i>
             <i class="toplist_line"></i>
             <h3 class="toplist_head">
               <a href="javascript:;">热歌</a>
             </h3>
             <ul class="toplist_songlist">
               <li class="toplist_song">
                <div class="toplist_number">1</div>
                <div class="toplist_songname">
                  <a href="javascript:;">不如</a>
                </div>
                <div class="toplist_artist">
                  <a href="javascript:;">秦海清</a>
                </div>
               </li>
               <li class="toplist_song">
                <div class="toplist_number">2</div>
                <div class="toplist_songname">
                  <a href="javascript:;">放空</a>
                </div>
                <div class="toplist_artist">
                  <a href="javascript:;">A1 TRIP/大籽/Lil E</a>
                </div>
               </li>
               <li class="toplist_song">
                <div class="toplist_number">3</div>
                <div class="toplist_songname">
                  <a href="javascript:;">星辰大海</a>
                </div>
                <div class="toplist_artist">
                  <a href="javascript:;">黄霄雲</a>
                </div>
               </li>
             </ul>
           </li>
           <li>
            <div class="toplist_bg_box ">
              <div class="toplist_bg bg_2"></div>
             </div>
            <i class="mod_cover_icon_play"></i>
            <i class="toplist_line"></i>
            <h3 class="toplist_head">
              <a href="javascript:;">新歌</a>
            </h3>
            <ul class="toplist_songlist">
              <li class="toplist_song">
               <div class="toplist_number">1</div>
               <div class="toplist_songname">
                 <a href="javascript:;">Ring Ring Ring</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">不是花火呀</a>
               </div>
              </li>
              <li class="toplist_song">
               <div class="toplist_number">2</div>
               <div class="toplist_songname">
                 <a href="javascript:;">时光背面的我</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">刘至佳/韩瞳</a>
               </div>
              </li>
              <li class="toplist_song">
               <div class="toplist_number">3</div>
               <div class="toplist_songname">
                 <a href="javascript:;">雀跃</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">任然</a>
               </div>
              </li>
            </ul>
           </li>
           <li>
            <div class="toplist_bg_box ">
              <div class="toplist_bg bg_3"></div>
             </div>
            <i class="mod_cover_icon_play"></i>
            <i class="toplist_line"></i>
            <h3 class="toplist_head">
              <a href="javascript:;">流行指数</a>
            </h3>
            <ul class="toplist_songlist">
              <li class="toplist_song">
               <div class="toplist_number">1</div>
               <div class="toplist_songname">
                 <a href="javascript:;">雀跃</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">任然</a>
               </div>
              </li>
              <li class="toplist_song">
               <div class="toplist_number">2</div>
               <div class="toplist_songname">
                 <a href="javascript:;">变废为宝</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">薛之谦</a>
               </div>
              </li>
              <li class="toplist_song">
               <div class="toplist_number">3</div>
               <div class="toplist_songname">
                 <a href="javascript:;">骁</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">井胧/井迪儿</a>
               </div>
              </li>
            </ul>
           </li>
           <li>
            <div class="toplist_bg_box ">
              <div class="toplist_bg bg_4"></div>
             </div>
            <i class="mod_cover_icon_play"></i>
            <i class="toplist_line"></i>
            <h3 class="toplist_head">
              <a href="javascript:;">欧美</a>
            </h3>
            <ul class="toplist_songlist">
              <li class="toplist_song">
               <div class="toplist_number">1</div>
               <div class="toplist_songname">
                 <a href="javascript:;">Stay (Explicit)</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">The Kid LAROI/Justin Bieber</a>
               </div>
              </li>
              <li class="toplist_song">
               <div class="toplist_number">2</div>
               <div class="toplist_songname">
                 <a href="javascript:;">California (feat. 王嘉尔 & Warren Hue) (Remix)</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">88rising/Rich Brian/NIKI/王嘉尔/Warren Hue</a>
               </div>
              </li>
              <li class="toplist_song">
               <div class="toplist_number">3</div>
               <div class="toplist_songname">
                 <a href="javascript:;">Don't Wait Up</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">Shakira</a>
               </div>
              </li>
            </ul>
           </li>
           <li>
            <div class="toplist_bg_box ">
              <div class="toplist_bg bg_5"></div>
             </div>
            <i class="mod_cover_icon_play"></i>
            <i class="toplist_line"></i>
            <h3 class="toplist_head">
              <a href="javascript:;">韩国</a>
            </h3>
            <ul class="toplist_songlist">
              <li class="toplist_song">
               <div class="toplist_number">1</div>
               <div class="toplist_songname">
                 <a href="javascript:;">Lovesick Girls (JP Ver.)</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">BLACKPINK</a>
               </div>
              </li>
              <li class="toplist_song">
               <div class="toplist_number">2</div>
               <div class="toplist_songname">
                 <a href="javascript:;">When Dawn Comes Again</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">Colde (콜드)/伯贤 (백현)</a>
               </div>
              </li>
              <li class="toplist_song">
               <div class="toplist_number">3</div>
               <div class="toplist_songname">
                 <a href="javascript:;">Next Level</a>
               </div>
               <div class="toplist_artist">
                 <a href="javascript:;">aespa (에스파)</a>
               </div>
              </li>
            </ul>
           </li>
        </ul>
      </div>
       <!-- 主体 end -->
    </div>
    <!-- MV -->
    <div class="mod_index-mv mod_slide_box">
      <div class="slide_action-left slide_action">
        <a href="javascript:;"></a>
      </div>
       <!-- 主体 -->
       <div class="section_inner container">
         <div class="index_hd">
           <h2 class="index_tit"></h2>
         </div>
         <div class="mod_index_tab">
          <a href="javascript:;" style="color: #31c27c">精选</a>
          <a href="javascript:;">内地</a>
          <a href="javascript:;">港台</a>
          <a href="javascript:;">欧美</a>
          <a href="javascript:;">韩国</a>
          <a href="javascript:;">日本</a>
        </div>
        <ul class="mod_mv">
          <li>
            <div class="img_cover img_cover_box">
              <img src="./image/mv1.jpg" alt="">
              <i></i>
            </div>
            <div class="mv_list_title">
              唱支山歌给党听（青春版）
            </div>
            <p class="mv_list_singer">华语群星</p>
            <p class="mv_list_info">
              <i class="mv_list_listen_icon"></i>
              7290
            </p>
          </li>
          <li>
            <div class="img_cover img_cover_box">
              <img src="./image/mv2.jpg" alt="">
              <i></i>
            </div>
            <div class="mv_list_title">
              风雨彩虹铿锵玫瑰
            </div>
            <p class="mv_list_singer">华彩少年全体成员</p>
            <p class="mv_list_info">
              <i class="mv_list_listen_icon"></i>
              2181
            </p>
          </li>
          <li>
            <div class="img_cover img_cover_box">
              <img src="./image/mv3.jpg" alt="">
              <i></i>
            </div>
            <div class="mv_list_title">
              心城
            </div>
            <p class="mv_list_singer">黄霄雲</p>
            <p class="mv_list_info">
              <i class="mv_list_listen_icon"></i>
              1.8万
            </p>
          </li>
          <li>
            <div class="img_cover img_cover_box">
              <img src="./image/mv4.jpg" alt="">
              <i></i>
            </div>
            <div class="mv_list_title">
              When Dawn Comes Again (또 새벽이 오면)
            </div>
            <p class="mv_list_singer">Colde /伯贤</p>
            <p class="mv_list_info">
              <i class="mv_list_listen_icon"></i>
              7.9万
            </p>
          </li>
          <li>
            <div class="img_cover img_cover_box">
              <img src="./image/mv5.jpg" alt="">
              <i></i>
            </div>
            <div class="mv_list_title">
              深町小夜曲
            </div>
            <p class="mv_list_singer">李健</p>
            <p class="mv_list_info">
              <i class="mv_list_listen_icon"></i>
              8.1万
            </p>
          </li>
          <li>
            <div class="img_cover img_cover_box">
              <img src="./image/mv6.jpg" alt="">
              <i></i>
            </div>
            <div class="mv_list_title">
              施舍
            </div>
            <p class="mv_list_singer">杨宗纬</p>
            <p class="mv_list_info">
              <i class="mv_list_listen_icon"></i>
              2.0万
            </p>
          </li>
          <li>
            <div class="img_cover img_cover_box">
              <img src="./image/mv7.jpg" alt="">
              <i></i>
            </div>
            <div class="mv_list_title">
              'Hey Kid, Close Your Eyes (with Lee Sun Hee)' OFFICIAL VIDEO (전쟁터)
            </div>
            <p class="mv_list_singer">AKMU /李仙姬</p>
            <p class="mv_list_info">
              <i class="mv_list_listen_icon"></i>
              2.3万
            </p>
          </li>
          <li>
            <div class="img_cover img_cover_box">
              <img src="./image/mv8.jpg" alt="">
              <i></i>
            </div>
            <div class="mv_list_title">
              破阵
            </div>   
            <p class="mv_list_singer">阿云嘎</p>
            <p class="mv_list_info">
              <i class="mv_list_listen_icon"></i>
              1975
            </p>
          </li>
          <li>
            <div class="img_cover img_cover_box">
              <img src="./image/album_9.jpg" alt="">
              <i></i>
            </div>
            <div class="mv_list_title">
              新造的人
            </div>
            <p class="mv_list_singer">郑秀文 /黄宇希</p>
            <p class="mv_list_info">
              <i class="mv_list_listen_icon"></i>
              2.0万
            </p>
          </li>
          <li>
            <div class="img_cover img_cover_box">
              <img src="./image/mv10.jpg" alt="">
              <i></i>
            </div>
            <div class="mv_list_title">
              Leica
            </div>
            <p class="mv_list_singer">Epik High/ 金四月</p>
            <p class="mv_list_info">
              <i class="mv_list_listen_icon"></i>
              7290
            </p>
          </li>
        </ul>
        <div class="mod_slide_switch">
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
          <a href="javascript:;">
            <i class="slide_switch__bg"></i>
          </a>
        </div>
       </div>
       <!-- 主体end -->
      <div class="slide_action-right slide_action">
        <a href="javascript:;"></a>
      </div>
    </div>
    <!-- footer -->
    <div class="footer">这是底部</div>
    <!-- 客户端下载 -->
    <div class="popup_guide">
      <img src="./image/logo.png" alt="" />
      <p class="popup_guide_txt">千万高品质曲库尽享</p>
      <div class="popup_guide_btn">
        <i class="popup_guide__btn_icon"></i>
        客户端下载
      </div>
    </div>
  </body>
</html>