打开dreamweaver，新建网页并保存为“die.html”，选择【插入】【布局对象】【div标签】命令，打开“div标签”对话框。
二、输入div标签名称
1、在“ID”列表框中选择“top”
2、单击“新建css规则”按钮准备进行css规则定义
三、新建css规则
在打开的对话框中保持默认设置，单击“确定”按钮进行css规则新建。
四、设置属性
1、在“分类”列表框中选择“方框”选项。
2、在窗口右侧进行css规则定义，其中margin值的设置非常重要，“left”及“right”为auto，则可让div页面水平居中。
3、单击“确定”按钮。
五、创建div按钮
返回“插入div标签”，单对话框，单击“确定”按钮，完成div标签的插入
六、查看创建的div
将鼠标光标定位在div，即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。
《CSS3DIV网页样式与布局从入门到精通》百度网盘pdf最新全集下载:
链接: https://pan.baidu.com/s/1aBFLBnJ22Bv9jGXyM5rCKA
?pwd=7vgd 提取码: 7vgd简介：全书分三大部分，共16章。第一部分主要介绍了CSS相关基础知识，包括CSS样式设计基础，使用CSS设置字体和文本样式、图片样式，控制背景图像，设计列表样式、表格样式、表单样式，定义链接样式，使用DIV+CSS布局网页，CSS定位与网页版式设计等；第二部分介绍了CSS新技术，包括使用CSS3布局网页和设计动画；第三部分为扩展应用部分，介绍了如何使用JavaScript控制 CSS样式、使用CSS设计XML文档样式、使用CSS设计移动页面等。
其实我也只是初学，下面是我的简单CSS布局，代码在下面
text.css文件代码
-------------------------------------------
@charset "utf-8"body,h1,h2,h3,h4,h5,h6,ul,li,dl,dd,dt,div,table,tr,td,span,em,b,p,form{margin:0padding:0text-align:center}
.kc{width:1024px}
.up1{height:28pxline-height:28pxbackground:#EFF7FE 0px 0pxfont-size:14pxtext-align:leftcolor:deeppinkpadding-left:10pxfont-weight:bold}
.a01{line-height:20pxmargin-top:2pxwidth:1024pxheight:50pxborder:1px solid #94c3f7float:left}
.a11{line-height:20pxmargin-top:2pxwidth:300pxheight:280pxborder:1px solid #94c3f7float:left}
.a12{line-height:20pxmargin-top:2pxwidth:420pxheight:280pxborder:1px solid #94c3f7float:leftmargin-left:2px}
.a13{line-height:20pxmargin-top:2pxwidth:300pxheight:280pxborder:1px solid #94c3f7float:rightmargin-left:2px}
.a21{line-height:20pxmargin-top:2pxwidth:722pxheight:280pxborder:1px solid #94c3f7float:left}
.a22{line-height:20pxmargin-top:2pxwidth:300pxheight:280pxborder:1px solid #94c3f7float:right}
.a31{line-height:20pxmargin-top:2pxwidth:459pxheight:280pxborder:1px solid #94c3f7float:left}
.a32{line-height:20pxmargin-top:2pxwidth:186pxheight:280pxborder:1px solid #94c3f7float:leftmargin-left:2px}
.a33{line-height:20pxmargin-top:2pxwidth:186pxheight:280pxborder:1px solid #94c3f7float:leftmargin-left:2px}
.a34{line-height:20pxmargin-top:2pxwidth:187pxheight:280pxborder:1px solid #94c3f7float:rightmargin-left:2px}
html文件代码
----------------------------------------------------------
<link rel="stylesheet" type="text/css" href="text.css" />
<div class="kc" >
<div class="a01">title</div>
<div class="a11">
<div class="up1">a11 :</div>
</div>
<div class="a12">
<div class="up1">a12 :</div>
</div>
<div class="a13">
<div class="up1">a13 :</div>
</div>
<div class="a21">
<div class="up1">a21 :</div>
</div>
<div class="a22">
<div class="up1">a22 :</div>
</div>
<div class="a31">
<div class="up1">a31 :</div>
</div>
<div class="a32">
<div class="up1">a32 :</div>
</div>
<div class="a33">
<div class="up1">a33 :</div>
</div>
<div class="a34">
<div class="up1">a34 :</div>
</div>
</div>
