实训四：盒子模型练习三
实训目的：
⏹1.深刻理解盒子模型的的概念；
⏹2.掌握孤立盒子的内部结构；
⏹3.掌握理解多个盒子的相互关系。

实训内容：
一、制作如下要求的页面效果：页面由“box1\box2\box3\box4”四个盒子组成，123号盒子在一行，4号盒子在2号盒子的正下方，每个盒子的宽均为400px，高均为200px，5px边框黑色，盒子间距为10px；
二、实现以下图像，练习盒子模型：
要求：margin-top: 30px;margin-right: 50px;margin-bottom: 30px;margin-left: 50px；图片填充padding：20px；
三、图片排版，练习盒子模型；
要求：
1、与图示布局基本保持一致（个元素大小及定位数值可自由设定），模板显示区域居中显示实现“联动”效果；
2、控制字的大小和样式：超链接12px 正常为黑色无下划线鼠标经过时蓝色出现下划线；
3、一行排列三个li区域；
4、整体排版合理，布局协调有序；
四、图片排版，练习盒子模型；
五、利用盒子模型，实现如下图所示的页面效果：。