前端经验

1、  前期布局网页就要考虑到兼容性问题，尤其是ie，火狐和谷歌等其他的基本是兼容的，有也是小问题；前期没改，后期改起来就会很麻烦；

2、  字体样式最好用微软自带的，处于兼容性的考虑；

3、  为了减少请求，前端页面当中，原则上自己写的css文件不得超过三个（一般css文件为：公共的css、页面的独特css、插件要引入的css）；

4、  样式分为基本和公用的；样式一律小写，命名要规范；

5、  公用的css和js可以用cdn公用库,降低宽带使用，提高用户访问网站的响应速度。

6、  资源合并与压缩: 如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外，CSS、Javascript、Image都可以用相应的工具进行压缩，压缩后往往能省下不少空间。

7、  设置了浮动属性之后，要给最后一个浮动元素下面加上清除浮动<div class=”clear:both;”></div>，float标签必须要闭合；

8、  较小的背景图可以做成一张雪碧图，用背景属性定位显示需要显示的图片部分，可使网页加载速度变快；

9、  尽量少用大图，大的背景图没有多图案的，可以用photoshop截取宽为1px的线条，然后用横向平铺的方式；

10、页面图片太多的可以用图片懒加载，对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。在加载的时候把第一屏之后的图片地址缓存在Textarea标签中，待用户往下滚屏的时候才“惰性”加载；

11、padding和border不被包含在定义的width和height之内，使用box-sizing: border-box;即使定义有border和padding也不会改变对象的实际宽度；

12、单标签都要进行闭合，比如：<br/>、<img src=”http://....” />；

13、ie浏览器浮动产生的双倍距离，可以设置display:inline；使浮动忽略；

14、LI中内容超过长度后以省略号显示的技巧：

<style type="text/css">
li {width:200px;
　　white-space:nowrap;
　　text-overflow:ellipsis;
　　-o-text-overflow:ellipsis;
　　overflow: hidden;
　}

</style>

16、页面制作完成时，用F12查看工具看看有没有报错，再用火狐查看有没有飘红的错误代码；