2.结构清晰，容易被搜索引擎搜索到，天生优化了seo
3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。
5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
6.提高易用性。使用CSS可以结构化HTML，例如：
标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。
7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
8.更好的控制页面布局。不用多说。
9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。
12.另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。
14.在几乎所有的浏览器上都可以使用。
15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
16.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
17.你可以轻松地控制页面的布局 。
18.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
一、选择“div标签”命令打开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，即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。
1在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。
2
做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上<link href="main.css" type="text/css" rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。
4
下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1"></div>
<div id="top2"></div>
<div id="top3"></div>
</div>
</body>
</html>
5
布局好后我们需要去定义属性了，这里我只是简单的定义了一下
*{background:#FF33FF}
#top{background:#FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}
#top1{background:#66FFFFheight:50pxwidth:800px}
#top2{background:#FF00CCheight:400pxwidth:800px}
#top3{background:#FF9933height:550pxwidth:800px}
定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。
6
其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=baidu这个只是随便写的，你爱等于什么就等于什么
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1">这里都是我截图的照片</div>
<div id="top2">
<div class="baidu"></div>
<div class="baidu"></div>
</div>
<div id="top3">
<div class="baidujingyan"></div>
<div class="baidujingyan"></div>
</div>
</div>
</body>
</html>
7
下面我们再去定义他的属性，当然我只是简单的定义一下
*{background:#FF33FF}
#top{background:#FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}
#top1{background:#66FFFFheight:50pxwidth:800pxtext-align:centerline-height:50pxfont-size:30px}
#top2{background:#FF00CCheight:400pxwidth:800px}
#top3{background:#FF9933height:550pxwidth:800px}
.baidu{background:#FF6666height:380pxwidth:380pxfloat:leftmargin:10px}
.baidujingyan{background:#FFCC00height:530pxwidth:380pxfloat:leftmargin:10px}
8
因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1">这里都是我老婆的照片</div>
<div id="top2">
<div class="baidu"><img src="QQ图片20141212090452.jpg"></div>
<div class="baidu"><img src="QQ图片20141212090346.jpg"></div>
</div>
<div id="top3">
<div class="baidujingyan"><img src="QQ图片20141212090224.jpg"></div>
<div class="baidujingyan"><img src="QQ图片20141212090255.jpg"></div>
</div>
</div>
</body>
</html>
如果图片不在同一层目录，就需要连接到图片地址
9
这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。
10
下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的
