一、实验目的
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选择器实现对元素的样式设置。
具体代码展示
①CSS部分:
- 设置container的背景、宽度和边距等