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

来源:互联网 发布:mysql deadlock 解决 编辑:程序博客网 时间:2024/05/22 20:29
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之中不允许有<div>标签。
13)li前面的小图标请使用背景不重复来定位,因为背景有定位功能。
14)绝对定位的时候把要定位的DIV提到BODY后面,所有正文代码前面,然后再调整置入来定位,要注意有其他的办法的时候尽量不要采用绝对定位,绝对定位并不是完美的布局方法。页面内容是靠左边或者是右边的话使用绝对定位倒可以,如果是居中的话采用绝对定位就会出现分辨率大的时候的移位
15)无法定位的时候请尝试清除浮动。
16)产品排列的时候样式尽量采用CLASS,这样有利于复制。简单的图片列表可以使用LI,复杂的、内容很多很难排版的就使用DIV,我们的原则是:用最少的DIV来达到最好的效果。每个产品是一个单独的LI或者DIV封装,这样利于复制,每行又用一个大的DIV封装。
17)如果LI中有图标,又有下虚线的时候,不能使用LI定义两个背景,单独定义一个LI的背景也不显示,这样的解决的办法是在文字前后加<SPAN>标签,定义图标到<SPAN>中,虚线定义到LI中。这个时候如果也有日期的话,那么他们的浮动要注意了,文字带图标就左浮动,日期右浮动,按照常规排列代码。只有其中一个的时候就要反常规放置,在右边的,放到左边最前面。如果出现LI列表裂开,请尝试清除浮动和把显示设置为块。
18)页内的描点的使用:先插入描点,命名好。然后在需要链接的地址用#号加上命名的名字。例如:我命名的描点:header,那么在需要点击返回头部的地方做链接地址:#hearder

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

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