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

1.2 音乐盒子区域

1.2.1 音乐标题

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

效果:

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

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

给mbox设置背景图片:

效果:

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

效果:

加上音乐的标题:

css:

完成!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

jquery mobile 移动web(2)

button 按钮   data-role="button" 将超链接变成button。   具有icon 图标的button 组件...

1865
来自专栏闻道于事

JavaScript事件(二)

例题顺序: 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html...

2436
来自专栏岑志军的专栏

HTML标签分类

2059
来自专栏一“技”之长

标签之美四——为网页添加绚丽多彩的图像 原

这里图片路径的写法和本地超链接的写法是一样的,可以参考上一篇博客中关于本地路径的地方:http://my.oschina.net/u/2340880/blog/...

843
来自专栏自动化测试实战

HTML第三课——css【3】

25212
来自专栏林德熙的博客

win10 uwp 获得元素绝对坐标

有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用。 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标。

562
来自专栏软件开发

CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

一、盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外...

21410
来自专栏林德熙的博客

win10 uwp 圆角按钮

本文讲的是如何做圆角按钮,我们在UWP本来的按钮都是矩形,圆角Radius没有,所以本文就用简单方法去做圆角按钮。

571
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

3838
来自专栏一“技”之长

Bootstrap响应式前端框架笔记二——排版标签与类

    Bootstrap中对h标签的字体和字号进行了微调,开发者除了可以直接使用这些标签进行标题的修饰外,还可以使用.h1到.h6类来将其他元素的字体进行修饰...

732

扫码关注云+社区