DreamWeaver中块状标签div的使用方法

工具/原料

• 华为MateBook D
• Windows 10 10.3.3
• DreamWeaver2022

方法/步骤

1. 1

   打开DreamWeaver，新建html文件并生存。

   
2. 2

   在body中输入div标签，div为双标签

   
3. 3

   输入三组div标签，如图所示

   
4. 4

   在head中输入样式标签<style></style>,在样式标签中做div的润色

   
5. 5

   在style标签中输入 div{}     大括号内为对div的润色，需要div什么样的效果，就写出什么的代码润色

   
6. 6

   在样式中输入宽、高、配景，宽为:width;高：height;   配景为：background-color;如下图所示

   
7. 7

   当输入框架的宽高及配景颜色后，打开浏览器预览，就会看到三个方形。如图。

   
8. 8

   上图中国三个图形毗连在了一路，为了分清三个图形的边框，可以设置外边距margin，好比外边距为10px,

   
9. 9

   打开预览，下面就是添加了外边距后的效果图。

   END

注重事项

• 块状标签，主动换行。