项目访问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>