Dreamweaver浮动标签float的简单用法

2025-06-17 19:45:27

1、打开Dreamweaver,新建html文件

Dreamweaver浮动标签float的简单用法

2、在html文件中,在body中建立<div> <h1>h1</h1> <h2>h2</h2></div>

Dreamweaver浮动标签float的简单用法
Dreamweaver浮动标签float的简单用法

3、对h1和h2稍加修饰以便观察,在style标签下输入皱诣愚继样式:h1{margin:10px;padding:10px;background-color:green;color:wh足毂忍珩ite;} h2{margin:10px;padding:10px;background-color:red;color:white;}

Dreamweaver浮动标签float的简单用法
Dreamweaver浮动标签float的简单用法

4、当对h1和h2添加向左浮动时:h1,h2{float:left;};h1和h2全部显示在一行内,同时方向从左到右,

Dreamweaver浮动标签float的简单用法
Dreamweaver浮动标签float的简单用法

5、如果全部添加向右的浮动时:float:right;从右向左依次为h1、h2

Dreamweaver浮动标签float的简单用法
Dreamweaver浮动标签float的简单用法

6、还可以对最外面的大盒子div限制宽高,调整位置,而内部的h1和h2标签不会受影响。

Dreamweaver浮动标签float的简单用法
Dreamweaver浮动标签float的简单用法
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