开发电商网站遇到的问题、解决方法、心得感想

1. CSS简写

使用简写是一种让代码减少的最简单方法，其中常用的是margin，padding，border，font，background。

padding和margin都应该尽量减少使用3个属性值，这样更便于维护。

font简写：
font:是否斜体 字体粗细 字体大小/行高 字体样式

例子：font: italic bold 12px/18px Arial, Helvetica, sans-serif ;

background简写：

例子：background: url("...") left top no-repeat;

2.CSS hack

尽量避免使用CSS hack，但推荐使用浏览器条件性注释。

例如，在Head结束标签之前加上如下条件注释，可以修正IE6的PNG显示问题。

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript" src="js/ie6Fixpng.js"></script>
<![endif]-->

此外，常用的CSS hack有：

“\9″：IE6/IE7/IE8/IE9/IE10都生效例子：line-height: 35px\9;

*width:24.9% IE6百分比宽度显示有问题

3.CSS结构

将CSS分成清晰的结构块。将CSS文件的每一块添加注释，并进行排版。可以更方便自己在很长时间以后重新审理这个CSS文件，到那时效率会高出许多。

4.CSS优化

将子集一样属性的放到父集，父集的样式可以继承，这样可以减少加载次数

5.学会使用负margin值

浮动的元素宽度稍稍过大使浮动元素显示在下一行时，可以使用负margin，并配合使用overflow：hidden使显示正常。

使浮动元素分栏显示，并且不会掉下来的好方法是指定百分比宽度。

6.其他

要使标题或其他文字缩进一些，可以不用padding，使用text-indent属性。

要使百分比宽度的浮动元素之间有间距，需要再给每个元素包一层div，并指定这个div的padding值。

指定position:relative;可以提高层级。