first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,a,p,ul,li,h1,h2,h3,h4,h5,h6,input {
margin: 0;
padding: 0;
}
input {
outline: none;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.content{
width: 1200px;
margin: 0 auto;
}
.pic{
overflow: hidden;
display: flex;
width: 500px;
height: 300px;
}
.pic:hover .p1{
margin-left: 0px;
}
.pic img{
width: 500px;
height: 300px;
}
.p1{
margin-left: -500px;
transition: all ease 1s;
}
</style>
</head>
<body>
<div class="content">
<div class="pic">
<img class="p1" src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159616349419ff303c494d664b08f00abdc25f1c95.jpg@s_2,w_750,h_300" alt="">
<img class="p2" src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15958676995b775f90d72d1a575245f78d6395a9e9.jpg@s_2,w_750,h_300" alt="">
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,13 @@
body,a,p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
}
input {
outline: none;
}
li{
list-style: none;
}
a{
text-decoration: none;
}

View File

@@ -0,0 +1,792 @@
body{
color: white;
}
.header{
width: 100%;
}
.header_top{
height: 95px;
}
.menu li{float: left;}
.menu+ul li{float: right; color: #333;}
.header_top>a{
height: 52px;
margin-top: 27px;
}
.header_top>a img{
width: 123px;
height: 41px;
}
.menu{
margin-left: 74px;
}
.menu li:hover a{
color: #000;
}
.menu li{
height: 95px;
line-height: 95px;
padding: 0px 17px;
}
.menu li a{
font-size: 16px;
color: #858585;
}
.activation a{
color: #000 !important;
font-weight: 400;
}.menu input{
width: 320px;
height: 34px;
border: 1px solid #e4e4e4;
padding: 0 10px;
font-size: 15px;
border-radius: 8px;
box-sizing: border-box;
background: url(../img/sosuo.png) no-repeat;
background-size: 22px;
background-position: 285px;
}
.login li{
height: 95px;
line-height: 95px;
}
.login {
margin-right: 41px;
}
.login li:nth-child(2) {
width: 1px;
height: 17px;
background: #d8d8d8;
margin: 0 20px;
margin-top: 40px;
}
.header_form{
overflow: hidden;
height: 38px;
line-height: 38px;
background-color: #fafafa;
}
.header_form .width_1200{
text-align: center;
}
.header_form a{
padding: 8px 2.5%;
font-size: 16px;
color: #333;
}
.header_form a:hover{
color: #e13228;
}
.recommend{
color: #e13228 !important;
}
.width_1200 div:nth-child(1){
overflow: hidden;
}
.Popularsong{
width: 790px;
overflow: hidden;
padding-top: 23px;
}
.tatal{
overflow: hidden;
height: 38px;
margin-bottom: 25px;
}
.tatal .left h2 {
display: inline-block;
margin-right: 15px;
font-size: 24px;
color: #333;
font-weight: 400;
}
.tatal .left span {
font-size: 14px;
color: #999;
}
.tatal img {
height: 20px;
margin-top: 16px;
width: 39px;
height: 15px;
}
.piclist li{
width: 175px;
height: 204px;
margin-right: 30px;
float: left;
margin-bottom: 26px;
}
.piclist li a{
display: block;
margin-top: 10px;
}
.pic_top{
width: 175px;
height: 175px;
position: relative;
}
.pic_top img{
width: 100%;
height: 100%;
transition: all ease 0.6s;
}
.play{
position: absolute;
width: 50px;
height: 50px;
border-radius: 100%;
background: #00000096;
line-height: 50px;
top: 50%;
left: 50%;
margin-top: calc(-38px / 2);
margin-left: calc(-38px / 2);
transition: all ease 0.6s;
opacity: 0;
}
.icon-play {
color: #fff;
text-align: center;
margin-left: 18px;
}
.piclist li a{
color: #333;
font-size: 14px;
transition: all ease 0.6s;
}
.piclist li:last-child{
margin-right: 0 !important;
}
.piclist li:hover .play{
opacity: 1 !important;
}
.piclist li:hover img{
transform: scale(1.05);
}
.piclist li:hover a{
font-weight: 600;
}
.piclist li:nth-child(4){
margin-right: 0px;
}
.fltg{
width: 360px;
margin-left: 50px;
}
.fltg_top{
padding-top: 23px;
}
.fltg_top ul{
display: flex;
flex-wrap: wrap;
}
.fltg_top ul li{
width: 105px;
height: 42px;
text-align: center;
line-height: 42px;
margin-right: 15px;
margin-bottom: 15px;
}
.fltg_top ul li a{
font-size: 14px;
font-weight: 400;
color: #000;
}
.fltg_top ul li:nth-child(3n){
margin-right: 0px;
}
.fltg_top ul li:hover{
border: 1px solid #ededed;
border-radius: 40px;
box-shadow: 0px 2px 1px #ededed;
/* transition: all ease 0.6s; */
box-sizing: border-box;
}
.fltg_down{
width: 390px;
margin-bottom: 50px;
}
.fltg_down ul{
display: flex;
flex-wrap: wrap;
margin-left: -17px;
margin-right: 17px;
}
.fltg_down ul li{
margin-bottom: 20px;
margin-right: 10px;
position: relative;
}
.fltg_down ul li>div{
border-radius: 50px;
}
.fltg_down ul li .play1{
width: 50px !important;
height: 50px !important;
border-radius: 50px !important;
background: #00000096 !important;
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
}
.fltg_down ul li:hover .play1{
opacity: 1;
}
.fltg_down ul li:nth-child(4n){
margin-right: 0px;
}
.fltg_down ul li.icon-play{
width: 30px;
height: 30px;
color: white;
}
.fltg_down ul li:nth-child(1) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #ea4e1b;
}
.fltg_down ul li:nth-child(2) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #ea4e1b;
}
.fltg_down ul li:nth-child(3) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #d31154;
}
.fltg_down ul li:nth-child(4) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #d73535;
}
.fltg_down ul li:nth-child(5) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #ff9200;
}
.fltg_down ul li:nth-child(6) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #697ac7;
}
.fltg_down ul li:nth-child(7) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #4bcbe8;
}
.fltg_down ul li:nth-child(8) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #6baaeb;
}
.fltg_down ul li>div>i{
line-height: 50px;
margin-left: 16px;
}
.fltg_down ul li>p{
text-align: center;
color: #333;
font-size: 14px;
font-weight: 400;
}
.lunbo{
margin: 0 auto;
position: relative;
margin-bottom: 50px;
}
.lunbo_zhong img{
width: 1200px;
height: 300px;
margin-right: 30px;
}
.lunbo_zhong{
display: flex;
overflow: hidden;
justify-content: space-around;
}
.lunbo_zuo{
height: 50px;
position: absolute;
top: 50%;
left: -65px;
margin-top: -25px;
opacity: 0;
}
.lunbo_you{
height: 50px;
position: absolute;
height: 50px;
position: absolute;
top: 50%;
right: -65px;
margin-top: -25px;
opacity: 0;
}
.lunbo:hover .lunbo_zuo{
opacity: 1;
}
.lunbo:hover .lunbo_you{
opacity: 1;
}
.lunbo_zuo img{
width: 50px;
height: 50px;
}
.lunbo_you img{
width: 50px;
height: 50px;
}
.xgsf ul{
width: 1200px;
display: flex;
justify-content: space-between;
}
.xgsf ul li img{
width: 173px;
height: 173px;
}
.xgsf ul li p{
text-align: center;
}
.xgsf ul li .p1{
margin-top: 10px;
font-size: 14px;
font-weight: 400;
color: #333;
}
.xgsf ul li .p2{
font-size: 14px;
font-weight: 400;
color: #999;
}
.xgsf li:hover .play{
opacity: 1 !important;
}
.xgsf li:hover img{
transform: scale(1.05);
}
.xgsf li:hover .p1{
font-weight: 600;
}
.xgsf li:hover .p2{
color: #333;
}
.by{
width: 19px;
height: 37px;
border-radius: 50px 0 0 50px;
position: absolute;
top: 50%;
right: 0px;
margin-top: calc(-25px / 2);
background: white;
}
.xgsf{
position: relative;
margin-bottom: 50px;
}
.xgsf:hover .jt_you img{
opacity: 1;
transition: all ease 0.6s;
}
.xgsf:hover .jt_zuo img{
opacity: 1;
transition: all ease 0.6s;
}
.jt_zuo{
position: absolute;
left: -68px;
top: 109px;
}
.jt_zuo img{
opacity: 0;
}
.jt_you{
position: absolute;
right: -68px;
top: 109px;
}
.jt_you img{
opacity: 0;
}
.phb{
margin-bottom: 50px;
}
.phb_ul {
display: flex;
justify-content: space-between;
}
.dddd {
overflow: hidden;
}
.ph_zi{
padding: 10px 20px 10px 10px;
box-sizing: border-box;
text-align: right;
}
.ph_zi:hover a{
font-weight: 700;
}
.ph_zi a{
color: #999;
font-size: 14px;
font-weight: 400;
}
.phb_ul li:nth-child(1){
width: 380px;
border: 1px solid rgba(91,148,0,.3);
height: 544px;
}
.phb_ul li:nth-child(2){
width: 380px;
border: 1px solid rgba(219,88,0,.1);
height: 544px;
}
.phb_ul li:nth-child(3){
width: 380px;
border: 1px solid rgba(33,191,166,.1);
height: 544px;
}
.phb_ul li:nth-child(1) .ph_title{
display: flex;
justify-content: space-between;
padding: 0 10px;
height:66px;
align-items: center;
background-color: rgba(91,148,0,.1);
}
.phb_ul li:nth-child(2) .ph_title{
display: flex;
justify-content: space-between;
padding: 0 10px;
height:66px;
align-items: center;
background-color: rgba(219,88,0,.1);
}
.phb_ul li:nth-child(3) .ph_title{
display: flex;
justify-content: space-between;
padding: 0 10px;
height:66px;
align-items: center;
background-color: rgba(33,191,166,.1);
}
.phb_ul li:nth-child(1) .ph_title span{
font-size: 22px;
font-weight: 700;
color: #5b9400;
}
.phb_ul li:nth-child(2) .ph_title span{
font-size: 22px;
font-weight: 700;
color: #db5800;
}
.phb_ul li:nth-child(3) .ph_title span{
font-size: 22px;
font-weight: 700;
color: #21bfa6;
}
.ph_title img{
width: 30px;
height: 30px;
}
.phb_ul li .ph_list{
display: flex;
justify-content: space-between;
padding-left: 20px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
align-items: center;
}
.ph_list:hover {
background: #8d8d8d;
}
.ph_list:hover .list_r {
display: block;
}
.list_l {
display: flex;
}
.list_l .num {
font-size: 18px;
color: #5b9400;
margin-right: 14px;
line-height: 50px;
}
.list_l img {
width: 50px;
height: 50px;
margin-right: 10px;
}
.list_l p {
font-size: 14px;
color: #333;
}
.list_l p+span {
font-size: 14px;
color: #999;
}
.list_r {
display: none;
}
.list_r i{
font-size: 20px;
}
.rmgs{
margin-bottom: 50px;
}
.rmgs ul{
width: 1200px;
display: flex;
padding: 0px 24px;
box-sizing: border-box;
justify-content: space-between;
}
.rmgs ul li img{
width: 125px;
height: 125px;
border-radius: 125px;
transition: all ease 0.6s;
}
.rmgs ul li p{
font-size: 14px;
font-weight: 400;
color: #333;
text-align: center;
margin-top: 10px;
transition: all ease 0.6s;
}
.rmgs ul li:hover img{
transform: scale(1.05);
}
.rmgs ul li:hover p{
font-weight: 600;
}
.jxmv{
margin-bottom: 50px;
}
.jxmv ul{
width: 1200px;
display: flex;
justify-content: space-between;
}
.jxmv ul li .pic_top{
width: 275px;
height: 155px;
position: relative;
}
.jxmv ul li .pic_top img{
width: 275px;
height: 155px;
}
.jxmv ul li p{
text-align: center;
}
.jxmv ul li .p1{
margin-top: 10px;
font-size: 14px;
font-weight: 400;
color: #333;
}
.jxmv ul li .p2{
font-size: 14px;
font-weight: 400;
color: #999;
}
.jxmv li:hover .play{
opacity: 1 !important;
}
.jxmv li:hover img{
transform: scale(1.05);
}
.jxmv li:hover .p1{
font-weight: 600;
}
.jxmv li:hover .p2{
color: #333;
}
.by{
width: 19px;
height: 37px;
border-radius: 50px 0 0 50px;
position: absolute;
top: 50%;
right: 0px;
margin-top: calc(-25px / 2);
background: white;
}
.jxmv{
position: relative;
margin-bottom: 50px;
}
.jxmv:hover .jt_you img{
opacity: 1;
transition: all ease 0.6s;
}
.jxmv:hover .jt_zuo img{
opacity: 1;
transition: all ease 0.6s;
}
.jt_zuo{
position: absolute;
left: -68px;
top: 109px;
}
.jt_zuo img{
opacity: 0;
}
.jt_you{
position: absolute;
right: -68px;
top: 109px;
}
.jt_you img{
opacity: 0;
}
.rmhd{
margin-bottom: 50px;
}
.rmhd ul{
width: 1200px;
display: flex;
justify-content: space-between;
}
.rmhd ul li{
overflow: hidden;
}
.rmhd ul li img{
width: 378px;
height: 152px;
transition: all ease 0.6s;
}
.rmhd ul li p{
font-size: 14px;
font-weight: 400;
color: #333;
margin-top: 10px;
text-align: center;
transition: all ease 0.6s;
}
.rmhd ul li:hover img{
transform: scale(1.05);
}
.rmhd ul li:hover p{
font-weight: 600;
}
.footer{
width: 100%;
background-color: #333;
}
.ft_content{
width: 1200px;
margin: 0 auto;
padding-top: 60px;
box-sizing: border-box;
}
.footer_conten{
display: flex;
justify-content: space-between;
}
.ft_pic{
height: 190px;
width: 365px;
display: flex;
justify-content: space-between;
}
.ft_pic li{
height: 190px;
width: 365px;
margin-top: 50px
}
.ft_pic li p {
margin-top: 22px;
font-size: 14px;
font-weight: 400;
color: #939393;
text-align: left;
}
.ft_pic li img{
width: 36px;
height: 36px;
}
.ft_content .ft1{
font-size: 18px;
font-weight: 400;
color: #fff;
text-align: left;
}
.ft_pic li:hover p{
font-weight: 700;
}
.ft_yj{
display: flex;
flex-wrap: wrap;
width: 365px;
box-sizing: border-box;
margin-top: 54px;
}
.ft_yj li:hover a{
font-weight: 700;
}
.ft_yj li{
width: 113px;
margin-bottom: 36px;
}
.ft_yj li a{
font-size: 14px;
font-weight: 400;
color: #939393;
margin-bottom: 15px;
}
.gzyy{
display: flex;
flex-wrap: wrap-reverse;
width: 365px;
margin-top: 54px;
box-sizing: border-box;
}
.gzyy li a{
font-size: 14px;
font-weight: 400;
color: #939393;
}
.gzyy li{
width: 182px;
}
.gzyy li img{
width: 31px;
height: 31px;
vertical-align: middle;
}
.gzyy li span{
font-size: 14px;
margin-left: 10px;
}
.gzyy li:last-child{
margin-bottom: 23px;
}
.ft_content p{
font-size: 14px;
font-weight: 400;
color: #999;
text-align: center;
padding-bottom: 10px;
}

