dr制作div css
使用DR（Dreamweaver）制作DIV+CSS布局
在Dreamweaver中创建DIV+CSS布局需要结合可视化操作和代码编辑功能。以下是具体方法：
新建HTML文件
打开Dreamweaver后选择"文件"→"新建"，创建HTML5文档。在默认生成的代码中，<body>标签内是主要操作区域。
插入DIV容器
通过菜单栏"插入"→"Div"或直接点击插入面板中的"DIV"按钮。在弹出的对话框中可设置ID或Class名称，例如输入ID为container。
CSS样式定义
在CSS设计器中（窗口→CSS设计器）为DIV添加样式：
- 选择器类型：ID选择器（
#container）或类选择器（.box） - 布局属性：
width: 960px; margin: 0 auto; - 背景属性：
background-color: #f5f5f5; - 盒模型：
padding: 20px; border: 1px solid #ddd;
多列布局实现
创建多个DIV并设置浮动：
.column {
float: left;
width: 30%;
margin-right: 5%;
}
.last {
margin-right: 0;
}HTML结构：
<div class="column">左侧内容</div>
<div class="column">中间内容</div>
<div class="column last">右侧内容</div>清除浮动
在浮动元素父级DIV添加清除样式：
.clearfix:after {
content: "";
display: table;
clear: both;
}响应式设计
通过媒体查询添加自适应效果：
@media (max-width: 768px) {
.column {
width: 100%;
float: none;
}
}关键技巧
可视化辅助
使用Dreamweaver的实时视图功能（"查看"→"实时视图"）可即时查看CSS修改效果。结合多屏幕预览工具（"窗口"→"多屏幕预览"）检查响应式布局。
代码提示
在代码视图中输入CSS属性时会自动弹出提示列表，按Tab键可快速补全属性名。颜色值输入时会显示取色器面板。
外部样式表
创建独立CSS文件（文件→新建→CSS）并通过链接引入：
<link href="styles.css" rel="stylesheet" type="text/css">布局调试
临时添加边框帮助定位元素：
.debug {
border: 1px dashed red;
}常见问题解决
DIV错位问题
检查浮动元素的宽度总和是否超过容器宽度，确保包含box-sizing: border-box计算方式：
* {
box-sizing: border-box;
}垂直居中实现
使用Flexbox布局快速实现：
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}浏览器兼容性
针对旧版IE添加特殊样式：
.ie-fix {
display: inline-block;
zoom: 1;
*display: inline;
}通过Dreamweaver的代码提示和可视化工具组合使用，可以高效完成符合标准的DIV+CSS页面制作。建议同时参考W3C验证工具检查代码规范性。
