1.根据右侧提供素材，按老师的案例讲解，学习响应式实现多屏幕自适应的代码写法，同学们有各代码编写问题，可以截取代码内容截图到评论区。

2.打开软件DW，增加【footer】区，输入高【120像素】和颜色，具体如图所示。

3.创建盒子，添加【清除浮动】，写入【footer】区字体行间距，字体大小和颜色，具体如图所示。

4.粘贴相应式代码到DW中，点击预览观察效果，具体如图所示。

5.添加图片自适应，在article写下图片宽度【100%】，点击预览观察效果，具体如图所示。

6.控制【搜索栏】在缩小的情况下向上移动【50像素】，上移自后的宽度为【120像素】，具体如图所示。

7.修改【文字内容】在缩小的情况下向下移动【270像素】，具体如图所示。

8.完成响应式代码制作，最终效果如图所示。

9.根据右侧提供素材，按老师的案例讲解，学习响应式实现多屏幕自适应的代码写法，同学们有各代码编写问题，可以截取代码内容截图到评论区。