dw html 菜单浮动,DW和float在设计中的浮动使用

1.打开ps，新建一个【html.5】，首先把基本结构搭建出来，并命名【box】，【

】,开始结束，具体如图所示。

2.复制【box】，.在上面，【.box】，在{}里给出宽度【330px】，高度【330px】颜色【#dedede】，具体如图所示。

3.这个关系是，白色盒子里面有三个小盒子，所以在这个里面，给它加三个小盒子，【

4.三个小盒子都给一个属性，将abc进行复制，放在上面，.在上面，给出宽度【100px】，高度【100px】，颜色【#333】，之后加入【浮动】，具体如图所示。

5.通过模型理解浮动，正常情况下，三个盒子是独立成行的，具体如图所示。

6.一旦变成浮动呢，它浮起来之后，也就是高度，它会成为横向，横向起来，独立成行，具体如图所示。

7.添加文字【DIV1】，在【

DIV1

】添加,并进行复制修改，在abc里面进行给一个统一的高度【100px】，【居中】，以及文字颜色【#fff】，具体如图所示。

8.三个盒子之间留有空隙，在【abc】中添加盒子边距【3px】，保存，具体如图所示。

9.制作第二个右浮动，只需要改一个【float】，将【left】改为【right】，保存，具体如图所示。

10.制作第三个浮动，.在上面，【.box1】，因为后写会把先写覆盖掉，将上方【浮动】删掉，在{}里添加【左浮动】，之后【.box2】，在{}里添加【左浮动】，由于【box3】没有添加浮动，会跳至【box1】下方，所以我们添加【.box3】，在{}里添加【清除浮动】，保存，具体如图所示。

11.制作第四个浮动，将【.box2】左浮动改为右浮动，保存，具体如图所示。

12.制作第五个浮动，将制作的第一个浮动打开，删除【float：left；】，增加【.abc】在{}里添加【左浮动】，增加【.box2】，在{}里添加上下左右边距【0 12px 0】，保存，具体如图所示。