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中边界很小,这个时候可以把边界改为同值填充就可以解决。 21) 1.文本框和文本不对齐时候先尝试设置input的vertical-align:middle属性来解决。不行,先尝试完垂直对齐中所有的对齐样式,还不行就去掉vertical-align:middle这些样式,改为边界填充,再不行就缩小文本框的高度为16PX左右。 2.调整文本框和图片按钮对齐:网上看到别人经常使用: align="absmiddle",但是这个样式是无法通过W3C的验证的,所以我们尽量不要采用,我们先尝试完垂直对齐中所有的对齐样式,不行的时候先调整文本框和图片按钮的边界,如果还不行,就用样式控制文本框和按钮到垂直顶部对齐,再用PS把图片按钮的高度缩小或者放大,并且,切割图片的时候上下不要切到太多的无用的边。 建议:尽量不要采用图片来做按钮,比较难控制。另外,为了美观,实在没有办法的时候可以采用DIV将文字与表单元素分离。文字的DIV的高度与最外的DIV一样的高,行高也是一样的高。表单元素很难用垂直的边界和填充来控制。 文本框的行高会影响文字输入的位置。行高与文本框一样的高,文本就垂直居中在文本框。 注意:包含住所有表单元素的大的DIV的行高也可能会影响到FF中的表单的内容的垂直排列 22)正文的文字内容和图片区域尽量不要采用DIV之类大标签了,尽量采用小型标签,比如:P、Span、h1、h2、ul、li等的,这样给人的感觉是排版有层次,标签大小有区分,结构清晰。 P差不多是最小的标签了,他里面不要包含h1、UL之类的了,但可以包含span 23)图文混排的一些好的经验:尽量不用DIV来排版图文。(图片列表中的图片和新闻列表不属于此范围) A.文字和一张图片的混排是很容易的,设置图片的左右浮动就可以达到图文的融合。 B.文字和多张图片排列的时候: 情况一:如图,这种情况呢,三张图片排列在左边,这三张图片我们可以用UL方法定义于浮动在左边,右边用一个大的P定义浮动在右边,这两个都要定义宽度,高度不用,图片的垂直距离定义一个IMG即可。这是一种解决办法,就是左边用一个P封装三个img,然后定义这个P浮动于左边。右边大的一块也采用一个P装住所有的东西,浮动在右边,P的宽度一样要定义,左边的三个图片通过定义P的小宽度来把图片换行伸展下来。推荐使用这种方法。右边的图片是直接放到文字当中,然后用BR换行即可。 情况二:这中情况和一张图片混排差不多,直接把图片拉到想要的位置设计浮动即可。对于几个像几个图片这样的有相似地方的元素,我们可以采用定义一个局部样式来一次性应用,这样代码比较少,应用方便,修改容易。 23)一个大的标签中包含的单行标签的定义样式的时候不要定义浮动,因为在它的左右没有东西和它浮动,有时候就因为没有必要的浮动而导致DIV裂开。 |
![](https://img2024.cnblogs.com/blog/35695/202408/35695-20240826070647288-243310440.jpg)