布局综合运用
Layout
实验题目
布局设计
实验目的
了解响应式开发的意义
熟悉 flex 容器和子项的特点
掌握 flex 的常见布局
熟悉 grid 容器和子项的特点
掌握 grid 的常见布局
实验内容
在个人网站的基础上开发并完善，实现以下布局
基本布局：两列布局、三列布局（圣杯布局、双飞燕布局）、栈布局（煎饼布局）
时间轴：左右依次交叉分布
九宫格：等间隔三行三列分布
异构布局：实现不规则区域展示内容
全站布局*：应包括但不少于：顶部搜索、轮播图、主导航、侧边栏、主体区和底部区；要求使用区域划分和跨行跨列两种方法实现
参考效果和参考代码
时间轴
九宫格布局
异构布局
全站布局
拓展与思考
容器的作用和意义？
使用 float 实现时间轴
使用 flex 实现九宫格
使用 float 实现异构布局