DIV排版精髓WEB标准排版总结

yrdesign

DIVWEB布局：
1）成块布局，尽量不要拆散一块一块的内容，用DIV保持整体，DIV外层非色彩延伸的，使用固定宽度1003，否则使用100%后，里面再包含1003固定宽度，布局的时候能成一直线的保持一直（垂直和水平尽量保持直线型）
2）要居中，使用最外层DIV左右边界自动；
3）界面图片用背景表示，按钮、标志用图片，每个图片加上ALT说明；
4）左右使用浮动，三栏使用两个左浮动，或右浮动加一个右或左浮动。
5）DIV垂直无法自动张开，使用清除浮动后，无法解决就使用办法一：1%高度，溢出使用自动或inherit，没有办法的时候使用隐藏 ；办法2：在撑开表格的最底层插入一个DIV，行高字大小都为0px，清除两者，显示为块。
6）!important;使用之来解决IE与FF兼容
7) 图片与DIV裂开的解决思路：1.把DIV和IMG的标签放成一行 2.删除无用的CSS样式 3.改变布局策略
8）图片在DIV中混排的时候，如果图片使用浮动之类的后，就没有办法自动撑开DIV的，这个时候可以把DIV高度调整为和图片一样的高。注意，调DIV高度的时候要合适，太小了在IE中可能显示很好，但是在FF中有可能显示只显示一半的。
9）定义全局样式和局部样式的方法。ID样式不允许重复使用，要在同一个页面中重复使用一个样式请使用CLASS定义
10）多个形状相似、列表式的内容使用LI  
11）UL 、Form、P等标签默认有边界和填充之类的，如果不要的话要定义为0即可。
12）新闻日期的排版请在LI中使用span标签，把日期放到其中，定义SPAN右浮动，然后再把SPAN代码提到新闻前面。注意li之中不允许有标签。
13）li前面的小图标请使用背景不重复来定位，因为背景有定位功能。
14）绝对定位的时候把要定位的DIV提到BODY后面，所有正文代码前面，然后再调整置入来定位，要注意有其他的办法的时候尽量不要采用绝对定位，绝对定位并不是完美的布局方法。页面内容是靠左边或者是右边的话使用绝对定位倒可以，如果是居中的话采用绝对定位就会出现分辨率大的时候的移位
15）无法定位的时候请尝试清除浮动。
16）产品排列的时候样式尽量采用CLASS，这样有利于复制。简单的图片列表可以使用LI，复杂的、内容很多很难排版的就使用DIV，我们的原则是：用最少的DIV来达到最好的效果。每个产品是一个单独的LI或者DIV封装，这样利于复制，每行又用一个大的DIV封装。
17）如果LI中有图标，又有下虚线的时候，不能使用LI定义两个背景，单独定义一个LI的背景也不显示，这样的解决的办法是在文字前后加标签，定义图标到中，虚线定义到LI中。这个时候如果也有日期的话，那么他们的浮动要注意了，文字带图标就左浮动，日期右浮动，按照常规排列代码。只有其中一个的时候就要反常规放置，在右边的，放到左边最前面。如果出现LI列表裂开，请尝试清除浮动和把显示设置为块。
18）页内的描点的使用：先插入描点，命名好。然后在需要链接的地址用#号加上命名的名字。例如：我命名的描点：header，那么在需要点击返回头部的地方做链接地址：#hearder

19）内页的布局主要是注意CSS的应用不能影响到首页，我们可以采用双CSS的方法，但是要注意不要每个页面都新建一个CSS样式啊，那样就很多样式表了，除非你的内页没有一点类同的地方。一般内页有类同的地方，就和其他内页那样共用一个样式，内页如果相同的话可以使用模板的。建议内页的样式加一个前缀，例如首页是main，简介就可以ab_main这样就不会覆盖了。做的时候先备份CSS样式表。放到垃圾桶中先。做到新闻的时候就可以考虑采用模板了。

20）页面中使用边界的时候，IE和FF解释的结果有可能不一样，有可能IE中边界很远，FF中边界很小，这个时候可以把边界改为同值填充就可以解决。

文字太多，发不上来，暂时就发这些基本的吧。对初学者来说，应该会有帮助。

yrdesign

。。。。。。。。。。。。。。。。。。。。。。眼镜。

lemss

学习了

ziyo

学习学习^_^

indj

IE6 7 8各标准不同 最难搞
其它CHROME OPERA FIREFOX差不多

foxconndmd

学习