DIV+CSS检测技巧和应用

DIV+CSS检测技巧
1、检查HTML元素是否有拼写错误、是否忘记结束标记
经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2、检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。

3、确定错误发生的位置
假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4、利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

5、float元素的父元素不能指定clear属性
MacIE下假如对float的元素的父元素使用clear属性，四周的float元素布局就会混乱。这是MacIE的闻名的bug，倘若不知道就会走弯路

6、float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。

7、float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定非凡的值。

8、float元素的宽度之和要小于100%
假如float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

9、是否重设了默认的样式?
某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10、是否忘记了写DTD?
假如无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：< !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>

DIV+CSS的应用
网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。

根据DEMO规划一下页面的布局，仔细分析，一般大致分为以下几个部分：
　　1、顶部部分：一般为抬头图片、MENU（菜单）等；　
　　2、内容部分：又可分为左侧边栏、主体内容，右侧边栏等；　
　　3、底部：包括一些版权信息。

页面DIV的划分

建站的准备工作
1、建立文件夹：整站的文件夹，站内的样式表css，JS等文件夹，images文件夹可以在导出切片时自动建立。
2、切割图片和导出
　 切图一定要注意边线要细致。一般边框是规则的线条，可以不必切下来，以后用样式做。存储图片时要注意格式。切完存储的网页一般不用来制作。网页完成后需删掉一些不要的图片。图片文件大小一般保持在 5k 以内；大尺寸的banner文件大小保持在15k以内。
3、建立一些必要的文件如css.css，menu.js