【Web应用开发】实验五：采用布局，创建个人主页

---

一、实验目的

1.了解布局的概念，掌握浮动技术、定位技术、display等与布局密切相关的技术、属性；
2.了解table+css布局、div+css布局以及HTML5布局；
3.熟悉掌握设置浮动实现1-2-1、3（n）列布局的基本方式；
4.掌握box-sizing:border-box技巧，实现设置height和width时设置整个盒子的大小，从而忽略内边距和盒子厚度问题；
5.掌握固定布局、流动布局和弹性布局的概念及其基本设置方法；
6.掌握流动布局中负边距的设置，实现元素的移动、垂直居中和多列布局；
7.了解HTML5中引入的用于定义网页结构的新元素。

二、实验内容

步骤流程

核心思想

• 通过设置div+css布局来分割网页部分，实现网页设计；
• 利用浮动技术、box-sizing:border-box等实现对盒子模型位置的移动控制；
• 用类选择器、元素选择器、id选择器实现对元素的样式设置。