1.插入图片时，图片必须用div包裹起来，给div固定宽高，图片设为max-width:100%;
原因：图片需要在后期后台添加，而你永远都不知道客户给你上传的图片是什么样子？什么大小的？如果客户上传的图片大于你原有的图片，你所有的样式都会疯狂的
手机端图片的自适应问题：
解决方法一：
通过JS获取比较大的一边，设置为100%，让其余的部分自适应，，尽量保证图片全部显示；为避免横向拉伸，可以设置图片水平居中。
解决方法二：
后台程序上传图片时裁剪图片
2.使用图片轮播的时候，注意多个轮播代码是否会冲突
3.hover的效果必须提前定好，包括点击之后最好有个标记提醒用户当前是哪个页面，这个样式最好也提前定好，后期交给程序添加样式
4.会更换的背景图片的样式最好写成行内样式
原因：便于程序后期循环
5.后台程序需要循环取出数据的地方，样式要写的特别小心，比如：
ul li的循环，li定的class最好一样，利于后台循环，调整样式，当然，最好li中不要定class
7.除了首页，最好所有的header和footer都是共用一个公共样式，方便后台程序
8.banner没有特殊情况，最好是切成图片，利于后期更换，还有
9.浮动问题：在设置完浮动后，马上在其父级清除浮动
10.h1标签只用于标题，尽量少用
11.透明：
a.几乎兼容所有浏览器的透明属性代码：
opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
b.当父元素设置透明后，子元素文字也透明
解决办法：
另外写个div作为透明层，文字放在其同级div里，用position实现重叠覆盖的效果
12.个别页面无滚动条，造成页面整体往右偏移的问题：
单独为IE6，7设置固定高度，在IE6，7下，内容多于高度时会自动撑开，增加高度；或者设置overflow：scorll；
13：手机端：
A。图片高度100%，水平居中
B。百分比的情况下使用固定字体，比如在宽为640的屏幕下字体大小为30px，那么在320宽度的手机屏幕，字体大小则为15px；或者使用rem字体，按body的字体大小进行换算，没有继承性。
C。盒子模型，使用boder-box，便于布局
D。CDN加载时间长，不利于网页性能优化，不建议使用
E。SVG可以生成背景图片，字体图标，IE9以上浏览器兼容，（AI可生成SVG图片）
F。z-index，定位优先级：fixd>relative>absulote
G。二级菜单hover时画面闪烁的问题，加一个stop（true，true）
H。find，找它所有的子元素；childrean找它当前的子元素
I。手机端列表页，图片的高宽固定
问题1：background-position: center;在火狐中无效
代码：
<style type="text/css" scoped="" >
.banner{width: 100%; background-position: center center;background-attachment:fixed;}
</style>
<div class="banner" style="background:url(‘img/banner1.png‘) no-repeat;"></div>
问题描述：
background-position: center center;在火狐中无效，按照网友的回答，添加了background-attachment:fixed;这句，同样无效；
但是若我改成background:url(‘img/banner1.png‘) no-repeat center;则在火狐中能有效居中。目前还不知道原因
问题2：浮动问题
a.问题描述：两个div在同一行，只设右浮动，在IE下出现问题
解决办法： 同时设置左右浮动，并在其父级清除浮动
b.问题描述：ul li的浮动问题，最后一个li的margin-right【IE9以下不支持last-child属性】
解决办法：后台程序判断是第几个li，给最后一个li加上一个class，设置margin-right：0；
或者运用after伪类选择器改变最后一个li的样式
文章来自：http://www.cnblogs.com/BaishangBloom/p/4512971.html