课程门户-章节详情

HTML5+CSS3 Web前端开发技术

于丽娜

1 内容简介
- 1.1 教材简介
- 1.2 课程简介
- 1.3 1+X标准
2 学习单元01 搭建项目开发环境
- 2.1 任务概述
- 2.2 知识结构（图）
- 2.3 知识链接
- 2.4 任务1：安装Chrome浏览器
- 2.5 任务2：安装HBuilderX开发IDE
- 2.6 任务3 :使用HBuilderX创建项目
- 2.7 单元小结
3 学习单元02 制作课程基础页面
- 3.1 任务概述
- 3.2 知识结构（图）
- 3.3 知识链接
- 3.4 任务1：制作页面通用尾部内容
- 3.5 任务2：制作页面通用头部内容
- 3.6 任务3：制作课程说明页面
- 3.7 单元小结
4 学习单元03 制作课程播放页面
- 4.1 任务概述
- 4.2 知识结构（图）
- 4.3 知识链接
- 4.4 任务1：制作课程视频列表
- 4.5 任务2：制作课程推荐列表
- 4.6 任务3：制作课程资源表格
- 4.7 任务4：制作课程播放区域
- 4.8 单元小结
5 学习单元04 使用表单制作页面
- 5.1 任务概述
- 5.2 知识结构（图）
- 5.3 知识链接
- 5.4 任务1：制作信息登记页面
- 5.5 任务2：制作用户登录页面
- 5.6 任务3：制作用户注册页面
- 5.7 单元小结
6 学习单元05 向项目中引入CSS
- 6.1 任务概述
- 6.2 知识结构（图）
- 6.3 知识链接
- 6.4 任务1：美化课程说明页面
- 6.5 任务2：美化课程播放页面
- 6.6 单元小结
7 学习单元06 使用CSS3美化页面
- 7.1 任务概述
- 7.2 知识结构（图）
- 7.3 知识链接
- 7.4 任务1：美化页面通用尾部
- 7.5 任务2：美化页面通用头部
- 7.6 任务3：美化课程资源表格
- 7.7 任务4：制作课程推荐部分
- 7.8 单元小结
8 学习单元07 使用盒子模型布局页面
- 8.1 任务概述
- 8.2 知识结构（图）
- 8.3 知识链接
- 8.4 任务1：制作课程视频列表
- 8.5 任务2：美化用户登录页面
- 8.6 任务3：美化用户注册页面
- 8.7 单元小结
9 学习单元08 使用CSS3浮动布局页面
- 9.1 任务概述
- 9.2 知识结构（图）
- 9.3 知识链接
- 9.4 任务1：使用浮动左右布局
- 9.5 任务2：使用浮动单行布局
- 9.6 任务3：使用浮动多行布局
- 9.7 单元小结
10 学习单元09 使用CSS3定位布局页面
- 10.1 任务概述
- 10.2 知识结构（图）
- 10.3 知识链接
- 10.4 任务1 :制作课程层叠角标
- 10.5 任务2 :绝对定位实现登陆页面居中
- 10.6 任务3 :固定定位置顶按钮
- 10.7 任务4：粘性定位页面通用头部
- 10.8 单元小结
11 学习单元10 利用CSS3动画美化页面
- 11.1 任务概述
- 11.2 知识结构（图）
- 11.3 知识链接
- 11.4 任务1：制作鼠标悬浮过渡效果
- 11.5 任务2：使用动画制作轮播图
- 11.6 单元小结
12 学习单元11 使用CSS3弹性盒子布局页面
- 12.1 任务概述
- 12.2 知识结构（图）
- 12.3 知识链接
- 12.4 任务1 :使用弹性盒子布局推荐页面
- 12.5 任务2 :使用弹性盒子布局课程页面
- 12.6 单元小结
13 学习单元12 使用CSS3媒体查询实现页面响应式
- 13.1 任务概述
- 13.2 知识结构（图）
- 13.3 知识链接
- 13.4 任务1：用户登录页面增加响应式
- 13.5 任务2：将课程推荐页面增加响应式
- 13.6 单元小结
14 封底
- 14.1 封底

单元小结

1 单元小结
2 知识延伸

单元小结

本单元主要讲述响应式布局、媒体查询相关原理及属性以及媒体查询的方式方法，并且完成了新云课堂项目页面移动端适配。

通过本单元的学习，读者应该掌握响应式布局原理，掌握媒体查询的方法。

图片预览