养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Dreamweaver CC2018怎么写div自适应页面布局

时间:2024-11-06 07:15:44

DreamweaverCC2018怎么写div自适应页面布局?一般网页都是固定的宽度,所以不能自适应网页窗口大小。我们可以把宽度设置为百分比,这样就可以啦。只不过需要自己算好百分比的数值哦

Dreamweaver CC2018怎么写div自适应页面布局

工具/原料

DreamweaverCC2018

方法/步骤

1、打开DW并新建一个html网页

Dreamweaver CC2018怎么写div自适应页面布局

2、新建完成后会默认生成网页代码

Dreamweaver CC2018怎么写div自适应页面布局

3、在head中输入引入CSS的代码<styletype="text/css"></style>

Dreamweaver CC2018怎么写div自适应页面布局

4、在style中给背景添加一个背景色代码: body{background-color:#8A8A8A;}然后在body中添加一个div标签【<div></div>】.刷新网页后可以看到预览效果,背景变成了灰色

Dreamweaver CC2018怎么写div自适应页面布局

Dreamweaver CC2018怎么写div自适应页面布局

5、给div添加一个样式,命名为mian【<div咯悝滩镞class="mian"></div>】样式如下: .mian{ w足毂忍珩idth:100%; height:800px; background:#fff; margin:0auto; }刷新下可以看下效果,网页中间多了一个白色布局

Dreamweaver CC2018怎么写div自适应页面布局

Dreamweaver CC2018怎么写div自适应页面布局

6、在大div中再添加一个小div,定义样式宽度为25%,高度800px,左浮动。并添邹菁惨挣加一个单独的背景颜色样式color1:<divclass="c泠贾高框olor1"></div>样式: .list{ width:25%; height:800px; float:left; } .color1{ background:#DDDDDDDD; }刷新后可以看到写出了一块灰色div

Dreamweaver CC2018怎么写div自适应页面布局

Dreamweaver CC2018怎么写div自适应页面布局

7、把<divclass="color1"></div>再复制出3个,修改每一个的背景色样式,颜色区分开,有利于看清楚哦。刷新后可以看到4个25%的div整齐填满了大的DIV

Dreamweaver CC2018怎么写div自适应页面布局

Dreamweaver CC2018怎么写div自适应页面布局

8、我们用鼠标放大缩小网页框,可以看到里面的div会随着网页宽度改变而改变,这样就做出了我们要的效果啦

Dreamweaver CC2018怎么写div自适应页面布局

© 一点知识