“音乐盒”可以看做一个大盒子，用<div>标签进行定义。大盒子的上面为文本内容，可以在<div>标签中嵌套<h2>和<p>标签来实现；大盒子下面为图像，通过在<div>标签中嵌套<img/>标签来实现。
样式分析：
- 通过最外层的大盒子对音乐盒进行整体控制，需要对其设置宽度、高度、边框和文本居中等样式。
- 设置文本模块中“毕业季|再见青春”的样式，主要控制器文本大小、字体、高、行高、边框。
设置文本模块中“36557人收听”的样式，主要控制其文本大小、颜色、高和行高。
参考代码：
<!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>
![[Python人工智能] 四十五.命名实体识别 (6)利用keras构建CNN-BiLSTM-ATT-CRF实体识别模型（注意力问题探讨）](https://img-blog.csdnimg.cn/bf1659094a5b4541a19a93c14fafa5d1.png#pic_center)
