qqmusic record，布局完成

1.高斯模糊图片
值越小越不模糊，值越大越模糊

filter:blur(100px);

这个像素加px
2.让图片填满整个屏幕

background-size: cover;

3.让照片在最后边显示（注意：不要加px加习惯了，这个不需要加px）

z-index: -2;

4淡灰色的遮罩

<div class="mask"></div>

.mask{position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;background: rgba(0,0,0,0.35);
}

<!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 music_play2"></a><a href="javascript:;" class="music_next"></a><div class="music_progress_info"><div class="music_progress_top"><span class="music_progress_name">小贾小贾，依旧是小贾/小西贝</span><span class="music_progress_time">00：00 / 05：23</span></div><div class="music_progress_bar"><div class="music_progress_line"><div class="music_progress_dot"></div></div></div></div><a href="javascript:;" class="music_mode music_mode4"></a><a href="javascript:;" class="music_fav music_fav2"></a><a href="javascript:;" class="music_down"></a><a href="javascript:;" class="music_comment"></a><a href="javascript:;" class="music_only .music_only2"></a><div class="music_voice_info"><a href="javascript:;" class="music_voice_icon"></a><div class="music_voice_bar"><div class="music_voice_line"><div class="music_voice_dot"></div></div></div></div></div></div></div></div><div class="mask_bg"></div><div class="mask"></div></body>
</html>

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: 80px;/*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;margin-right: 20px;
}.footer_in .music_pre {width: 19px;height: 20px;background-position: 0 -30px;
}.footer_in .music_play {width: 21px;height: 29px;background-position: 0 0;vertical-align: -5px;
}.footer_in .music_play2 {background-position: -30px 0;
}.footer_in .music_next {width: 19px;height: 20px;background-position: 0 -52px;
}.footer_in .music_progress_info {display: inline-block;width: 671px;height: 40px;/*background: red;*/position: relative;top: 10px;
}.music_progress_info .music_progress_top {width: 100%;height: 30px;line-height: 30px;/*background: #000000;*/color: #FFFFFF;
}.music_progress_top .music_progress_name {float: left;opacity: 0.5;
}.music_progress_top .music_progress_name:hover {opacity: 1;
}.music_progress_top .music_progress_time {float: right;opacity: 0.5;
}.music_progress_top .music_progress_time:hover {opacity: 1;
}.music_progress_info .music_progress_bar {width: 100%;height: 5px;background: rgba(255, 255, 255, 0.5);margin-top: 5px;
}.music_progress_bar .music_progress_line {width: 100px;height: 100%;background: #fff;
}.music_progress_line .music_progress_dot {width: 14px;height: 14px;border-radius: 50%;background: #fff;position: relative;top: -5px;left: 100px;
}.footer_in .music_mode {width: 26px;height: 25px;background-position: 0 -205px;
}.footer_in .music_mode2 {width: 23px;height: 20px;background-position: 0 -260px;
}.footer_in .music_mode3 {width: 25px;height: 19px;background-position: 0 -74px;
}.footer_in .music_mode4 {width: 26px;height: 25px;background-position: 0 -232px;
}.footer_in .music_fav {width: 24px;height: 21px;background-position: 0 -96px;
}.footer_in .music_fav2 {background-position: -30px -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_only2 {background-position: 0 -310px;
}.footer_in .music_voice_info {display: inline-block;width: 100px;height: 40px;/*background: #004580;*/position: relative;top: 10px;
}.music_voice_info .music_voice_icon {width: 26px;height: 21px;background-position: 0 -144px;position: absolute;left: 0;top: 10px;
}.music_voice_info .music_voice_bar {width: 70px;height: 4px;background: rgba(255, 255, 255, 0.5);position: absolute;right: 0;top: 18px;
}.music_voice_bar .music_voice_line {width: 50px;height: 100%;background: #fff;
}.music_voice_line .music_voice_dot {width: 14px;height: 14px;border-radius: 50%;background: #fff;position: relative;top: -5px;left: 50px;
}.mask_bg{position: absolute;left: 0;top: 0;z-index: -2;width: 100%;height: 100%;background:url(../img/images/lnj.jpg) no-repeat 0 0 ;background-size: cover;filter:blur(100px);
}
.mask{position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;background: rgba(0,0,0,0.35);
}
.mCS_1 .mCSB_scrollTools .mCSB_dragger_bar {width: 15px;
}

qqmusic record，布局完成相关推荐

QQmusic imitations record 第二天
css导入导入框架的时候,先导入其他框架,再导入自己写的框架 https://manos.malihu.gr/ https://manos.malihu.gr/jquery-custom-conte ...
你需要知道的Android View的布局
上一篇我们分析Android View的测量.我们先回顾一下,View的测量,在ViewRootImpl#performTraverals方法下,先进行对DecorView根布局测量获取Measure ...
Linux 操作系统原理 — 文件系统 — 存储布局
目录文章目录目录磁盘分区 MBR 与分区表创建 MBR 分区创建 GPT 分区分区的格式化分区的特性引导块空闲空间块 inode 区块.data block 区块与超级块 LVM 与 ...
EXT.NET复杂布局（四）——系统首页设计（下）
此篇为EXT.NET系列终结篇.希望此系列能够对大家有所帮助. 首页JS函数介绍使然使用了Ext.NET,但是JavaScript的地位还是举足轻重的. 1.添加选项卡 1: var addTab ...
EXT.NET复杂布局（二）——报表
前面提到过工作台(<EXT.NET复杂布局(一)--工作台>)了,不知道各位看过之后有什么感想.这次就介绍介绍使用EXT.NET画几个报表. 看图写作从小学就开始了,如图: 图一图二图 ...
delphi中Record 和Packed Record的区别
Record 和Packed Record 第一种不带packed关键字的结构体表明编译器编译时要求进行字对齐,而第二种带packed关键字的结构体表明编译器编译该结构体时不需要进行字对齐,这种方式对 ...
java char占用多少字节_Java虚拟机：Java对象大小、对象内存布局及锁状态变化
一个对象占多少字节? 关于对象的大小,对于C/C++来说,都是有sizeof函数可以直接获取的,但是Java似乎没有这样的方法.不过还好,在JDK1.5之后引入了Instrumentation类,这个 ...
Android高级开发-布局渲染流程与优化
扩展知识 CPU(中央处理器)与GPU(图像处理器) 主要是设计目标不同,针对不同的应用场景.多缓存多分支,适用于复杂的逻辑运算,主要负责Measure,Layout,Record,Execute的计 ...
Linux 进程内存布局(一)
Linux 进程内存布局内存管理是操作系统的核心分部,对于程序员和系统管理员来说都非常重要. 这篇文章中我将以介绍一个运行在x86架构的32位Linux 操作系统上进程为例,介绍进程在执行的时候的内 ...

qqmusic record，布局完成

qqmusic record，布局完成相关推荐

最新文章

热门文章