console
$(function(){
$(".list-sing").hover(function(){
$(this).find(".list-menu").stop().fadeIn(100);
},function(){
$(this).find(".list-menu").stop().fadeOut(100);
});
$(".list-time").hover(function(){
$(this).find("a").stop().fadeIn(100);
$(this).find("span").stop().fadeOut(100);
},function(){
$(this).find("a").stop().fadeOut(100);
$(this).find("span").stop().fadeIn(100);
})
$(".list-time>a").click(function(){
$(this).parents("li").remove();
})
$(".list-check>span").click(function(){
$(this).parents(".list-check").css({
"background":"red"
});
});
$(".list-menu-play").click(function(){
$(this).toggleClass("list-menu-play2");
$(this).parents(".lists").siblings().find(".list-menu-play").removeClass("list-menu-play2");
if($(this).attr('class').indexOf('list-menu-play2')!=-1){
$('.play').addClass('play1');
}else{
$('.play').removeClass('play1');
}
})
})
<div class="head">
<h1>
QQ音乐
</h1>
<a href="javascript::">
登录
</a>
<a href="javascript::">
设置
</a>
</div>
<div class="center">
<div class="center-center">
<div class="center-left">
<div class="c-l-top">
<span><i></i>收藏</span>
<span><i></i>添加到</span>
<span><i></i>下载</span>
<span><i></i> 删除</span>
<span>
<i>
</i>
清空列表
</span>
</div>
<div class="c-l-list">
<ul>
<li class="list-top">
<div class="list-top-check">
<span>
</span>
</div>
<div class="list-top-none">
</div>
<div class="list-top-sing">
歌曲
</div>
<div class="list-top-singer">
歌手
</div>
<div class="list-top-time">
时长
</div>
</li>
<li class="lists">
<div class="list-check">
<span>
</span>
</div>
<div class="list-top-none">
</div>
<div class="list-sing">
哈哈
<div class="list-menu">
<a href="javascript::" title="播放" class="list-menu-play"></a>
<a href="javascript::" title="添加"></a>
<a href="javascript::" title="下载"></a>
<a href="javascript::" title="分享"></a>
</div>
</div>
<div class="list-singer">
别昔
</div>
<div class="list-time">
<span>08:10</span>
<a href="javascript::" title="删除"></a>
</div>
</li>
<li class="lists">
<div class="list-check">
<span>
</span>
</div>
<div class="list-top-none">
</div>
<div class="list-sing">
哈哈
<div class="list-menu">
<a href="javascript::" title="播放" class="list-menu-play"></a>
<a href="javascript::" title="添加"></a>
<a href="javascript::" title="下载"></a>
<a href="javascript::" title="分享"></a>
</div>
</div>
<div class="list-singer">
别昔
</div>
<div class="list-time">
<span>08:10</span>
<a href="javascript::" title="删除"></a>
</div>
</li>
</ul>
</div>
</div>
<div class="center-right">
<div class="song-info">
<a href="javascript::" class="song-info-pic">
<div class="song-img"></div>
<div class="song-img-after"></div>
</a>
<div class="song-name">歌曲名:
<a href="javascript::">哈哈</a>
</div>
<div class="songer-name">歌手名:
<a href="javascript::">别昔</a>
</div>
<div class="list-name">专辑名:
<a href="javascript::">测试</a>
</div>
</div>
<ul class="song-lyric">
<li class="lyric-select">第一条歌词</li>
<li>第二条歌词</li>
<li>第一条歌词</li>
<li>第二条歌词</li>
</ul>
</div>
</div>
</div>
<div class="foot">
<div class="foot-center">
<div class="foot-tab">
<a href="javascript::"></a>
<a href="javascript::" class="play"></a>
<a href="javascript::"></a>
</div>
<div class="progress-bar">
<div class="progress-top">
<span class="progress-name">三年的看见我</span>
<span class="progress-time">00:00/05：02</span>
</div>
<div class="progress-bottom">
<div class="now-progress">
<div class="ball-progress">
</div>
</div>
</div>
</div>
<div class="foot-right">
<a href="javascript::" class="xunhuan1 xunhuan2"></a>
<a href="javascript::" class="love love1"></a>
<a href="javascript::"></a>
<a href="javascript::"></a>
<a href="javascript::" class="mod mod1"></a>
</div>
<div class="voice">
<a href="javascript::"></a>
<div class="voice-progress">
<div class="voice-now-progress">
<div class="voice-ball">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg"></div>
* {
margin: 0;
padding: 0;
}
body {
width: 1536px;
height: 720px;
}
.head {
width: 100%;
height: 60px;
}
.head>h1 {
color: #fff;
float: left;
opacity: 0.5;
margin-left: 40px;
line-height: 60px;
}
.head>a {
color: beige;
line-height: 60px;
margin-right: 20px;
position: relative;
float: right;
text-decoration: none;
opacity: 0.5;
}
.head>h1:hover {
opacity: 1;
}
.head>a:hover {
opacity: 1;
}
.center {
width: 100%;
height: 600px;
}
.center-left {
width: 65%;
height: 100%;
float: left;
}
.c-l-list>ul{
list-style:none;
}
.c-l-list>ul>li{
border-bottom:1px solid rgba(225,225,225,0.5)
}
.c-l-top {
height: 10%;
width: 100%;
}
.c-l-top>span {
display: block;
width: 122px;
height: 38px;
margin: 10px;
border: 1px solid #000;
float: left;
text-align: center;
line-height: 40px;
border-radius: 5px;
color: white;
opacity: 0.5
}
.c-l-top>span:hover {
opacity: 1.0;
color: blue;
}
.c-l-list {
height:540px;
width: 800px;
overflow-y:auto;
overflow-x:hidden;
}
.c-l-list::-webkit-scrollbar{
width: 5px;
background:rgba(204, 28, 28, 1);
}
.c-l-list::-webkit-scrollbar-button{
display: none;
}
.c-l-list::-webkit-scrollbar-thumb{
background-color:rgba(17, 17, 17, 0.8);
}
.c-l-list>ul>li{
width: 800px;
height: 40px;
}
.list-top-check {
width: 40px;
height: 40px;
float: left;
}
.list-top-check>span {
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #fff;
}
.list-check {
width: 40px;
height: 40px;
float: left;
}
.list-check>span {
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #fff;
}
.list-top-none {
width: 40px;
height: 40px;
float: left
}
.list-top-sing {
height: 40px;
width: 400px;
float: left;
}
.list-sing {
height: 40px;
width: 400px;
float: left;
user-select:none;
}
.list-menu{
float:right;
margin-top:2.5px;
margin-right:20px;
display:none;
}
.list-menu>a{
display:inline-block;
height:36px;
width:36px;
background:black;
}
.list-menu>.list-menu-play2{
background:red !important;
}
.list-top-singer {
height: 100%;
width: 180px;
float: left;
}
.list-singer {
height: 100%;
width: 180px;
float: left;
}
.list-top-time {
height: 100%;
float: left;
width: 139px;
}
.list-time {
height: 100%;
float: left;
width: 139px;
}
.list-time>a{
height:36px;
width:36px;
background:blue;
margin-top:2px;
float:left;
margin-left:50px;
display:none;
}
.list-top{
text-align: center;
line-height: 250%;
}
.lists{
text-align: center;
line-height: 250%;
opacity: 0.6;
}
.center-right {
width: 430px;
height: 100%;
float: left;
}
.song-info{
width:340px ;
margin-top:30px ;
margin-left:50px ;
height: 330px;
}
.song-info>a{
display: inline-block;
width: 300px;
height: 200px;
margin:10px 20px;
}
.song-img{
width:200px ;
height: 200px;
float: left;
background:url("img/封面.jpg") no-repeat 0 0;
background-size: cover;
margin-left: 25px;
}
.song-img-after{
width: 50px;
height: 200px;
float: left;
background:url("img/封面down.png") no-repeat -178px 0px;
}
.song-name{
text-align: center;
width: 100%;
height: auto;
margin: 10px auto;
color:rgba(247, 243, 243, 0.5);
}
.song-name>a{
text-decoration:none ;
color:rgba(247, 243, 243, 0.5);
}
.song-name>a:hover{
opacity: 1;
color:#fff
}
.songer-name{
text-align: center;
width: 100%;
height: auto;
margin: 10px auto;
color:rgba(247, 243, 243, 0.5);
}
.songer-name>a{
text-decoration:none ;
color:rgba(247, 243, 243, 0.5);
}
.songer-name>a:hover{
color:#fff
}
.list-name{
text-align: center;
width: 100%;
height: auto;
margin: 10px auto;
color:rgba(247, 243, 243, 0.5);
}
.list-name>a{
text-decoration:none ;
color:rgba(247, 243, 243, 0.5);
}
.list-name>a:hover{
color:#fff
}
.song-lyric{
margin-top:50px ;
list-style: none;
}
.song-lyric>li{
line-height: 40px;
text-align: center;
color: #ccc;
}
.song-lyric .lyric-select{
color: #31c27c;
font-weight: bolder;
}
.foot {
width: 100%;
height: 60px;
}
.center-center {
width: 80%;
height: 100%;
margin: 0 auto;
}
.foot-center {
width: 80%;
height: 100%;
margin: 0 auto;
}
.foot-tab{
width:200px;
height:100%;
float:left;
}
.foot-tab>a{
display:inline-block;
margin-right:20px;
background:black;
width:35px;
height:35px;
}
.foot-tab>.play{
width:45px;
height:45px;
position: relative;
top: 5px;
background:black;
}
.foot-tab>.play1{
background:pink;
}
.progress-bar{
display:block;
width:600px;
height:40px;
float:left;
}
.progress-top{
width:100%;
height:37px;
}
.progress-name{
float:left;
font-size:10px;
color:#fff;
line-height:50px;
opacity:0.5;
}
.progress-name:hover{
opacity:1;
}
.progress-time{
float:right;
font-size:10px;
color:#fff;
line-height:50px;
opacity:0.5;
}
.progress-bottom{
width:100%;
height:3px;
background:red;
}
.now-progress{
height:3px;
width:225px;
background:white;
}
.ball-progress{
display:block;
height:10px;
width:10px;
background:green;
position:relative;
top:-3px;
left:225px;
border-radius:5px;
}
.foot-right{
float:left;
width:260px;
height:100%;
}
.foot-right>a{
display:inline-block;
width:30px;
height:30px;
margin:12px 8px;
background:green;
}
.xunhuan{
background: green;
}
.xunhuan1{
background:black;
}
.xunhuan2{
background:yellow;
}
.love{
background: green;
}
.love1{
background: rgb(219, 19, 19);
}
.mod{
background: green;
}
.mod1{
background: red;
}
.voice{
float:left;
width:168px;
height:100%;
}
.voice>a{
display:inline-block;
margin:15px 0;
}
.voice>a:nth-child(1){
width:30px;
height:30px;
background:pink;
float:left;
margin-top:12px;
}
.voice-progress{
width:120px;
height:3px;
background:white;
float:left;
margin-top:25px;
margin-left:5px;
}
.voice-now-progress{
width:50px;
height:3px;
background:blue;
}
.voice-ball{
position:relative;
width:10px;
height:10px;
border-radius:5px;
background:#fff;
top:-3px;
left:50px;
}
.bg{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background: url("img/封面.jpg") no-repeat 0 0;
background-size: cover;
z-index: -5;
filter: blur(50px);
}