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,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;
}

View File

@@ -0,0 +1,258 @@
.header {
}
.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 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 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;
}
.PopularSongist {
width: 790px;
overflow: hidden;
padding-top: 23px;
margin-right: 40px;
}
.list li{
width: 175px;
height: 204px;
float: left;
margin-right: 30px;
}
.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;
}
.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;
}
.icon-play {
color: #fff;
text-align: center;
margin-left: 13px;
}
.title {
overflow: hidden;
height: 38px;
line-height: 38px;
margin-bottom: 25px;
}
.title img {
height: 20px;
margin-top: 16px;
}
.title .left h2 {
display: inline-block;
margin-right: 15px;
font-size: 24px;
color: #333;
font-weight: 300;
}
.title .left span {
font-size: 14px;
color: #999;
}
.content_right {
padding-top: 23px;
width: 350px;
}
.ge_list {
display: flex;
flex-wrap: wrap;
}
.ge_list 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;
}
.ge_list li:nth-child(3n){
margin-right: 0 !important;
}
.dt_title {
display: flex;
flex-wrap: wrap;
margin-left: -28px;
margin-right: 28px
}
.dt_title li {
text-align: center;
width: 25%;
margin-bottom: 20px;
}
.dt_title li img {
width: 50px;
}
.dt_title li p {
font-size: 14px;
color: #333;
}
.phb_ul {
display: flex;
justify-content: space-between;
}
.dddd {
overflow: hidden;
}
.phb_ul li{
width: 380px;
border: 1px solid rgba(91,148,0,.3);
height: 544px;
}
.phb_ul li .ph_title{
display: flex;
justify-content: space-between;
padding: 0 10px;
height:66px;
align-items: center;
background-color: rgba(91,148,0,.1);
}
.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;
}
.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: 50px;
}

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;
}

View File

@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<style>
body,a,h1,h2,h3,h4,h5,h6,p{
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 1200px;
margin: 0 auto;
}
.title {
margin-bottom: 20px;
}
.t_name {
font-size: 28px;
font-weight: 600;
margin-right: 12px;
}
.t_more {
font-size: 14px;
color: #999;
}
.content {
position: relative;
}
.left {
height: 50px;
position: absolute;
left: -70px;
top: 50%;
margin-top: -25px;
}
.right {
height: 50px;
position: absolute;
right: -70px;
top: 50%;
margin-top: -25px;
}
.img {
overflow: hidden;
}
.img li {
text-align: center;
float: left;
margin-right: 30px;
}
.img li img {
width: 170px;
margin-bottom: 10px;
}
.img li span {
font-size: 14px;
color: #999;
}
.yd {
position: absolute;
bottom: -35px;
left: 50%;
margin-left: -60px;
}
.yd li {
width: 15px;
height: 15px;
border-radius: 100%;
background-color: red;
float: left;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="main">
<div class="title">
<span class="t_name">新歌首发</span>
<span class="t_more">更多</span>
</div>
<div class="content">
<ul class="img">
<li>
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1595816932f6b97e50664a9784d18ffbd6b53a5d0a.jpg@s_2,w_346,h_346" alt="">
<p>千千音乐新歌速递</p>
<span>新歌抢鲜听</span>
</li>
<li>
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1595816932f6b97e50664a9784d18ffbd6b53a5d0a.jpg@s_2,w_346,h_346" alt="">
<p>千千音乐新歌速递</p>
<span>新歌抢鲜听</span>
</li>
<li>
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1595816932f6b97e50664a9784d18ffbd6b53a5d0a.jpg@s_2,w_346,h_346" alt="">
<p>千千音乐新歌速递</p>
<span>新歌抢鲜听</span>
</li>
<li>
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1595816932f6b97e50664a9784d18ffbd6b53a5d0a.jpg@s_2,w_346,h_346" alt="">
<p>千千音乐新歌速递</p>
<span>新歌抢鲜听</span>
</li>
<li>
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1595816932f6b97e50664a9784d18ffbd6b53a5d0a.jpg@s_2,w_346,h_346" alt="">
<p>千千音乐新歌速递</p>
<span>新歌抢鲜听</span>
</li>
<li>
<img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1595816932f6b97e50664a9784d18ffbd6b53a5d0a.jpg@s_2,w_346,h_346" alt="">
<p>千千音乐新歌速递</p>
<span>新歌抢鲜听</span>
</li>
</ul>
<ul class="yd">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<img class="left" src="./left.png" alt="">
<img class="right" src="./right.png" alt="">
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

@@ -0,0 +1,523 @@
<!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_1975352_h4zy9ddaafo.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_1978518_3wtzoq7jqmv.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="dddd">
<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-play"></i>
</div>
</div>
<a class="info">防弹少年团BTS</a>
</li>
<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-play"></i>
</div>
</div>
<a class="info">防弹少年团BTS</a>
</li>
<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-play"></i>
</div>
</div>
<a class="info">防弹少年团BTS</a>
</li>
<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-play"></i>
</div>
</div>
<a class="info">防弹少年团BTS</a>
</li>
<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-play"></i>
</div>
</div>
<a class="info">防弹少年团BTS</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="ge_list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div class="tjdt">
<div class="title">
<div class="left">
<h2>热门歌单</h2>
<span>更多</span>
</div>
</div>
<ul class="dt_title">
<li>
<img src="./img/icon_dd.png" alt="">
<p>随便听听</p>
</li>
<li>
<img src="./img/icon_dd.png" alt="">
<p>随便</p>
</li>
<li>
<img src="./img/icon_dd.png" alt="">
<p>随便听听</p>
</li>
<li>
<img src="./img/icon_dd.png" alt="">
<p>听听</p>
</li>
<li>
<img src="./img/icon_dd.png" alt="">
<p>随便听听</p>
</li>
<li>
<img src="./img/icon_dd.png" alt="">
<p>随听</p>
</li>
<li>
<img src="./img/icon_dd.png" alt="">
<p>随便听听</p>
</li>
<li>
<img src="./img/icon_dd.png" alt="">
<p>随便听听</p>
</li>
</ul>
</div>
</div>
</div>
<div class="pic"></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>
<img src="./img/item.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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</div>
</div>
</li>
<li>
<div class="ph_title">
<span>新歌榜</span>
<img src="./img/item.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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</div>
</div>
</li>
<li>
<div class="ph_title">
<span>新歌榜</span>
<img src="./img/item.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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</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">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
<img src="./img/item.png" alt="">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB