需要完成如下视图的音乐盒。
本次运用到了边框样式border,需要注意的是视图中的虚线是新建的div标签嵌套的一个border-bottom虚线样式。其余比较简单了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易的音乐盒制作</title>
<style>
.box1{
text-align: center;
width: 230px;
border-style: solid;
border-color:#9F9E9E;
padding: 10px;
}
.box2{
border-bottom: dashed;
border-bottom-color: #9F9E9E;
}
</style>
</head>
<body>
<div class="box1">
<h3 class="bt">毕业季丨再见青春</h3>
<div class="box2"></div>
<p><font color="#8E8E8E">36557人收听</font></p>
<img src="img/music.jpg">
</div>
</body>
</html>