|
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裂开。 |