利用html和css制作一个简单的网页（端午快乐）-CFANZ编程社区

每逢佳节，倍思奇妙游；今日端午，记录学习，遨游代码~

前言

当我们在学习一门技术的时候，理论往往比较枯燥，想要让自己的知识掌握的更加牢固，就需要我们多动手操作，敲一敲代码，才能发现自己的不足之处。今日端午，就利用自己所学的知识做一个简单的网页吧~

用到的知识

>img标签的src属性的定义：标签的src属性是必需的。它的值是图像文件的URL，也就是引用该图像的文件的的绝对路径或相对路径

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>端午节快乐</title>
		<style type="text/css">
		.box1,.box2{
			width: 500px;
			height: 500px;
		}
		.box1{
			font-size: 50px;
			color: floralwhite;
			width: 1000px;
			margin-left: 150px;
			padding: 80px;
			padding-top:20px;
			margin-top: 30px;
			margin-bottom: 50px;
			border: white 5px solid;
			text-align: center;
			margin-top: 60px;
		}
		.box2{
			font-size: 25px;
			color: floralwhite;
			width:1200px ;
			margin-left: 110px;
			padding-left:36px;
			padding-right:26px;
			padding-top:30px;
			margin-top: 50px;
			border: 5px white solid;
			text-align: center;
		}
		 .img-cs{
		            width:1%;
		            height:2%;
		            float:left;
		            margin-left:2px;
		        }
		body{
			background-image: url(./端午快乐.png);
		}
		</style>
	</head>
	<body>
		<div class="box1"style="line-height: 2;letter-spacing: 5px;font-weight: 70px;font-size: 50px;font-style: normal;">
			<a href="https://mp.weixin.qq.com/s/CtUyQ3NTnOcVIEnQakl0dQ">端午快乐</a><br/>
			<a href="https://mp.weixin.qq.com/s/CtUyQ3NTnOcVIEnQakl0dQ">the Dragon Boat Festival</a><br/>
			<img src="../audio/端午节一.jpg" class="img-src">
			<img src="../audio/端午节二.jpg" class="img-src">
			<img src="../audio/端午节三.jpg" class="img-src">
		</div>
		<div class="box2">
			<form>
				用户名<input type="text" name="myname" id="1"/><br/>
				<br/>
				密码<input type="password" name="mypassword" id="2"/><br/>
				<br/>
				请选择您要上传的作品
				<input type="file" name="myfile" value="作品文件"/>
				<input type="submit" />
				<input type="reset" />
			</form>
			<img src="../audio/端午节四.jpg" class="img-src">
			<img src="../audio/端午节五.jpg" class="img-src">
			<img src="../audio/端午节六.jpg" class="img-src">
		</div>
	</body>
</html>