Nova游戏官网项目笔记

1、DIV的宽度 = width + padding + border + margin。可是在切图的过程中如果是两张图片合并，为兼容ie8 ie9。我们要把外面的间隔调为2px。例如下图：图一的中间的部分要小于图二的宽度为2px,高度不用变。不要按照设计稿来定位居中。

<li><img>标签之间有空隙 最终解决办法

第一，给图片img标签display:block。  Example Source Codeimg{display:block} 第二，定义容器里的字体大小为0。  Example Source Codediv {  width:110px;  border:1px solid #000000;  font-size:0  } 第三，定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top  Example Source Codeimg{vertical-align:bottom} 其他还有把图片下边距设为负值和改写HTML标签的排列。我觉得前三种就完全可以解决了。  造成图片在IE下与容器下边界有空隙的原因 在网上搜了一下，发现old9说的  图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关，不一定是 5px），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。  至于这里的HTML属性align="center"（对于图片浏览器会处理成align="middle"），就相当于vertical-align:middle; 所以道理也是一样的，只要vertical-align不取baseline，这个空隙就消失了。 Css sprite的使用：拼图，在减少请求数来减少网站运行的负担      使用的方法：1.把高度，宽度定好                  2、使用background-position来定所需要的图片定位                  3、获取图片的定位可以用ps来获取或者使用css sprite                   小工具 2、切图 ：。。。。。 A标签：怎样使图片的经过时和没有经过时的位置一样。我们要把宽度和高度设置     为一样就可以了 图片居中：valign-agin:middle; 3、看到效果图时不要急着去写，要构思布局，有那些相同的部分。减少不必要的代码的重复。 4.当高度等于行高时，内容会自动居中。 5.当字体内容超过 父亲的宽度时，要隐藏掉：overflow：hidden  white-space：nowrap text-overflow：ellipsis 4.背景图片居中显示