【H5 音乐播放实例】第二节 音乐详情页制作(2)

简介: 【H5 音乐播放实例】第二节 音乐详情页制作(2)

#1.2 音乐盒子区域

##1.2.1 音乐标题

46.png


首先,在header的div下面画一个container容器div,宽度和header保持一致,都为950px,居中。

47.png

48.png

效果:

49.png

然后,在这个container中画一个div,作为我们的音乐盒子。高度设置为500px。

50.png51.png


给这个div加上一个背景图片:

52.png53.png


给mbox设置背景图片:

54.png


效果:

55.png


然后,我们还需要给这个div加上一个阴影层,会显得好看一些。

57.png58.png

效果:

59.png


加上音乐的标题:

60.png61.png

css:

62.png63.png

完成!


相关文章
|
2月前
|
前端开发 小程序 JavaScript
小程序海报,极简的实现方式
小程序海报,极简的实现方式
36 2
小程序海报,极简的实现方式
|
4月前
|
搜索推荐 前端开发 JavaScript
源码分享:HTML+CSS动画打造个性化登录页!
源码分享:HTML+CSS动画打造个性化登录页!
源码分享:HTML+CSS动画打造个性化登录页!
|
5月前
仿照微信朋友圈中点击图片出现大图浏览效果
仿照微信朋友圈中点击图片出现大图浏览效果
63 0
|
存储 人工智能 前端开发
前端合成海报并保存到本地
前端合成海报并保存到本地
86 0
|
C# 数据库
C#桌面文案小工具 ,详细带解说图(带源码)
C#桌面文案小工具 ,详细带解说图(带源码)
|
小程序 开发者
如何制作一个闪屏页面
闪屏(Splash)指的是当你打开一个应用时,首先映入眼帘的那个界面。通常闪屏页面都会比较简单,因为要一闪而过(这大概就是为什么叫做闪屏了),一般都会放置产品的 LOGO,在游戏中通常会放置游戏制作团队或者工作室的 LOGO。
208 0
|
移动开发 前端开发
【H5 音乐播放实例】第三节 音乐详情页制作(3)
【H5 音乐播放实例】第三节 音乐详情页制作(3)
|
移动开发 前端开发 JavaScript
【H5 音乐播放实例】第一节 音乐详情页制作(1)
【H5 音乐播放实例】第一节 音乐详情页制作(1)
131 0
|
移动开发
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
146 0
|
移动开发 前端开发
【H5 音乐播放实例】第五节 音轨制作
【H5 音乐播放实例】第五节 音轨制作
128 0