前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【H5 音乐播放实例】第二节 音乐详情页制作(2)1.2 音乐盒子区域

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

作者头像
剽悍一小兔
发布2018-06-13 10:48:37
6800
发布2018-06-13 10:48:37
举报

1.2 音乐盒子区域

1.2.1 音乐标题

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

效果:

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

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

给mbox设置背景图片:

效果:

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

效果:

加上音乐的标题:

css:

完成!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.06.12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.2 音乐盒子区域
    • 1.2.1 音乐标题
    相关产品与服务
    容器服务
    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档