"音乐盒"可以看做一个大盒子，用<div>标签进行定义。大盒子的上面为文本内容，可以在<div>标签中嵌套<h2>和<p>标签来实现；大盒子下面为图像，通过在<div>标签中嵌套<img/>标签来实现。
样式分析：
- 通过最外层的大盒子对音乐盒进行整体控制，需要对其设置宽度、高度、边框和文本居中等样式。
- 设置文本模块中"毕业季|再见青春"的样式，主要控制器文本大小、字体、高、行高、边框。
设置文本模块中"36557人收听"的样式，主要控制其文本大小、颜色、高和行高。
代码素材
参考代码：
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin: 0; /*清除浏览器默认边距*/
padding: 0;
text-align:center; /*文字居中*/
}
h2{
padding:5px; /*设置标题内边距*/
font-size: 20px; /*设置文字大小*/
margin:5px; /*设置标题外边距*/
border-bottom: 2px #999 dashed; /*设置标题底部边框宽度,颜色，虚线*/
}
.nei{
padding: 0px 15px 15px 15px; /*设置图片的上右下左的边距*/
}
.wai{
margin: 50px auto;/*设置上下外边距50px，左右居中显示*/
width: 210px; /*设置<div>盒子的宽度*/
height:265px; /*设置<div>盒子的高度*/
border:solid 2px #999; /*设置盒子的边框为单实线，线宽2px，颜色灰色*/
}
.one{
color: #999;
}
</style>
</head>
<body>
<div class="wai">
<span><h2>毕业季|再见青春</h2></span>
<span class="one">36557人收听</span>
<div class="nei">
<img src="img/music.jpg"/>
</div>
</div>
</body>
</html>