持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天
前言
当我们在学习一门技术的时候，理论往往比较枯燥，想要让自己的知识掌握的更加牢固，就需要我们多动手操作，敲一敲代码，才能发现自己的不足之处。端午节，就利用自己所学的知识做一个简单的网页吧~
用到的知识
每个盒子都是由以下部分组成内容区：content（内容区）、padding（内边距）、border（边框）、margin（外边距）
内容区的大小是由height和width两个辅助属性设置的
width和height只是设置盒子内容区的大小，而不是盒子的大小
盒子可见框大小的内容区，由内边距和内边框共同决定
CSS中所有的元素设置为一个矩形的盒子
将元素设置为矩形盒子后，对页面的布局就变成了将不同盒子摆放到不同位置
img标签的src属性的定义：标签的src属性是必需的。它的值是图像文件的URL，也就是引用该图像的文件的的绝对路径或相对路径
| form表单中的常用的type属性 | |
|---|---|
| text | 单行文本 |
| value | 定义文本框的默认值，也就是文本框的文字 |
| size | 定义文本框的长度，单位是一字符 |
| maxlength | 定义文本框最可以输入放入字符数 |
| radio | 单选按钮：name 和 value 是单选按钮中的必要的两个属性，必须要设置。并且同一组单选按钮中各个选项中的 name 属性值必须一样。 |
| checkbox | 多选框。单独使用可以表示两种状态之间的切换，写在标签中的内容为checkbox按钮的介绍 |
| button | 普通按钮 |
| value | 属性的取值就是显示在按钮上的文字 |
| submit | 提交按钮 |
| reset | 重置按钮，value 属性的取值就是显示在按钮上的文字，实现将表单内容提交给服务处理。 |
| file | 文件上传，当使用文件域file时，必须在form标签中指明编码方式。 |
| image | 图片域，拥有按钮的特点，也拥有图像的特点 |
| hidden | 隐藏字段 |
代码
<!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>
