一   分析效果图时：

1、考虑细节上是否和站内风格统一

2、设计的元素是否便于实现，元素是否能复用

如有问题及时与产品人员进行沟通，避免开发过程中的频繁修改，避免影响工期和代码的质量，以便得到有更好的布局和精简CSS代码    

二   将效果图转化成Html页面时：

1、考虑布局是否合理，结构是否简洁。减少结构中的嵌套，不要为实现某种样式添加多余的空标签。

2、标签尽量语义化，让代码更清晰，尽量向 HTML 5 兼容。

3、 样式与结构分离，利于维护，避免页面臃肿。

4、 jsp页面中的注释：  <%!–jsp注释,不会输出,推荐使用–%>     

5、 网页中图片引用由两种（1） cssp_w_picpath引用   （2）纯p_w_picpath页面引用   

图片有几点需要注意： 

（1） 将背景图合成一张图片将颜色相近的图标放在一起  

（2）页面中直接引用的图片尽量少的缩放，这非常影响页面的渲染速度  

（3）尽量少的使用前端技术控制图像显示大小

（4）在知道图片宽高的情况下使用 <img>中的宽高，减少页面reflow造成的速度损耗

（5）静态页面一定要小，建议存成png8格式  

（6）我们在使用背景图做图标的时候通常会在页面加一个钩子——img标签，img标签中的src中一定要写上存在的图片链接，人人网通常使用的是一像素的图片代替。如果你忽略了这个地址，页面上会有一个404的请求，在ie6下直接显示一个叉。 

（7）如果你的工程已经上线，站内对静态文件会有一个缓存机制。在开发过程中，经常会遇到修改图片的情况，如果你修改后的图片不更改文件名或是在样式中更改引用该图片的版本号，对于用户而言，他们仍然看不到修改后的图片。所以，一定要记得修改文件名。

（8）避免过小的背景图平铺。 

（9）尽量将图片上的文字提取出来用代码实现，便于图片的复用和日后文案的修改； 

 6 CSS的中的注意事项：

（1）class命名建议以功能而不是外观命名，不建议使用大小，避免起容易冲突的名字，防止样式被覆盖。

（2）CSS后代选择器性能：.a{} > .b .a{}，查找匹配耗费cpu,代码复杂，优先级高，修改不方便。

（3）编码时尽可能使用缩写，如padding：top right bottom left; border-width:1px 0; border-color:#CEE1EE;color:#F05;

（4）使用CSS display:none隐藏的元素不会被搜索网站检索，会影响到网站的SEO，可以使用text-indent:-9999em;来达到同样效果。

（5）减少overflow清除浮动的使用，避免使用无意义的空标签清除浮动，通常站内使用clearfix来清除浮动。

（6）border:none;替换border:0;的写法；

（7）使用css3的属性来代替阴影或是圆角的图片；（浏览器兼容是个问题）浏览器的兼容问题是页面开发的永衡话题。结构的合理和简洁在很大程度上可以减少兼容性的bug,但是ie的特立独行又不可避免有一些兼容性问题。  

7 IE6、IE7、Firefox之间的兼容写法：

写法一：

    IE都能识别*;        标准浏览器(如FF)不能识别*；

同一类class下的CSS hack可写为：

.classname{

background-color:#333;/*三者皆可*/

*background-color:#666; /*IE*/

_background-color:#999; /*仅IE6及IE6以下*/

}

一般三者的书写顺序为：FF、IE7、IE6.

写法二：

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

.classname{background-color:#333;}

*html .classname{background-color:#666;}/*仅IE6*/

*+html .classname{background-color:#555;}/*仅IE7*/

常见的css bug这里就不说了

对于样式和图片的引用a.xnimg.cn /s.xnimg.cn /xnimg.cn。这三种的区别是a.是在其他地方的域，s.是在北京本地的域，xnimg.cn是曾经的域，通常现在使用a.xnimg.cn,除非非常重要的静态文件才使用s.xnimg.cn。

在开发过程中，我们应该对bug出现有预见性，特别是常见的bug（QA经常提的bug比如连续字符串没有换行，鼠标在没有变成手型…）要提前做出处理。 要考虑各种极端数据和不同大小图片在页面中的显示情况。对于代码进行合理的规划，减少冗余，可以简单写下注释，便于以后修改。

 

一些快速查bug和解决bug的见解：

 

1分辨bug的类型，确定是不是页面的问题，是否由于套错了某个标签，是否需要js修改或者后台处理

2 查bug的工具,firebug,IE的IEDevToolBar,chrome自带调试工具，找到定位bug的位置和类型，作出修改

3经验积累。查看DOCTYPE是否在HTML顶部是否完整。是否有多余的空格或是编码格式是否正确，比如ie解析的空格间距不太一样，有时候会导致意想不到的bug

4逐步删代码方式，看究竟是那个部分是有问题的。

5zoom:1;是解决ie6的兼容问题的万精油。可以用，但是不易多用，这个属性可能会存在一些潜在的问题，至于是什么问题，大家可以google一下。

6position:relative;和overflow:hidden;搭配使用能解决ie下滚动图片侧漏问题