通过Dreamweaver建立一个简单的网页音乐盒模型效果/css/h5/

一、结构分析

由图我们可以看到音乐盒的效果右外边框盒子组成，盒子内部又分为两个部分，其中上面部分为标题，下面部分为图片。

二、样式

1.通过外层的大盒子对音乐盒的整体样式进行控制，设置最外层的宽度、高度、边框、文本等样式。
2.设置内部标题文本的样式。

三、准备实现

1、打开dreamweaver2021，新建立一个HTML5格式文档，将标题更改为音乐盒

2、使用HTML开始搭建整体的结构,搭建好结构后将对应的文本内容和图片引入到结构中

3、使用嵌入CSS的方式实现效果：

4、实现完成，完整代码如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>音乐盒</title>
<style>
	*{
		margin: 0;
		padding: 0;
		/*初始化总体的边距*/
	}
	.box1{/*通过最外层的标签统一设置
		内部嵌套的<div>标签的宽度、高度
		、文字居中样式以及最外层边框样式*/
		width: 220px;  
		height: 260px;
		border: 1px solid #BBB;
		text-align: center;
		margin: 50px auto;/*设置整体的网页居中效果，50px的四周边距*/
	}
	div .title{
		/*设置h2标题文本的具体样式以及<div>标签的下边线*/
		height: 40px;
		border-bottom: 1px #BBB dashed;
		line-height: 40px;
		color: #211C1C;
	}
	div p{
		height: 25px;/*设置div的高度*/
		line-height: 25px;/*设置段落文本的字间距*/
		color: #211C1C;
	}
</style>
</head>
<body>
<div class="box1">
		<div>
			<h2 class="title"> 毕业季|再见青春</h2>
			<p>36557人收听</p>
		</div>
		<div>
			<img src="music.jpg"  alt="music"/>
		</div>	
</div>
</body>
</html>