學習筆記

一、 當瀏覽器縮小的時候，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.1學習css3 由於在PC端爲了兼容IE，好比陰影會採用切圖的方式（由於IE8等不支持box-shadow）， 可是touch端不會有這種問題，因此不少時候仍是要用css3去寫，而不是整塊的切圖

2.2

PC端：<ul><li> <span></span><span></span></li></ul>裏面的span高度不同的時候，

不使用浮動的時候能實現底部在一條線上的左對齊；

使用浮動，而且添加同樣height和line-height能實現垂直居中。

可是touch端，在添加了公共樣式之後，若是使用了浮動，li就沒法被撐開

好比：引入了公共樣式<link rel="stylesheet" href="http://css.40017.cn/cn/min/??/cn/f/touch/Style/public/base.wxcard.1.0.css?v=20141210164002" /> 那麼若是<ul><li> <span></span><span></span></li></ul>裏面的span使用了浮動，li就沒有了高度 因此不適合用這種結構，touch端的垂直居中，建議使用單行表格；

2.三、內部元素超過了父元素，可使用相對定位，設置top爲負值，而不要使用負的margin；

2.四、層定位： .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以前的縫隙