dw实现html实时更新,DW在HTML5 响应式代码实现完成

心已赠人 2022-10-06 10:51 208阅读 0赞

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

![ba5f7640fa00d82f2117f53bcef86553.png][]

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

![8ab121d1a2fb75dadfd63fe075dcca32.png][]

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

![d54bdb6a4df0ce47155f9f1644928a37.png][]

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

![70c536877603270b3ced932644dbc207.png][]

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

![4196b5788d96ac23f9b46c136aebbc0c.png][]

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

![855bf1ad8e69e915df2ae85eafae6c06.png][]

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

![52c905ffea488f815f6281b0f3e04fac.png][]

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

![d77a99038b6741c24430c244397f74e2.png][]

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

![feb26723c2645d5019b718c4f68da04e.png][]

[ba5f7640fa00d82f2117f53bcef86553.png]: /images/20221005/4490bfe859004821b048787eccc06b2e.png
[8ab121d1a2fb75dadfd63fe075dcca32.png]: /images/20221005/c0b4fdf16e504b52a9585832d4d0562a.png
[d54bdb6a4df0ce47155f9f1644928a37.png]: /images/20221005/a1e1d103570d40e581d0af65aabf29ff.png
[70c536877603270b3ced932644dbc207.png]: /images/20221005/21403298547c452da3f84fdd1861f888.png
[4196b5788d96ac23f9b46c136aebbc0c.png]: /images/20221005/f7ec116d27b64c49a81b95430a12a417.png
[855bf1ad8e69e915df2ae85eafae6c06.png]: /images/20221005/be09d98558b842b082bdff5eab986f2e.png
[52c905ffea488f815f6281b0f3e04fac.png]: /images/20221005/0fe6900d7cd24bd58d9974bb684c9b87.png
[d77a99038b6741c24430c244397f74e2.png]: /images/20221005/9e39fe12861f4b9aa55c8fb6421ffc60.png
[feb26723c2645d5019b718c4f68da04e.png]: /images/20221005/49f547fe18854b658fe14e02c52be9df.png