Web实现：网易云音乐个人推荐页

background-position: center;/背景图居中/
background-position: bottom right;/背景图右下角/
background-size: contain;/把背景图片扩大至最大尺寸，使其宽度和高度完全适应内容区域/
background-size: cover;/把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。/

实现效果如下：

HTML部分：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="./index.css" /><title>每日推荐</title></head><body><div class="banner"><div class="box"><div class="head">星期二</div><div class="date">17</div><div class="mask"></div></div></div></body>
</html>

CSS部分：

.banner {background-image: url(https://document.youkeda.com/P3-1-HTML-CSS/1.9/music-bg.jpg);background-size: cover;padding-left: 48px;padding-top: 30px;box-sizing: border-box;width: 715px;height: 200px;
}.box {position: relative;width: 140px;height: 140px;border-radius: 4px;overflow: hidden;
}.head {height: 33px;line-height: 33px;color: #fed9d9;font-size: 14px;text-align: center;background: linear-gradient(to bottom, #d94747, #b9191a);
}.date {background-color: white;height: 107px;line-height: 107px;text-align: center;font-size: 94px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;color: #202020;
}.mask {position: absolute;top: 33px;left: 0;right: 0;bottom: 0;background: linear-gradient(to bottom,rgba(0, 0, 0, 0.05),rgba(0, 0, 0, 0.15) 50%,rgba(0, 0, 0, 0.05) 50%,rgba(0, 0, 0, 0.15) 100%);
}

Web实现：网易云音乐个人推荐页相关推荐

网易云音乐的推荐音乐方式与算法漫谈
网易云音乐的推荐音乐方式与算法漫谈字数3131阅读8588评论13喜欢70 网易云音乐在我看来在各方面都是较为出色的音乐APP,网上也有各种体验报告.产品分析,但都比较偏向交互和前端.所以,我决定对 ...
React实现(Web端)网易云音乐项目(一),错过了真的可惜呀
首先肯定是搭建项目的结构了,通过脚手架安装这部分我就不说了首先看项目的目录结构 assets:放我们的静态资源,图片,字体和公共初始样式等 common:放我们公共的JS文件 components: ...
React实现(Web端)网易云音乐项目(三)，错过了真的可惜呀
接着前面的继续写了,这篇博客就写这两个页面,下一篇就主要讲歌曲播放功能,进度条拉伸以及歌曲时间的变化了先完成新碟上架Demo 一.第一步不用说肯定是先获取我们这个数据对吧去到我们services文 ...
编程骚操作：Java Web实现网易云音乐播放器，帮你省下会员费
H5增加了很多的标签,面试的时候,如果面试官问你H5都有哪些新标签,你回答header.footer.nav. 这么回答几乎是无效的,因为这些标签在H5里面的角色,相当于鸡骨头.鱼刺.蘑菇腿--全是鸡 ...
【微信小程序学习】网易云音乐歌曲详情页代码实现
这里记录一下做网易云小程序的音乐播放详情页面的代码. 音乐播放界面的主要的重点有几个: 1.磁盘和摇杆的旋转效果,这里运用了css的动画属性 2.音乐播放和暂停,下一首/上一首等播放效果的实现 3.进 ...
React实现(Web端)网易云音乐项目(二)，错过了真的可惜呀
接着上一篇来继续写了,这篇博客主要完成下面这部分一.首先先完成这个轮播图了,那肯定需要请求数据了,所以我们先把网络请求部分先写好在React里面我们也是通过axios来发送网络请求的,先安装 ya ...
React实现(Web端)网易云音乐项目(四)，错过了真的可惜呀
今天就写一下歌曲播放这个功能,进度条拉伸以及歌曲时间的变化,当我们改变一个状态的时候,其他几个都相应改变,这个功能还是有一点复杂的- 就是这个,当我们可以播放,暂停,当我们播放的时候,进度条改变以及歌 ...
deepin--解决网易云音乐个性推荐无法加载
之前删除了好几次都不成功,重新安装后之前的配置文件都还在,于是进行了下面的操作 find /home -name netease-cloud-music 发现了这个文件夹 /home/numb/.ca ...
React实现(Web端)网易云音乐项目(六)，错过了真的可惜呀
今天实现歌曲播放时,歌词随着滚动的效果网易云原本的歌词是这样的 [00:00.000] 作曲 : 许嵩 [00:01.000] 作词 : 许嵩 [00:22.240]天空好想下雨 [00:24.38 ...

Web实现：网易云音乐个人推荐页

Web实现：网易云音乐个人推荐页相关推荐

最新文章

热门文章