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>

QQmusic imitations record 第二天相关推荐

tfrecord文件生成与读取
参考博客--tensorflow-TFRecord 文件详解 1. 生成tfrecord文件代码 #1.创建tfrecord对象 tf_record=tf.python_io.TFRecordWri ...
mvc移动创建oracle表,使用 ASP.NET MVC （C#）在15分钟内创建电影数据库应用程序 | Microsoft Docs...
使用 ASP.NET MVC 在 15 分钟内创建电影数据库应用程序 (C#)Create a Movie Database Application in 15 Minutes with ASP.NE ...
Odoo权限详解一张图
权限一张图权限详解文字版 (部分转载并补充) 在Odoo中,使用用户组(res.groups)来管理权限,一个特殊的用户组是员工/员工(base.group_user) 组,所有的用户都属于这个组 ...
odoo----权限机制
第一篇:http://www.cnblogs.com/dancesir/p/6994030.html Odoo的权限的核心是权限组(res_groups).对每个权限组,可以设置权限组的菜单表示,对象 ...
# Odoo丨一文让你弄懂Odoo的用户、组与权限
Odoo丨一文让你弄懂Odoo的用户.组与权限在 Odoo 上的尝试.调研与分享 Odoo中的权限规则的使用 Odoo是基于Python语言编写的全球流行的开源管理套件,它的各个应用程序能完美集成在 ...
qqmusic record，布局完成
1.高斯模糊图片值越小越不模糊,值越大越模糊 filter:blur(100px); 这个像素加px 2.让图片填满整个屏幕 background-size: cover; 3.让照片在最后边显示( ...
变体类的使用 package record case【转载】
**************理论区 start********************* DELPHI中记录的存储方式在DELPHI中,我们用record关键字来表明一个记录,有时候,我 ...
apue学习之文件IO第二部分
学习apue课程已经有一个多月了,有很多知识点需要自己去总结: 下面是主要的几个函数的介绍: 1-stat()函数是获得文件的主要信息.在linux当中主要以一个结构体来保存文件的信息,其中每一个字段 ...
1675: [Usaco2005 Feb]Rigging the Bovine Election 竞选划区（题解第二弹）
1675: [Usaco2005 Feb]Rigging the Bovine Election 竞选划区 Time Limit: 5 Sec Memory Limit: 64 MB Submit: ...

QQmusic imitations record 第二天

css导入

jQuery导入

css

html

QQmusic imitations record 第二天相关推荐

最新文章

热门文章