0
点赞
收藏
分享

微信扫一扫

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

大明宫 2022-10-31 阅读 133


#1.2 音乐盒子区域

##1.2.1 音乐标题

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


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

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


【H5 音乐播放实例】第二节 音乐详情页制作(2)_背景图片_03


效果:

【H5 音乐播放实例】第二节 音乐详情页制作(2)_背景图片_04


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

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


【H5 音乐播放实例】第二节 音乐详情页制作(2)_背景图片_06


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

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


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


给mbox设置背景图片:

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

效果:

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

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

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


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


效果:

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


加上音乐的标题:

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

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


css:

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


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

完成!


举报

相关推荐

0 条评论