学习笔记

1、
当浏览器缩小的时候，head部分和重复的背景部分没有填满父容器
.head{min-width:1028px}
.repeat{background: url(../images/bb.png) repeat-x;min-width:1028px;height:38px;z-index: 100;position: relative;top:734px}

这里面的1028是所切图的中间的宽度，这样缩小的时候就不会出现错位问题

2、
2.1学习css3
因为在PC端为了兼容IE，比如阴影会采用切图的方式（因为IE8等不支持box-shadow），
但是touch端不会有这种问题，所以很多时候还是要用css3去写，而不是整块的切图

2.2

PC端：

里面的span高度不一样的时候，

不使用浮动的时候能实现底部在一条线上的左对齐；

使用浮动，并且添加一样height和line-height能实现垂直居中。

但是touch端，在添加了公共样式以后，如果使用了浮动，li就无法被撑开

比如：引入了公共样式
那么如果

里面的span使用了浮动，li就没有了高度
所以不适合用这种结构，touch端的垂直居中，建议使用单行表格；

2.3、内部元素超过了父元素，可以使用相对定位，设置top为负值，而不要使用负的margin；

2.4、层定位：
.title{position:relative;width: 1010px;height: 55px;background: #914820;margin: 0 auto;padding:6px 0 0 10px;color: #fff}
.title .arrow-left{background:url(../images/arrow.png) no-repeat 0 0;width: 10px;height: 10px;position: absolute;bottom: -9px;left:0px;z-index: 100}
.title .arrow-right{background:url(../images/arrow.png) no-repeat -37px 0px;width: 10px;height: 10px;position: absolute;bottom: -9px;right:0px;z-index: 100}：

将角作为子元素并设置负的bottom值，而不是添加一个大的父容器，将角和title作为同级元素相对于父容器定位。

2.5 touch端，背景图片被切散的时候：
topic>img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
vertical-align: top; //能够去掉img之前的缝隙