HTML练习之路10

最新推荐文章于 2022-12-12 01:18:33 发布

沐曦可期

最新推荐文章于 2022-12-12 01:18:33 发布

阅读量913

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_62714412/article/details/122632623

版权

本次我们需要制作如图所示的音乐盒界面：

分析结构可知：整体由一个标题，一个段落文本和一张图片构成；

由边框可知，需要使用<div>标签，整体可用一个大的<div>包裹两个并列的小<div>：

<body>
	<div>
		
		<div>
			<h2>毕业季|再见青春</h2>
			<p>36557人收听</p>
		</div>
		
		<div>
			<img src="../../../Documents/muxishiye/music.jpg">
		</div>
		
	</div>
</body>

接下来，我们来编写我们的CSS源码，首先，我们使用链入式引用CSS代码，既然要引入CSS代码，就需要先新建CSS文件，CSS文件新建过程与html文件新建过程几乎一样，只是在如下界面将Html选项选择Css即可：

然后紧接着</title>标签下一行引入Css文件：

<link href="index_1_22_test02.css" rel="stylesheet" type="text/css">

接下来我们来到CSS文件，第一步，祖传艺能，初始化边距：

*{
	margin:0px;
	padding: 0px;
}

然后对整个<div>父标签设置样式(宽高，位置，字体，边框等属性)：

.room1{
	
	height: 290px;
	width: 200px;
	text-align: center;
	font-family: "微软雅黑";
	font-size: 16px;
	margin: 20px auto;	
	border: 1px solid  #787777;
}

然后对文本部分进行设置，首先设置标题向下的边框及外边距，然后设置段落文本的字体颜色，最后通过class对文本排布进行设置：

h2{
	border-bottom: 1px dashed #0E0203;
	padding-bottom: 10px;
}
p{color: #9C9B9B}

.room2{
	width: 200px;
	height: 40px;
	line-height: 40px;
}

最后，是我们的图片部分，主要是通过外边距调整图片位置：

.room3{
	width: 200px;
	height: 100px;	
	margin-top: 50px;
}

最后，我们的效果就是这样：

感觉比较单调，就给他添加了一个背景：

body{
	
	background:url( "../../../Documents/muxishiye/background.jpg");
}

效果图如下：

完整.html源码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐盒</title>
	<link href="index_1_22_test02.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="room1">
		
		<div class="room2">
			<h2>毕业季|再见青春</h2>
			<p>36557人收听</p>
		</div>
		
		<div class="room3">
			<img src="../../../Documents/muxishiye/music.jpg">
		</div>
		
	</div>
</body>
</html>

完整.css文件如下：

@charset "utf-8";
/* CSS Document */

*{
	margin:0px;
	padding: 0px;
}
body{
	
	background:url( "../../../Documents/muxishiye/background.jpg");
}


.room1{
	
	height: 290px;
	width: 200px;
	text-align: center;
	font-family: "微软雅黑";
	font-size: 16px;
	margin: 20px auto;	
	border: 1px solid  #787777;
}

h2{
	border-bottom: 1px dashed #0E0203;
	padding-bottom: 10px;
}
p{color: #9C9B9B}

.room2{
	width: 200px;
	height: 40px;
	line-height: 40px;
}
.room3{
	width: 200px;
	height: 100px;	
	margin-top: 50px;
}

如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。

（QQ群：937864538 欢迎入群~）