bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/css/clear.css Normal file
View File

@@ -0,0 +1,16 @@
/* 专门用来重置浏览器默认样式的 */
body, 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;
}

934
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/css/index.css Normal file
View File

@@ -0,0 +1,934 @@
.header {
margin: 0;
}
.logo {
padding-top: 27px;
width: 123px;
}
.HeadMenu {
height: 95px;
}
.menu {
margin-left: 74px;
}
.menu li,
.login li {
float: left;
height: 95px;
line-height: 95px;
}
.menu li {
padding: 0 17px;
}
.menu li a {
color: #858585;
font-size: 16px;
}
.menu li:hover a{
color: black;
}
.menu input {
width: 320px;
height: 34px;
border: 1px solid #e4e4e4;
border-radius: 8px;
padding: 0 10px;
box-sizing: border-box;
background: url("../img/search.png") no-repeat;
background-size: 22px;
background-position: 285px;
}
.active {
color:#000 !important;
font-weight: 400;
}
.login {
margin-right: 41px;
}
.login li:nth-child(2) {
width: 1px;
height: 17px;
background: #d8d8d8;
margin: 0 20px;
margin-top: 40px;
}
.login li:hover a{
color: red;
}
.login a {
color: #333;
}
.HeadType {
overflow: hidden;
height: 38px;
background-color: #fafafa;
line-height: 38px;
}
.HeadType ul li {
float: left;
}
.HeadType a {
padding: 8px 2.5%;
font-size: 16px;
color: #333;
}
.menu_active {
color: #e13228 !important;
}
.HeadType a:hover{
color: red;
}
.PopularSongist {
width: 790px;
overflow: hidden;
padding-top: 23px;
margin-right: 45px;
}
.PopularSongist_title span {
font-size: 14px;
color: #999;
}
.PopularSongist_title h2 {
display: inline-block;
margin-right: 15px;
font-size: 24px;
color: #333;
font-weight: unset;
font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
}
.list li{
width: 175px;
height: 204px;
float: left;
margin-right: 30px;
margin-bottom: 26px;
}
.list li:nth-child(4){
margin-right: 0 !important;
}
.list li a{
display: block;
margin-top: 10px;
}
.list li:hover .play{
opacity: 1 !important;
}
.list li:hover img{
transform: scale(1.05);
}
.top {
width: 175px;
height: 175px;
position: relative;
overflow: hidden;
}
.top img{
width: 100%;
height: 100%;
transition: all ease 0.6s;
}
.fx{
font-size: 40px !important;
transition: all ease 0.6s;
}
.fx:hover{
transform: scale(1.4);
}
.play {
position: absolute;
width: 38px;
height: 38px;
border-radius: 100%;
/* background: #00000096; */
line-height: 38px;
top: 50%;
left: 50%;
margin-top: calc(-38px / 2);
margin-left: calc(-38px / 2);
transition: all ease 0.6s;
opacity: 0;
}
.info{
font-weight: 400;
color: #333;
}
.info:hover {
font-weight: bold;
color: #333;
}
.icon-play {
color: #fff;
text-align: center;
margin-left: 13px;
}
.title {
height: 38px;
line-height: 38px;
margin-bottom: 25px;
}
.title img {
height: 20px;
margin-top: 16px;
margin-left: 600px;
}
.title .left h2 {
display: inline-block;
margin-right: 15px;
font-size: 24px;
color: #333;
font-weight: unset;
font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
}
.title .left span {
font-size: 14px;
color: #999;
}
.content-right {
padding-top: 23px;
width: 350px;
}
.gedan {
display: flex;
flex-wrap: wrap;
}
.gedan li {
width: 105px;
text-align: center;
line-height: 42px;
height: 42px;
border: 1px solid #ededed;
border-radius: 40px;
margin-bottom: 15px;
margin-right: 15px;
box-sizing: border-box;
}
.gedan li:nth-child(3n){
margin-right: 0 !important;
}
.gedan li:hover{
box-shadow: 2px 4px 2px #333;
}
.tjdt{
width: 390px;
margin-bottom: 50px;
}
.tjdt ul{
display: flex;
flex-wrap: wrap;
margin-left: -17px;
margin-right: 17px;
}
.tjdt ul li{
margin-bottom: 20px;
margin-right: 10px;
position: relative;
}
.tjdt ul li>div{
border-radius: 50px;
}
.tjdt ul li .play1{
width: 50px !important;
height: 50px !important;
border-radius: 50px !important;
/* background: #00000096 !important; */
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
}
.tjdt ul li:hover .play1{
opacity: 0.9;
}
.tjdt ul li:nth-child(4n){
margin-right: 0px;
}
.tjdt ul li.icon-play{
width: 30px;
height: 30px;
color: white;
}
.tjdt ul li:nth-child(1) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #ea4e1b;
}
.tjdt ul li:nth-child(2) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #ea4e1b;
}
.tjdt ul li:nth-child(3) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #d31154;
}
.tjdt ul li:nth-child(4) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #d73535;
}
.tjdt ul li:nth-child(5) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #ff9200;
}
.tjdt ul li:nth-child(6) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #697ac7;
}
.tjdt ul li:nth-child(7) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #4bcbe8;
}
.tjdt ul li:nth-child(8) div{
width: 50px;
height: 50px;
margin: 0px 20px 10px 20px;
background: #6baaeb;
}
.tjdt ul li>div>i{
line-height: 50px;
margin-left: 4px;
}
.tjdt ul li>p{
text-align: center;
color: #333;
font-size: 14px;
font-weight: 400;
}
.abc{
overflow: hidden;
}
.list-r:hover {
background: #8d8d8d;
}
.list-l{
display: flex;
}
.list-l .num{
font-size: 18px;
color: #5b9400;
margin-right: 14px;
}
.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 img{
width: 25px;
height: 25px;
}
.lunbo{
margin: 0 auto;
position: relative;
margin-bottom: 50px;
width: 1200px;
}
.lunbo_mid img{
width: 1200px;
height: 300px;
margin-right: 30px;
}
.lunbo_mid{
display: flex;
overflow: hidden;
justify-content: space-around;
}
.lunbo_left{
height: 50px;
position: absolute;
top: 50%;
left: -65px;
margin-top: -25px;
opacity: 0;
}
.lunbo_right{
height: 50px;
position: absolute;
height: 50px;
position: absolute;
top: 50%;
right: -65px;
margin-top: -25px;
opacity: 0;
}
.lunbo:hover .lunbo_left{
opacity: 1;
}
.lunbo:hover .lunbo_right{
opacity: 1;
}
.lunbo_left img{
width: 27px;
height: 50px;
}
.lunbo_right img{
width: 27px;
height: 50px;
}
.Newge_title{
margin-bottom: 25px;
}
.Newge_title span {
font-size: 14px;
color: #999;
}
.Newge_title h2 {
display: inline-block;
margin-right: 15px;
font-size: 24px;
color: #333;
font-weight: unset;
font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
}
.Newge {
margin: 0 auto;
margin-bottom: 50px;
}
.Newge_content img{
width: 173px;
height: 173px;
}
.Newge_content{
position: relative;
}
.Newge_content ul{
display: flex;
justify-content: space-between;
}
.Newge_content ul li a{
display: block;
position: relative;
}
.Newge_content p{
text-align: center;
}
.Newge_content ul li p:nth-child(2){
margin-top: 10px;
font-weight: 400;
font-size: 16px;
}
.Newge_content ul li p:nth-child(3){
color: #999;
font-weight: 400;
font-size: 14px;
}
.Newge_content ul li:hover .play{
opacity: 1 !important;
}
.Newge_content ul li:hover img{
transform: scale(1.05);
}
.Newge_content ul li:hover p:nth-child(2){
color: #333;
font-weight: 700;
}
.Newge_content ul li:hover p:nth-child(3){
color: #333;
}
.Newge:hover .you {
opacity: 1;
transition: all ease 0.6s;
}
.Newge:hover .zuo {
opacity: 1;
transition: all ease 0.6s;
}
.zuo{
position: absolute;
left: -68px;
top: 62px;
width: 27px !important;
height: 50px !important;
opacity: 0;
}
.you{
position: absolute;
right: -68px;
top: 62px;
width: 27px !important;
height: 50px !important;
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: #ededed;
}
.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:hover{
font-weight: 700;
}
.list_l p:hover{
font-weight: 700;
}
.list_l p+span {
font-size: 14px;
color: #999;
}
.list_r {
display: none;
}
.list_r i{
font-size: 20px;
}
.list_r a i:hover{
font-weight: 700;
color: #999;
}
.title{
display: flex;
}
.singer_title p {
display: inline-block;
margin-right: 15px;
font-size: 24px;
color: #333;
font-weight: unset;
font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
}
.singer_title span {
font-size: 14px;
color: #999;
}
.singer{
margin-bottom: 50px;
}
.singer ul{
width: 1200px;
display: flex;
padding: 0px 24px;
box-sizing: border-box;
justify-content: space-between;
}
.singer ul li img{
width: 125px;
height: 125px;
border-radius: 125px;
transition: all ease 0.6s;
}
.singer ul li p{
font-size: 14px;
font-weight: 400;
color: #333;
text-align: center;
margin-top: 10px;
transition: all ease 0.6s;
}
.singer ul li:hover img{
transform: scale(1.05);
}
.singer ul li:hover p{
font-weight: 600;
}
.singer_title{
margin-bottom: 33px;
}
.MV_title{
margin-bottom: 25px;
}
.MV_title span {
font-size: 14px;
color: #999;
}
.MV_title h2 {
display: inline-block;
margin-right: 15px;
font-size: 24px;
color: #333;
font-weight: unset;
font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
}
.MV {
margin: 0 auto;
margin-bottom: 50px;
}
.MV_content img{
width: 276px;
height: 155px;
}
.MV_content{
position: relative;
}
.MV_content ul{
display: flex;
justify-content: space-between;
}
.MV_content ul li a{
display: block;
position: relative;
}
.MV_content p{
text-align: center;
}
.MV_content ul li p:nth-child(2){
margin-top: 10px;
font-weight: 400;
font-size: 16px;
}
.MV_content ul li p:nth-child(3){
color: #999;
font-weight: 400;
font-size: 14px;
}
.MV_content ul li:hover .play{
opacity: 1 !important;
}
.MV_content ul li:hover img{
transform: scale(1.05);
}
.MV_content ul li:hover p:nth-child(2){
color: #333;
font-weight: 700;
}
.MV_content ul li:hover p:nth-child(3){
color: #333;
}
.MV:hover .you {
opacity: 1;
transition: all ease 0.6s;
}
.MV:hover .zuo {
opacity: 1;
transition: all ease 0.6s;
}
.zuo{
position: absolute;
left: -68px;
top: 62px;
width: 27px !important;
height: 50px !important;
opacity: 0;
}
.you{
position: absolute;
right: -68px;
top: 62px;
width: 27px !important;
height: 50px !important;
opacity: 0;
}
.singer_title p {
display: inline-block;
margin-right: 15px;
font-size: 24px;
color: #333;
font-weight: unset;
font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
}
.singer_title span {
font-size: 14px;
color: #999;
}
.singer{
margin-bottom: 50px;
}
.singer ul{
width: 1200px;
display: flex;
padding: 0px 24px;
box-sizing: border-box;
justify-content: space-between;
}
.act ul li img{
width: 378px;
height: 151px;
}
.act ul li p{
font-size: 14px;
font-weight: 400;
color: #333;
text-align: center;
margin-top: 10px;
transition: all ease 0.6s;
}
.act ul li:hover img{
transform: scale(1.05);
}
.act ul li:hover p{
font-weight: 600;
}
.act_title{
margin-bottom: 33px;
}
.act_title p {
display: inline-block;
margin-right: 15px;
font-size: 24px;
color: #333;
font-weight: unset;
font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
}
.act_title span {
font-size: 14px;
color: #999;
}
.act_content ul{
display: flex;
justify-content: space-between;
}
.footer{
width: 100%;
background-color: #333;
}
.footer_content{
width: 1200px;
margin: 0 auto;
padding-top: 60px;
box-sizing: border-box;
}
.footer_content1{
display: flex;
justify-content: space-between;
}
.biaoti_pic{
height: 190px;
width: 365px;
display: flex;
justify-content: space-between;
}
.biaoti_pic li{
height: 190px;
width: 365px;
margin-top: 50px
}
.biaoti_pic li p {
margin-top: 22px;
font-size: 14px;
font-weight: 400;
color: #939393;
text-align: left;
}
.biaoti_pic li img{
width: 36px;
height: 36px;
}
.footer_content .biaoti{
font-size: 18px;
font-weight: 400;
color: #fff;
text-align: left;
}
.biaoti_pic li:hover p{
font-weight: 700;
}
.advice{
display: flex;
flex-wrap: wrap;
width: 365px;
box-sizing: border-box;
margin-top: 54px;
}
.advice li:hover a{
font-weight: 700;
}
.advice li{
width: 113px;
margin-bottom: 36px;
}
.advice 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;
}
.footer_content p{
font-size: 14px;
font-weight: 400;
color: #999;
text-align: center;
padding-bottom: 10px;
}