View File

@@ -0,0 +1,16 @@
.left{
float: left;
}
.right{
float: right;
}
.width_1200{
width: 1200px;
margin: 0 auto;
}
.center{
text-align: center;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 963 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 488 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 448 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 707 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 976 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 419 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 879 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 543 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 420 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 432 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 509 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 591 B

View File

@@ -0,0 +1,836 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>千千音乐</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1978518_gu0lldutcrt.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
</head>
<body>
<div class="header">
<div class="header_top width_1200">
<a class="left" href="http://music.taihe.com/"><img
src="http://static1.qianqian.com/web/s/images/logo_2x.5109f00405b21eca.png" alt="" srcset=""></a>
<ul class="left menu">
<li class="activation"><a href="">发现音乐</a></li>
<li><a href="">随心听</a></li>
<li><a href="">客户端</a></li>
<li><a href="">VIP</a></li>
<li><a href="">音乐人</a></li>
<li><a href="">演出</a></li>
<li>
<input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
</li>
</ul>
<ul class="right login">
<li>登录</li>
<li></li>
<li>注册</li>
</ul>
</div>
<div class="header_form">
<div class="width_1200">
<a class="recommend" href="">推荐</a>
<a href="">歌单</a>
<a href="">歌手</a>
<a href="">榜单</a>
<a href="">分类</a>
<a href="">MV</a>
<a href="">U榜</a>
</div>
</div>
</div>
<div class="content">
<div class="width_1200">
<div>
<div class="Popularsong left">
<div class="tatal">
<div class="left">
<h2>热门歌单</h2>
<span>更多</span>
</div>
<img class="right" src="./img/kuohao (2).png" alt="">
</div>
<ul class="piclist">
<li>
<div class="pic_top">
<img src="http://musicugc.cdn.qianqian.com/ugcdiy/pic/58adc19c9ecc88077504e852ed33a22d.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
</div>
<a href="">防弹少年团BTS</a>
</li>
<li>
<div class="pic_top">
<img src="http://musicugc.qianqian.com/ugcdiy/pic/c65ab27edcf5a2f190a7d651b2f034d5.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
</div>
<a href="">节奏震撼 | 鼓SOLO特辑</a>
</li>
<li>
<div class="pic_top">
<img src="http://musicugc.qianqian.com/ugcdiy/pic/173a790b745641a7156cb5d12ec8a512.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
</div>
<a href="">vlogger入门指南-BGM篇</a>
</li>
<li>
<div class="pic_top">
<img src="http://musicugc.qianqian.com/ugcdiy/pic/55a2dbfa1a37d37396a5ca23e96ad4ae.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
</div>
<a href="">女团舞曲精选 | 会跳舞的青春有你</a>
</li>
<li>
<div class="pic_top">
<img src="http://musicugc.qianqian.com/ugcdiy/pic/9cdbc888cd898c4752d5864223b42743.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
</div>
<a href="">干啥啥不行,长胖第一名</a>
</li>
<li>
<div class="pic_top">
<img src="http://musicugc.qianqian.com/ugcdiy/pic/97bd7811d0e84cf614f86d509edead3c.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
</div>
<a href="">深夜我没有睡着, 我只是藏进了歌里</a>
</li>
</ul>
</div>
<div class="fltg left">
<div class="fltg_top">
<div class="tatal">
<div class="left">
<h2>分类听歌</h2>
<span>更多</span>
</div>
</div>
<ul>
<li><a href="">情歌</a></li>
<li><a href="">红歌</a></li>
<li><a href="">劲爆</a></li>
<li><a href="">天籁</a></li>
<li><a href="">经典老歌</a></li>
<li><a href="">欧美</a></li>
<li><a href="">网络歌曲</a></li>
<li><a href="">民歌</a></li>
<li><a href="">80后</a></li>
<li><a href="">儿歌</a></li>
<li><a href="">伤感</a></li>
<li><a href="">安静</a></li>
</ul>
</div>
<div class="fltg_down">
<div class="tatal">
<div class="left">
<h2>推荐电台</h2>
<span>更多</span>
</div>
</div>
<ul>
<li>
<div><i class="iconfont icon-music"></i></div>
<div class="play1">
<i class="iconfont icon-play"></i>
</div>
<p>随便听听</p>
</li>
<li>
<div><i class="iconfont icon-w_sofa"></i></div>
<div class="play1">
<i class="iconfont icon-play"></i>
</div>
<p>在家</p>
</li>
<li>
<div><i class="iconfont icon-desk-lamp"></i></div>
<div class="play1">
<i class="iconfont icon-play"></i>
</div>
<p>工作</p>
</li>
<li>
<div><i class="iconfont icon-icon-test"></i></div>
<div class="play1">
<i class="iconfont icon-play"></i>
</div>
<p>上网</p>
</li>
<li>
<div><i class="iconfont icon-shops"></i></div>
<div class="play1">
<i class="iconfont icon-play"></i>
</div>
<p>店铺</p>
</li>
<li>
<div><i class="iconfont icon-sport"></i></div>
<div class="play1">
<i class="iconfont icon-play"></i>
</div>
<p>运动</p>
</li>
<li>
<div><i class="iconfont icon-icon_relax"></i></div>
<div class="play1">
<i class="iconfont icon-play"></i>
</div>
<p>轻松</p>
</li>
<li>
<div><i class="iconfont icon-index-sweet-service"></i></div>
<div class="play1">
<i class="iconfont icon-play"></i>
</div>
<p>甜蜜</p>
</li>
</ul>
</div>
</div>
</div>
<div class="lunbo">
<div class="lunbo_zhong">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159616349419ff303c494d664b08f00abdc25f1c95.jpg@s_2,w_750,h_300"
alt="">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15958676995b775f90d72d1a575245f78d6395a9e9.jpg@s_2,w_750,h_300"
alt="">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159617722011d469e5fd6b50d99dabca0e988cb099.jpg@s_2,w_750,h_300"
alt="">
</div>
<img class="lunbo_zuo" src="./img/zuo.png" alt="">
<img class="lunbo_you" src="./img/you.png" alt="">
</div>
<div class="xgsf">
<div class="tatal">
<div class="left">
<h2>新歌首发</h2>
<span>更多</span>
</div>
</div>
<ul>
<li>
<a href="">
<div class="pic_top">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_158882138088c065051930226a4cd6eb3e4010fffa.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
<div class="by">
</div>
</div>
<p class="p1">千千音乐新歌速递</p>
<p class="p2">新歌抢鲜听</p>
</a>
</li>
<li>
<a href="">
<div class="pic_top">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159617560535ef71d3ffde206dcea1250dba94c277.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
<div class="by">
</div>
</div>
<p class="p1">世上梗最多的歌儿</p>
<p class="p2">大张伟</p>
</a>
</li>
<li>
<a href="">
<div class="pic_top">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1596169261cf95c6f739642b7aee2001878ccfcf56.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
<div class="by">
</div>
</div>
<p class="p1">春夏秋冬春 ——</p>
<p class="p2">Willen Pauwels</p>
</a>
</li>
<li>
<a href="">
<div class="pic_top">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15961661770d94ecc996bcd903ff8e741055e7e082.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
<div class="by">
</div>
</div>
<p class="p1">六月初七月底</p>
<p class="p2">牟敏雪MichelleBla1r</p>
</a>
</li>
<li>
<a href="">
<div class="pic_top">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1596163613387f0f86f8a49204db5b126cc6e275be.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
<div class="by">
</div>
</div>
<p class="p1">Summer Special Vol.1</p>
<p class="p2">卫一名</p>
</a>
</li>
<li>
<a href="">
<div class="pic_top">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15961634243a1c285c991bb7601b1188472ce19ab2.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
<div class="by">
</div>
</div>
<p class="p1">沙漠之下</p>
<p class="p2">沙漠五子D5</p>
</a>
</li>
</ul>
<div class="jt_zuo"><img src="./img/zuo.png" alt=""></div>
<div class="jt_you"><img src="./img/you.png" alt=""></div>
</div>
<div class="phb">
<div class="tatal">
<div class="left">
<h2>排行榜</h2>
<span>更多</span>
</div>
</div>
<ul class="phb_ul">
<li>
<div class="ph_title">
<span>新歌榜</span>
<img src="./img/xg.png" alt="">
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">02</span>
<img src="http://qukufile2.qianqian.com/data2/pic/d24656e3b055acb05fe096f781920016/675907119/675907119.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>拥抱春天</p>
<span>A公馆</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">03</span>
<img src="http://qukufile2.qianqian.com/data2/pic/bae766e5c670ca417cc433156efcb528/675012927/675012927.png@s_2,w_60,h_60"
alt="">
<div>
<p>山河无恙在我胸</p>
<span>佟丽娅/蔡徐坤</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">04</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">05</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">06</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_zi">
<a href="">查看完整榜单></a>
</div>
</li>
<li>
<div class="ph_title">
<span>热曲榜</span>
<img src="./img/re.png" alt="">
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_zi">
<a href="">查看完整榜单></a>
</div>
</li>
<li>
<div class="ph_title">
<span>网络歌曲榜</span>
<img src="./img/wl.png" alt="">
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">01</span>
<img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
alt="">
<div>
<p>少年(童声版)</p>
<span>宋小睿</span>
</div>
</div>
<div class="list_r">
<i class="iconfont icon-play3"></i>
<i class="iconfont icon-tubiaozhizuomoban-"></i>
<i class="iconfont icon-LC_icon_download_line_2"></i>
</div>
</div>
<div class="ph_zi">
<a href="">查看完整榜单></a>
</div>
</li>
</ul>
</div>
<div class="rmgs">
<div class="tatal">
<div class="left">
<h2>热门歌手</h2>
<span>更多</span>
</div>
</div>
<ul>
<li><img src="http://qukufile2.qianqian.com/data2/pic/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
alt="">
<p>薛之谦</p>
</li>
<li><img src="http://qukufile2.qianqian.com/data2/pic/0d8e3007d1cb42db293a80f12e9c4771/612860331/612860331.JPG@s_2,w_250,h_250"
alt="">
<p>许嵩</p>
</li>
<li><img src="http://qukufile2.qianqian.com/data2/pic/4e2f99725085e29afbe3004b34e3b3ea/566870515/566870515.jpg@s_2,w_250,h_250"
alt="">
<p>龙梅子</p>
</li>
<li><img src="http://qukufile2.qianqian.com/data2/pic/246708025/246708025.jpg@s_2,w_250,h_250"
alt="">
<p>林俊杰</p>
</li>
<li><img src="http://qukufile2.qianqian.com/data2/pic/25e813749b39ddd01d6121e59860ba66/578954994/578954994.jpg@s_2,w_250,h_250"
alt="">
<p>金南玲</p>
</li>
<li><img src="http://qukufile2.qianqian.com/data2/pic/25e813749b39ddd01d6121e59860ba66/578954994/578954994.jpg@s_2,w_250,h_250"
alt="">
<p>宋小睿</p>
</li>
</ul>
</div>
<div class="jxmv">
<div class="tatal">
<div class="left">
<h2>精选MV</h2>
<span>更多</span>
</div>
</div>
<ul>
<li>
<a href="">
<div class="pic_top">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15864064945aab63569ca627f7a30cc8fd7036aac9.jpg@s_2,w_556,h_314"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
</div>
<p class="p1">Home</p>
<p class="p2">蔡徐坤</p>
</a>
</li>
<li>
<a href="">
<div class="pic_top">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_158640658121f09621d0d4bc176372a7bc789b2b76.jpg@s_2,w_556,h_314"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
</div>
<p class="p1">盒子(BOX)</p>
<p class="p2">张杰妮Jani Z.</p>
</a>
</li>
<li>
<a href="">
<div class="pic_top">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1585630881489717a96acd0654f364660d7c56baae.jpg@s_2,w_556,h_314"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
</div>
<p class="p1">GetAway</p>
<p class="p2">崔迪</p>
</a>
</li>
<li>
<a href="">
<div class="pic_top">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15849370839e949ad4cd13d2a822516186f866bd4c.jpg@s_2,w_556,h_314"
alt="">
<div class="play">
<i class="iconfont icon-play"></i>
</div>
</div>
<p class="p1">说说而已</p>
<p class="p2">Hickey喜祺</p>
</a>
</li>
</ul>
<div class="jt_zuo"><img src="./img/zuo.png" alt=""></div>
<div class="jt_you"><img src="./img/you.png" alt=""></div>
</div>
<div class="rmhd">
<div class="tatal">
<div class="left">
<h2>热门活动</h2>
<span>更多</span>
</div>
</div>
<ul>
<li><a href=""><img
src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15480660627d94bd0ab1c474c860a059c52b38f1fc.jpg@s_2,w_760,h_304"
alt="">
<p>少年红星音乐计划</p>
</a></li>
<li><a href=""><img
src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15480662673c21cb33585df55ea59d202a537c0fc8.jpg@s_2,w_760,h_304"
alt="">
<p>千千Nu创音乐榜</p>
</a></li>
<li><a href=""><img
src="http://business0.qianqian.com/qianqian/pic/bos_client_15692293177ac453eb9b3cc8847302aaae82069b94.jpg@s_2,w_760,h_304"
alt="">
<p>云南·抚仙湖麦田音乐节赠票活动</p>
</a></li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="ft_content">
<ul class="footer_conten">
<li>
<p class="ft1">下载客户端</p>
<ul class="ft_pic">
<li><a href=""><img src="./img/wd.png" alt="">
<p>PC版</p>
</a></li>
<li><a href=""><img src="./img/dn.png" alt="">
<p>MAC版</p>
</a></li>
<li><a href=""><img src="./img/az (1).png" alt="">
<p>安卓版</p>
</a></li>
<li><a href=""><img src="./img/pg.png" alt="">
<p>iPhone版</p>
</a></li>
</ul>
</li>
<li>
<p class="ft1">关于千千音乐</p>
<ul class="ft_yj">
<li><a href="">意见反馈</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">帮助中心</a></li>
<li><a href="">资源开放平台</a></li>
<li><a href="">太和音乐人</a></li>
</ul>
</li>
<li>
<p class="ft1">关注音乐</p>
<ul class="gzyy">
<li><a href=""><img src="./img/wb (1).png" alt=""> <span>关注微博</span></a></li>
<li><a href=""><img src="./img/wx.png" alt=""> <span>微信公众号</span></a></li>
<li><a href=""><img src="./img/sxt.png" alt=""> <span>音乐随心听</span></a></li>
</ul>
</li>
</ul>
<p>
@2020 Qianqian 粤网文[2018]0902-359号
</p>
<p>粤公网安备 44030502002309号 增值电信业务经营许可证:粵B2-20180819</p>
<p>违法和不良信息举报电话: 010-84369708 转8012 &nbsp;举报邮箱: jubao@taihe.com &nbsp;反馈中心</p>
</div>
</div>
</body>
</html>