Html实现QQ音乐首页（响应式）_усил_html qq音乐

irpas 02-07 1527

项目访问 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>  <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>  <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>  <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>  <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>  </div>  <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>  <div class="slide_action-right slide_action"> <a href="javascript:;"></a> </div> </div>  <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>