神刀安全网

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

1.2 音乐盒子区域

1.2.1 音乐标题

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

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

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

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

效果:

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

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

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

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

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

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

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

给mbox设置背景图片:

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

效果:

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

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

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

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

效果:

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

加上音乐的标题:

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

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

css:

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

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

完成!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 【H5 音乐播放实例】第二节 音乐详情页制作(2)

分享到:更多 ()