【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

完成!


相关文章
|
5月前
|
C# 数据库
C#桌面文案小工具 ,详细带解说图(带源码)
C#桌面文案小工具 ,详细带解说图(带源码)
|
9月前
|
自然语言处理 Python Windows
|
10月前
|
自然语言处理 Python
|
12月前
|
缓存 开发工具 图形学
游戏开发实战教程(14):关卡编辑器的制作以及关卡分享功能的实现
上周在制作完闯关模式后,我有了在游戏中做一个关卡编辑器的想法,让玩家可以在游戏中制作自己的关卡进行挑战,甚至可以将自己制作的关卡与朋友进行分享。 原有的关卡编辑器是使用Unity做的,因为可以方便的进行文件的读取和写入,可以将设计好的关卡数据写入到文件中,然后在将文件中的数据导入到微信小游戏开发工具中。
250 0
|
算法 小程序 开发者
泡泡龙游戏的完整制作流程和模版
嗨!大家好,我是小蚂蚁。在经过了两个多周的折腾,泡泡龙游戏系列教程总算是告一段落了,今天的这篇文章主要梳理一下泡泡龙游戏的整个制作流程。 在看了整个制作流程之后,你多少都会对泡泡龙游戏的整体有一个比较全面的认识和了解。
88 0
|
移动开发 前端开发
【H5 音乐播放实例】第三节 音乐详情页制作(3)
【H5 音乐播放实例】第三节 音乐详情页制作(3)
|
移动开发 前端开发 JavaScript
【H5 音乐播放实例】第一节 音乐详情页制作(1)
【H5 音乐播放实例】第一节 音乐详情页制作(1)
|
移动开发
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
111 0
|
移动开发 前端开发
【H5 音乐播放实例】第五节 音轨制作
【H5 音乐播放实例】第五节 音轨制作
104 0
|
移动开发 前端开发
【H5 音乐播放实例】第六节 其他
【H5 音乐播放实例】第六节 其他