项目1 弹性盒布局
任务1.1 认识nex弹性盒布局
1.1.1 为什么使用弹性布局
1.1.2 初识flex弹性布局
任务1.2 使用弹性盒容器的属性整体控制子元素
1.2.1 flex-direction设置主轴及其方向
1.2.2 flex-wrap设置换行方式
1.2.3 flex-flow设置主轴方向和换行方式
1.2.4 justify-content设置主轴元素的排列方式
1.2.5 align-items设置侧轴(交叉轴)元素的排列方式
1.2.6 align-content多行元素在侧轴(交叉轴)的排列方式
任务1.3 使用弹性子元素的属性控制个别子元素
1.3.1 align-self设置子元素在侧轴(交叉轴)的对齐方式
1.3.2 flex-grow设置子元素主轴放大比例
1.3.3 flex-shrink设置子元素主轴缩小比例
1.3.4 flex-basis设置子元素主轴的基准尺寸
1.3.5 flex综合属性设置子元素空间分配
1.3.6 order设置子元素的顺序
项目评价表
项目小结
项目2 响应式页面设计
任务2.1 初识响应式设计和媒体查询
2.1.1 响应式设计
2.1.2 媒体类型
2.1.3 媒体查询
2.1.4 媒体特性
2.1.5 引入方式
任务2.2 利用媒体查询实现响应式
任务2.3 应用弹性盒与响应式设计页面
项目评价表
项目小结
项目3 Bootstrap布局
任务3.1 初识Bootstrap
3.1.1 下载、使用Bootstrap
3.1.2 个Bootstrap示例
3.1.3 认识视口
任务3.2 使用容器
任务3.3 使用栅格系统进行页面布局
3.3.1 引入栅格系统
3.3.2 栅格参数
3.3.3 列的自动布局
3.3.4 多种屏幕情况栅格的使用
3.3.5 栅格的对齐、排列与偏移
3.3.6 列嵌套
项目评价表
项目小结
项目4 Bootstrap内容
任务4.1 应用Bootstrap排版
4.1.1 全局设置
4.1.2 标题