任务3.1移动端页面常用布局。

知识目标：

1. 了解什么是流式布局。

2. 掌握媒体查询的使用方法掌握 SVG 矢量图的使用方法。

能力目标：

3. 能使用流式布局创建页面。

4. 能使用媒体查询设置不同视口的页面效果。

思政目标：

5. 弘扬中华优秀传统文化。

6. 坚定学生文化自信。

7. 培养学生知行合一。

8. 培养学生注重积累。

重点：

1. 移动端页面常用布局。

2. 什么是流式布局。

3. CSS3 媒体查询的概念与设置。

难点：

1. 流式布局的换算。

2. 媒体查询视口设置。

融入知识点：

1. 移动端页面常用布局方法。

2. 自主完成流式布局。

3. 响应式布局容器。

引导法、融入法、案例法。