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

1.2 音乐盒子区域

1.2.1 音乐标题

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

效果:

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

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

给mbox设置背景图片:

效果:

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

效果:

加上音乐的标题:

css:

完成!

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WebDeveloper

那些经常使用的 CSS3属性

1042
来自专栏静晴轩

CSS实现水平|垂直居中漫谈

利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right mar...

3589
来自专栏编程之旅

iOS开发 ——全机型适配思路

最近一直在研究学习ReactiveCocoa,并且在给项目转型到MVVM模式打基础,所以博客也很久没有更新了。

1832
来自专栏HTML5学堂

HTML知识复习

HTML5学堂:本篇文章主要是从头到尾串一下HTML4.0的知识点。很多知识在网站各个文章中都已经讲解过了,在这里就不再重复书写了。学习时,知识点固然重要,但是...

3404
来自专栏HTML5学堂

IE6已逝,遗忘在角落的选择器,赶快用起来

那些被遗忘的选择器 在IE6~8“统治”网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍...

2869
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定...

4076
来自专栏前端新视界

两个 viewports 的故事-第二部分

原文:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素...

2027
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。

49210
来自专栏练小习的专栏

关于IE6下绝对定位元素莫名消失的问题

这是个很老的bug了,我想一般大家都遇到过,以前我是纯凭经验,让绝对定位的元素不挨着浮动元素就OK了,不过一直没去研究它形成的原因。今天做页面又遇到了这个可爱的...

18410
来自专栏超然的博客

弹窗细节

  浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动的,其实这些滚动都是没必要的,因为弹框的原意就是要聚焦用户的注意力。

953

扫码关注云+社区

领取腾讯云代金券