21
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/css/public.css Normal file
View File

@@ -0,0 +1,21 @@
/* 存放公共css的 */
.theme_red {
color: blue;
}
.left {
float: left;
}
.right {
float: right;
}
.w-1200 {
width: 1200px;
margin: 0 auto;
}
.center {
text-align: center;
}

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/112.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 402 B

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/88.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 300 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/anniu1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 423 B

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/anniu2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 426 B

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/anniu3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 429 B

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/az.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/iphone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/music.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/next.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/pc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 589 B

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/ting.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/wb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/win.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 646 B

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/wx.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/you.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 B

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/img/zuo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 591 B

825
历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/index.html Normal file
View File

@@ -0,0 +1,825 @@
<!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/clear.css">
<!-- <link rel="stylesheet" href="http://at.alicdn.com/t/font_1995569_x5dhp3hc7ls.css"> -->
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1995569_j10xqzlfzqf.css">
</head>
<body>
<div class="header">
<div class="HeadMenu">
<div class="w-1200">
<a class="left" href="http://music.taihe.com/">
<img class="logo" src="http://static1.qianqian.com/web/s/images/logo_2x.5109f00405b21eca.png"
alt="">
</a>
<ul class="menu left">
<li><a class="active" 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="login right">
<li>
<a href="">登录</a>
</li>
<li>
</li>
<li>
<a href="">注册</a>
</li>
</ul>
</div>
</div>
<div class="HeadType">
<div class="w-1200 center">
<a class="menu_active" 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="w-1200">
<div class="abc">
<div class="PopularSongist left">
<div class="title">
<div class="left">
<h2>热门歌单</h2>
<span>更多</span>
</div>
<img class="right" src="./img/next.png" alt="">
</div>
<ul class="list">
<li>
<div class="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-bofang fx"></i>
</div>
</div>
<a class="info">防弹少年团BTS</a>
</li>
<li>
<div class="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-bofang fx"></i>
</div>
</div>
<a class="info">节奏震撼 | 鼓SOLO特辑</a>
</li>
<li>
<div class="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-bofang fx"></i>
</div>
</div>
<a class="info">vlogger入门指南-BGM篇</a>
</li>
<li>
<div class="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-bofang fx"></i>
</div>
</div>
<a class="info">女团舞曲精选 | 会跳舞的青春有你</a>
</li>
<li>
<div class="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-bofang fx"></i>
</div>
</div>
<a class="info">干啥啥不行，长胖第一名</a>
</li>
<li>
<div class="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-bofang fx"></i>
</div>
</div>
<a class="info">深夜我没有睡着， 我只是藏进了歌里</a>
</li>
</ul>
</div>
<div class="content-right left">
<div class="fltg">
<div class="title">
<div class="left">
<h2>分类听歌</h2>
<span>更多</span>
</div>
</div>
<ul class="gedan">
<li>情歌</li>
<li>红歌</li>
<li>劲爆</li>
<li>天籁</li>
<li>经典老歌</li>
<li>欧美</li>
<li>网络歌曲</li>
<li>民歌</li>
<li>80后</li>
<li>儿歌</li>
<li>伤感</li>
<li>安静</li>
</ul>
<div class="tjdt">
<div class="title">
<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-bofang fx"></i>
</div>
<p>随便听听</p>
</li>
<li>
<div><i class="iconfont icon-w_sofa"></i></div>
<div class="play1">
<i class="iconfont icon-bofang fx"></i>
</div>
<p>在家</p>
</li>
<li>
<div><i class="iconfont icon-desk-lamp"></i></div>
<div class="play1">
<i class="iconfont icon-bofang fx"></i>
</div>
<p>工作</p>
</li>
<li>
<div><i class="iconfont icon-icon-test"></i></div>
<div class="play1">
<i class="iconfont icon-bofang fx"></i>
</div>
<p>上网</p>
</li>
<li>
<div><i class="iconfont icon-shops"></i></div>
<div class="play1">
<i class="iconfont icon-bofang fx"></i>
</div>
<p>店铺</p>
</li>
<li>
<div><i class="iconfont icon-sport"></i></div>
<div class="play1">
<i class="iconfont icon-bofang fx"></i>
</div>
<p>运动</p>
</li>
<li>
<div><i class="iconfont icon-icon_relax"></i></div>
<div class="play1">
<i class="iconfont icon-bofang fx"></i>
</div>
<p>轻松</p>
</li>
<li>
<div><i class="iconfont icon-index-sweet-service"></i></div>
<div class="play1">
<i class="iconfont icon-bofang fx"></i>
</div>
<p>甜蜜</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="lunbo">
<div class="lunbo_mid">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15961662413d13e84c353af52fbb7e74567f0c2089.jpg@s_2,w_750,h_300"
alt="">
<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_159617722011d469e5fd6b50d99dabca0e988cb099.jpg@s_2,w_750,h_300"
alt="">
</div>
<div class="lunbo_left">
<img src="./img/zuo.png" alt="">
</div>
<div class="lunbo_right">
<img src="./img/you.png" alt="">
</div>
</div>
<div class="Newge">
<div class="Newge_title">
<h2>新歌首发</h2>
<span>更多</span>
</div>
<div class="Newge_content">
<ul>
<li>
<a href="">
<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-bofang fx"></i>
</div>
</a>
<p>千千音乐新歌速递</p>
<p>新歌抢先听</p>
</li>
<li>
<a href="">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159676762847675f8e4788a5190f90d0d3936d5389.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-bofang fx"></i>
</div>
</a>
<p>你说，我听着呢</p>
<p>吴克群</p>
</li>
<li>
<a href="">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1596768050e92437b88c82c07aafd89b19035c34e0.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-bofang fx"></i>
</div>
</a>
<p>放空</p>
<p>陈宏宇</p>
</li>
<li>
<a href="">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1596767940be15a45e3997ea3bfe7a2d9ad7f646d1.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-bofang fx"></i>
</div>
</a>
<p>History</p>
<p>荒木宏文</p>
</li>
<li>
<a href="">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159676781754a96b3bff24498634c9c9c91206e3da.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-bofang fx"></i>
</div>
</a>
<p>百家姓·三字经</p>
<p>窦唯/朝简</p>
</li>
<li>
<a href="">
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15967020589cc9d8edc66af8d46bcd260a5c40aa2b.jpg@s_2,w_346,h_346"
alt="">
<div class="play">
<i class="iconfont icon-bofang fx"></i>
</div>
</a>
<p>麒霏Kathrain 同名专辑</p>
<p>麒霏</p>
</li>
</ul>
<img class="you" src="./img/you.png" alt="">
<img class="zuo" src="./img/zuo.png" alt="">
</div>
</div>
<div class="phb">
<div class="title">
<div class="left">
<h2>排行榜</h2>
<span>更多</span>
</div>
</div>
<ul class="phb_ul">
<li>
<div class="ph_title">
<span>新歌榜</span>
<a href=""><img src="./img/anniu1.png" alt=""></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</div>
</div>
<div class="ph_zi">
<a href="">查看完整榜单></a>
</div>
</li>
<li>
<div class="ph_title">
<span>热曲榜</span>
<a href=""><img src="./img/anniu2.png" alt=""></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</div>
</div>
<div class="ph_list">
<div class="list_l">
<span class="num">12</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</div>
</div>
<div class="ph_zi">
<a href="">查看完整榜单></a>
</div>
</li>
<li>
<div class="ph_title">
<span>网络歌曲榜</span>
<a href=""><img src="./img/anniu3.png" alt=""></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</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">
<a href=""><i class="iconfont icon-bofang1"></i></a>
<a href=""></a><i class="iconfont icon-tianjia"></i></a>
<a href=""></a><i class="iconfont icon-download"></i></a>
</div>
</div>
<div class="ph_zi">
<a href="">查看完整榜单></a>
</div>
</li>
</ul>
</div>
<div class="singer">
<div class="singer_title">
<p>热门歌手</p>
<span>更多</span>
</div>
<div class="singer_content">
<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/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
alt="">
<p>薛之谦</p>
</li>
<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/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
alt="">
<p>薛之谦</p>
</li>
<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/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
alt="">
<p>薛之谦</p>
</li>
</ul>
</div>
</div>
<div class="MV">
<div class="MV_title">
<h2>精选MV</h2>
<span>更多</span>
</div>
<div class="MV_content">
<ul>
<li>
<a href="">
<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-bofang fx"></i>
</div>
</a>
<p>Home</p>
<p>蔡徐坤</p>
</li>
<li>
<a href="">
<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-bofang fx"></i>
</div>
</a>
<p>盒子（BOX）</p>
<p>歌手-张杰妮Jani Z.</p>
</li>
<li>
<a href="">
<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-bofang fx"></i>
</div>
</a>
<p>GetAway</p>
<p>崔迪</p>
</li>
<li>
<a href="">
<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-bofang fx"></i>
</div>
</a>
<p>说说而已</p>
<p>Hickey喜祺</p>
</li>
</ul>
<img class="you" src="./img/you.png" alt="">
<img class="zuo" src="./img/zuo.png" alt="">
</div>
</div>
<div class="act">
<div class="act_title">
<p>热门活动</p>
<span>更多</span>
</div>
<div class="act_content">
<ul>
<li><img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15480660627d94bd0ab1c474c860a059c52b38f1fc.jpg@s_2,w_760,h_304"
alt="">
<p>少年红星音乐计划</p>
</li>
<li><img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15480662673c21cb33585df55ea59d202a537c0fc8.jpg@s_2,w_760,h_304"
alt="">
<p>千千Nu创音乐榜</p>
</li>
<li><img src="http://business0.qianqian.com/qianqian/pic/bos_client_15692293177ac453eb9b3cc8847302aaae82069b94.jpg@s_2,w_760,h_304"
alt="">
<p>云南·抚仙湖麦田音乐节赠票活动</p>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="footer_content">
<ul class="footer_content1">
<li>
<p class="biaoti">下载客户端</p>
<ul class="biaoti_pic">
<li><a href=""><img src="./img/win.png" alt="">
<p>PC版</p>
</a></li>
<li><a href=""><img src="./img/pc.png" alt="">
<p>MAC版</p>
</a></li>
<li><a href=""><img src="./img/az.png" alt="">
<p>安卓版</p>
</a></li>
<li><a href=""><img src="./img/iphone.png" alt="">
<p>iPhone版</p>
</a></li>
</ul>
</li>
<li>
<p class="biaoti">关于千千音乐</p>
<ul class="advice">
<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="biaoti">关注音乐</p>
<ul class="gzyy">
<li><a href=""><img src="./img/wb.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/ting.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>
</body>
</html>