css导入
导入框架的时候,先导入其他框架,再导入自己写的框架
https://manos.malihu.gr/
https://manos.malihu.gr/jquery-custom-content-scroller/
jQuery导入
先导入jquery,再导入框架,之后导入自己写的js
<head>
<meta charset="utf-8" />
<title>QQ音乐播放器</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"/>
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery-3.4.1.min.js">
</script>
<script src="js/js/jquery.mCustomScrollbar.concat.min.js">
</script>
<script src="js/js/index.js">
</script>
</head>
css
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font-size: 14px;
}
.header {
width: 100%;
height: 45px;
background-color: red;
}
.header .logo {
float: left;
margin-top: 5px;
margin-left: 20px;
opacity: 0.5;
}
.header .logo:hover {
opacity: 1;
}
.header .logo a {
display: inline-block;
width: 78px;
height: 21px;
background: url(../img/images/player_logo.png) no-repeat 0 0;
}
.header .register {
float: right;
line-height: 45px;
}
.header .register li {
list-style: none;
float: left;
margin-right: 20px;
color: #fff;
opacity: 0.5;
}
.header .register li:hover {
opacity: 1;
}
.content {
width: 100%;
height: 460px;
background: blue;
}
.content .content_in {
width: 1200px;
height: 100%;
background: deeppink;
margin: 0 auto;
}
.content_in .content_left {
float: left;
width: 800px;
height: 100%;
background: pink;
}
.content_left .content_toolbar {
width: 100%;
height: 40px;
background: #000;
/*color: wheat;也可以*/
}
.content_toolbar span {
display: inline-block;
width: 122px;
height: 100%;
line-height: 40px;
text-align: center;
border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 5px;
color: white;
opacity: 0.5;
}
.content_toolbar span:hover {
opacity: 1;
}
.content_toolbar span i {
display: inline-block;
width: 18px;
height: 18px;
background: url(../img/images/icon_sprite.png) no-repeat 0 0;
margin-right: 10px;
vertical-align: -5px;
}
.content_toolbar span:nth-child(1) i {
background-position: -60px -20px;
}
.content_toolbar span:nth-child(2) i {
background-position: -20px -20px;
}
.content_toolbar span:nth-child(3) i {
background-position: -40px -220px;
}
.content_toolbar span:nth-child(4) i {
background-position: -100px -20px;
}
.content_toolbar span:nth-child(5) i {
background-position: -40px -300px;
}
.content_left .content_list {
width: 100%;
height: 420px;
background: purple;
overflow: auto;
}
.content_list li {
list-style: none;
width: 100%;
height: 50px;
background: orangered;
/*opacity: 0.5;这样也可以*/
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
box-sizing: border-box;
user-select: none;
}
.content_list li div {
float: left;
color: #fff;
line-height: 50px;
opacity: 0.5;
}
.content_list .list_check {
width: 50px;
height: 100%;
background: #000000;
text-align: center;
}
.content_list .list_check i {
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #fff;
}
.content_list .list_checked i {
background: url(../img/images/icon_sprite.png) no-repeat -60px -80px;
}
.content_list .list_number {
width: 20px;
height: 100%;
/*background: green;*/
}
.content_list .list_name {
width: 50%;
height: 100%;
/*background: #CCCCCC;*/
}
.list_name .list_menu {
margin-top: 5px;
float: right;
margin-right: 20px;
display: none;
}
.list_menu a {
display: inline-block;
width: 36px;
height: 36px;
background: url(../img/images/icon_list_menu.png) no-repeat 0 0;
}
.list_menu a:nth-child(1) {
background-position: -120px 0;
}
.list_menu a:nth-child(2) {
background-position: -120px -80px;
}
.list_menu a:nth-child(3) {
background-position: -120px -120px;
}
.list_menu a:nth-child(4) {
background-position: -120px -40px;
}
.content_list .list_singer {
width: 20%;
height: 100%;
background: pink;
}
.content_list .list_time a {
display: inline-block;
width: 36px;
height: 36px;
background: url(../img/images/icon_list_menu.png) no-repeat -120px -160px;
float: left;
margin-top: 5px;
display: none;
}
.content_in .content_right {
float: right;
width: 400px;
height: 100%;
background: #ccc;
}
.content_right .song_info {
text-align: center;
color: rgba(255, 255, 255, 0.5);
line-height: 30px;
}
.song_info .song_info_pic {
display: inline-block;
background: url(../img/images/album_cover_player.png) no-repeat 0 0;
width: 201px;
height: 180px;
text-align: left;
}
.song_info_pic img {
width: 180px;
height: 180px;
}
.song_info div a {
text-decoration: none;
color: #FFFFFF;
opacity: 0.5;
}
.song_info div a:hover {
opacity: 1;
}
.content_right .song_lyric {
/*background: #008000;*/
text-align: center;
margin-top: 30px;
}
.content_right .song_lyric li {
list-style: none;
line-height: 30px;
font-weight: bold;
color: rgba(255, 255, 255, 0.5);
}
.content_right .song_lyric .cur {
color: #31e27c;
}
.footer {
width: 100%;
height: 60px;
background: green;
position: absolute;
left: 0;
bottom: 0;
}
.footer .footer_in {
width: 1200px;
height: 100%;
background: plum;
margin: 0 auto;
}
.footer_in a {
display: inline-block;
text-decoration: none;
color: #FFFFFF;
background: url(../img/images/player.png) no-repeat 0 0;
}
.footer_in .music_pre {
width: 19px;
height: 20px;
background-position: 0 -30px;
}
.footer_in .music_play {
width: 21px;
height: 20px;
background-position:0 0;
}
.footer_in .music_next {
width: 19px;
height: 20px;
background-position: 0 -52px;
}
.footer_in .music_progress_info {
display: inline-block;
width: 2;
height: 40px;
}
.footer_in .music_mode {
width: 26px;
height: 25px;
background-position: 0 -205px;
}
.footer_in .music_fav {
width: 24px;
height: 21px;
background-position: 0 -96px;
}
.footer_in .music_down {
width: 22px;
height: 21px;
background-position: 0 -120px;
}
.footer_in .music_comment {
width: 24px;
height: 24px;
background-position: 0 -400px;
}
.footer_in .music_only {
width: 74px;
height: 27px;
background-position: 0 -281px;
}
.footer_in .music_voice_info{
display: inline-block;
width:0;
height: 40px;
}
.mCS_1 .mCSB_scrollTools .mCSB_dragger_bar {
width: 15px;
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QQ音乐播放器</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery-3.4.1.min.js">
</script>
<script src="js/js/jquery.mCustomScrollbar.concat.min.js">
</script>
<script src="js/js/index.js">
</script>
</head>
<body>
<div class="header">
<h1 class="logo"><a href="#"></a></h1>
<ul class="register">
<li>登录</li>
<li>设置</li>
</ul>
</div>
<div class="content">
<div class="content_in">
<div class="content_left">
<div class="content_toolbar">
<span><i></i>收藏</span>
<span><i></i>添加到</span>
<span><i></i>下载</span>
<span><i></i>删除</span>
<span><i></i>清空列表</span>
</div>
<div class="content_list" data-mcs-theme="minimal-dark">
<ul>
<li class="list_title">
<div class="list_check">
<i></i>
</div>
<div class="list_number">
</div>
<div class="list_name">
歌曲
</div>
<div class="list_singer">
歌手
</div>
<div class="list_time">
时长
</div>
</li>
<li class="list_music">
<div class="list_check">
<!--list_checked-->
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<!--list_checked-->
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<!--list_checked-->
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<!--list_checked-->
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:" title="删除"></a>
</div>
</li>
<li class="list_music">
<div class="list_check">
<i></i>
</div>
<div class="list_number">
1
</div>
<div class="list_name">
模仿名字
<div class="list_menu">
<a href="javascript:" title="播放"></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>66:66</span>
<a href="javascript:;" title="删除"></a>
</div>
</li>
</ul>
</div>
</div>
<div class="content_right">
<div class="song_info">
<a href="javascript:" class="song_info_pic">
<img src="img/images/lnj.jpg" alt="">
</a>
<div class="song_info_name">歌曲名称:
<a href="javascript:;">从不认识到熟悉</a>
</div>
<div class="song_info_singer">歌手:
<a href="javascript:;">远方的浪子</a>
</div>
<div class="song_info_name">专辑名称:
<a href="javascript:;">出人头地</a>
</div>
</div>
<ul class="song_lyric">
<li class="cur">第一条歌词</li>
<li>第二条歌词</li>
</ul>
</div>
</div>
<div class="footer">
<div class="footer_in">
<a href="javascript:;" class="music_pre"></a>
<a href="javascript:;" class="music_play"></a>
<a href="javascript:;" class="music_next"></a>
<div class="music_progress_info">
<a href="javascript:;" class="music_mode"></a>
<a href="javascript:;" class="music_fav"></a>
<a href="javascript:;" class="music_down"></a>
<a href="javascript:;" class="music_comment"></a>
<a href="javascript:;" class="music_only"></a>
<div class="music_voice_info">
</div>
</div>
</div>
</div>
</div>
</body>
</html>