美文网首页程序员H5 音乐播放页面案例H5学习笔记
【H5 音乐播放实例】第二节 音乐详情页制作(2)

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

作者: 剽悍一小兔 | 来源:发表于2018-06-12 15:05 被阅读137次

    1.2 音乐盒子区域

    1.2.1 音乐标题


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




    效果:



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


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


    给mbox设置背景图片:


    效果:


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




    效果:



    加上音乐的标题:

    css:



    完成!

    相关文章

      网友评论

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

      本文链接:https://www.haomeiwen.com/subject/fzaleftx.html