音乐盒
- <div>标签 分割为独立的部分 实现页面的规划和布局
- 盒子模型有 内容,宽高(width height:),内边距(margin),边框(border),外边框(padding)组成
- 边框样式
Solid单实线
Dashed虚线
Dotted点线
Double双实线
实例
程序代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐盒</title>
<style>
*{margin:0px;padding: 0px}
.all{
width: 220px;
height: 260px;
padding: 5px;
text-align: center;
border:#B9B0B0 solid ;
margin:50px auto ;
}
h2{
height: 50px;
line-height: 50px;
border-bottom:#B9B0B0 dotted;
}
p{
color:#DBD4D4;
}
</style>
</head>
<body>
<div class="all">
<div>
<h2>毕业季|再见青春</h2>
<p>36557人收听</p>
</div>
<div>
<img src="music.jpg"/>
</div>
</div>
</body>
</html>