在上面代码中，div的id为box相当于一个大盒子，id为box_01、box_02、box_03相当于一个小盒子，这些小盒子依次放入大盒子中。
id为box_01主要是放置标题;
id为box_02主要是放置图片;
id为box_02主要是放置表单;
id为res是用来检验年份和月份输入是否正确提示信息。
CSS3
#box{
width: 800px;
height: 430px;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
}
#box_01{
width: 800px;
height: 70px;
color: #0086B3;
}
img{
width: 400px;
height: 300px;
}
#box_02{
width: 800px;
height: 310px;
}
#box_03{
width: 800px;
height: 50px;
}
#res{
width: 800px;
height: 100px;
font-weight: bold;
text-align: center;
}
在上面代码中，#box表示大盒子的样式，宽度和高度分别为800、430px，使用弹性布局display: flex。
flex-direction属性表示控制主轴的方向，colum表示垂直方向。
justify-content属性表示项目在主轴上的对齐方式，center表示中间。
#box_01、#box_02、#box_03主要是设置div块的宽度和高度。
#res设置div块宽度、高度、字体加粗(font-weight)、文字对齐方式(text-align)。
JavaScript
1.首先是获取操作元素的对象
var f=document.getElementById('form')
var res=document.getElementById('res')
var ipc=document.getElementsByTagName('input')
在上面代码中，使用document.getElementById()方法获取操作元素对象的id，document.getElementsByTagName()方法是返回带有标签名的对象集合。
2.检验年份函数chooseYear()
function chooseYear(y){
if(!y.value.match(/^\d{4}$/)){
y.style.borderColor='yellow';
res.innerHTML='您的输入有误，年份需要4位数字';
return false;
}
alert('年份格式输入正确')
return true;
}
在上面代码中，chooseYear(y)函数中的y参数表示年份元素的一个对象，通过获取y的value值，然后使用match()方法进行正则匹配。
如果年份不是四位数，通过设置文本框的边框颜色为黄色，获取id为res，插入提示信息的内容。
如果年份是四位数，则使用alert()方法，弹出一个弹框显示“年份格式输入正确”。
3.检验月份函数chooseMonth()
function chooseMonth(m){
if(!m.value.match(/^((0?[1-9])|(1[012]))$/)){
m.style.borderColor='yellow';
res.innerHTML='您的输入有误，月份1~12范围内'
return false;
}
alert('月份格式输入正确')
return true;
}
在上面代码中，chooseMonth(m)函数中的m参数表示月份元素的一个对象，通过获取m的value值，然后使用match()方法进行正则匹配。
”(0?[1-9])“表示前面有0或没有0的表示第一月份到第九月份;
“(1[012])”表示第十月份到十二月份。
