1、写页面步骤，先用div布局定好位后再写细节，先粗糙最后精细，同时兼容IE6和chrome
2、考虑IE6的兼容性问题
3、布局用div尽量不要参与表现效果
css技巧总结
1、文样式档申明（doctype）使用HTML5的申明方式,xhtml strict方式IE问题比较少，否则IE6会使用怪异模式
2、坚持HTMfL语义化原则
3、CSS样式分块处理包括浏览器重置reset 基本样式basic 和布局样式layout，项目公用样式 以及每个页面特殊样式（独立使用）；
4、推荐使用Class 和 层级样式
5、使用注释，推荐在注释用写好常用的颜色表
6、IE6特殊的处理
7、经常使用有效性验证
8、建立一个基本样色表，http://c7sky.com/tool/webcolor/
9、IE6使用的是盒子模型，宽度为内容、内边距、边框，IE6的双倍边距问题解决方式为display:inline
,而不是inline-box记住这个属性ie六是不支持的
10、标准浏览器中普通文档流中的垂直外边距会发生叠加行为，IE6的浮动布局时候的双倍边距问题是用inline属性解决。
11、行级的元素使用了的高度和宽度是无法显示修改的，只能通过line-hight的属性操作，或者设置外边距。比较重要的一点就是相对定位是保留原来的空间，绝对定位不会保留；
12、IE6不支持固定定位,一般是使用jquery处理
13、关于圆角边框，方法1使用图片合成2使用css3不支持IE6
14、投影，box-shadaw,不支持IE6
15、不透明度，使用CSS3和滤镜，但是子元素不会被继承，根据这个原理实现IE6防止前景跟着透明
16、PNG IE6可以选择使用一个东西支持
17、一个技巧就是使用多层背景，外层背景使用百分比，于是构成视差效果
18、属性选择器的写法例子： a[hre^="http:"]d，选择以http:开始的a标签
19、连接标签a不能作为表单提交的按钮，可能会造成数据丢失
20、使用IE浏览器制作CSS精灵的时候加上缓存滤镜避免闪烁
21、.boxc2 a:hover .tip{} 这种写法只有tip位于a 标签下面才能生效
22、浮雕效果是由一边浅浅的边框构成，例如下面：
background:#8bd400;
border:1px solid #e4ffd3;
border-bottom:1px solid #486b02;
23、如果在混在模式中的IE6 margin o auto; 的写法将不生效
24、关于hack，*只是IE支持，_只是IE6支持
25、解决垂直边距叠加的问题方法是：添加一个边框或者内边距；
26、关于hack和过滤器应该依赖不会被解析的Css过滤器，而不是某种BUG的过滤器。
27、子类选择器可以创建只能被IE6以上的浏览器支持的过滤
网页三个步骤：1 重置 2、HTml结构布局 3、小细节调整
网页Dubager的一般步骤为：
1、语法错误。2、doctype文档申明是否错误。3、在标准浏览器中做开发环境。4、添加轮廓和边框以及背景判断是否兼容。5、建立一个简单的原型重现BUG 6、修复问题而不是修复症状。
常见的BUG和修复方式
修复BUG的原则：做一步调试一步，为浏览器单独建立样式
CSS组成部分
重置、布局（推荐固定负边距技术）、导航、连接、表单、内容
下载一个ps源文件，做出来
记住几点很重要：1、IE的盒子模型。2、绝对定位不占原来的位置，相对定位要占位置的
IE6png修复
<!--[if IE 6]> <script src="./js/pngFix.js"></script> <script> $(function(){ DD_belatedPNG.fix('.header .container'); }) </script> <![endif]-->
文件下载地址：http://dillerdesign.com/experiment/DD_belatedPNG/
需要注意的事情是，要在文档树加载完成后再使用，否则会有时候无效，这个插件也是支持背景图定位的，也不要求一定要使用juqery，只是有一个BUG比较烦，就是这个插件的修复的元素背景样式不能有no-repeat
background：url(img) 0 0 ;/* 这个不能使用no-repeat */
如果结合jquery的强大选择器：
代码优化如下：
1 $("img[src$='.png']").each(function(){ 2 DD_belatedPNG.fix(this); 3 })
修复页面中的所有的png图片，但是不是背景图。
写前端心得
1、先实现好dom，再写css 和 js，这样处理可以避免 无意义的标签，最好使用现有的jquery插件，页面质量都有很大的提升，不要重复制造轮子。
2、先布局再细节，布局用的元素要浮动，并且注意IE 的宽度和chrome不同，高度使用min-height IE直接使用height
3、常用样式有要整合在一起,实现重用
1 .left,.right,.footer{ 2 float:left; 3 }
4、关于sprite
背景阴影，使用png-24聚合，定位用负的坐标
小图标：使用<i class="ico-user"></i>钩子，使用gif最好的效果输出，图标之间一定要有空隙，一定要定义高度和宽度，使用line-back显示，注意使用了line-back放到li中 ul的航高会失效，然后li重新定义高度和航高，ie6f的背景定位方式不同。
补充：刚刚看到阿里云的做法是，制作两套sprite一个为png-24另一个为专门为gif使用的，大小位置保证一样，很好用啊
5、关于外编剧叠加问题，浮动及可
6、圆角边框的自动滑动门
其实简单
li 背景靠左边
a 背景靠右边即可
<li id="_M4" class="top_menu"><a href="javascript:_M(4,'?m=content&c=content&a=init')" hidefocus="true" style="outline:none;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</a></li>
7、图片和文字环绕的写法
html 图片要放在文本中的p标签中
<p class="mediaAd-intro">
<img class=" mediaAd-image" width="150" height="150" src="<?php echo $this->Html->url(array('controller'=>'VoucherQrcodes', 'action'=>'image', $qr_data,7));?>">
<?php echo $media_app['MediaAd']['intro'] ?>
</p>
相关CSS如下
.mediaAd-image{
margin: 0 10px;
vertical-align: top;
float: left;
}
.mediaAd-intro{
text-indent: 28px;
color: #555;
padding: 5px;
line-height: 24px;
float: right;
border:1px solid #eee;
background:#fafafa;
}