1.我的圖片之間margin不會生效。

2.高度80%怎么從上面開始的。

body{font-family: Arial
font-size；20px;}
body,ul{margin: 0;
??????? padding: 0
??????? list-style: none;} /*外邊框0，內邊框0，清楚列表樣式*/
.wrap{width:70%;
height: 200px;
margin:50px auto;
background: #fff}??????? /*wrap這個盒子寬占瀏覽器的70%，高200像素，外邊距上下50像素，左右劇中*/
.wrap h1{
?font-size: 20px;
?text-align: center;
?line-height: 200px;
}
.effect{
position: relative;
?box-shadow:0px 2px 4px rgba(0,0,0,0.3),0px 0px 10px rgba(0,0,0,0.1) inset;/*ie內核0px 0px 10px rgba(255,0,0,0.1) inset;h-shadow,v-shadow設置為0時，上下邊都會出現陰影，左右邊也都會出現陰影而不是單邊。*/
-webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.3),0px 0px 10px rgba(0,0,0,0.1) inset; /*chramo內核*/
-o-box-shadow:0px 2px 4px rgba(0,0,0,0.3),0px 0px 10px rgba(0,0,0,0.1) inset;
-moz-box-shadow:0px 2px 4px rgba(0,0,0,0.3),0px 0px 10px rgba(0,0,0,0.1) inset;}

.effect:before,.effect:after{
?content:'';
?background: #f00;
?position: absolute;
?z-index:-1;
?top:50%;/*必須設置四個方向值，才能顯示before這個盒子*/
?bottom: 0px;
?right:10px;
?left:10px; /*在effect盒子內容的前面插入一個內容"hello"*/
box-shadow: 0 0 20px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 20px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.3);
border-radius: 100px/10px; /*變成曲線，注意100px/10px(水平方向的半徑是100，垂直方向的半徑是10)與100px 10px（左上、右下下弧度半徑是100，右上、左下半徑是10px）的區別*/
}
.box{width:980px;
height: auto;
clear: both;
overflow: hidden;
margin: 20px auto;}

.box li{
??? list-style-type: none;
??? margin: :20px 10px;
?width: 300px;
?height: 210px;
?border: 2px solid #efefef;
?position: relative;
?float: left;
box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;}

.box li img{
width: 290px;
height: 200px;
margin: 5px;}

.box li:before{
?content: '';
??? position:absolute;
??? width:90%;
??? height:80%;
??? left:20px;
??? right:8px;
??? background: #f00;
??? -ms-transform:skew(-12deg) rotate(-4deg);
??? -webkit-transform:skew(-12deg) rotate(-4deg);
??? -moz-transform:skew(-12deg) rotate(-4deg);
??? -o-transform:skew(-12deg) rotate(-4deg);
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3);}

.box li:after{
?content: '';

??? position:absolute;
??? width:90%;
??? height:80%;
??? left:20px;
??? right:8px;
??? background: #f00;
??? -ms-transform:skew(12deg) rotate(4deg);
??? -webkit-transform:skew(12deg) rotate(4deg);
??? -moz-transform:skew(12deg) rotate(4deg);
??? -o-transform:skew(12deg) rotate(4deg);
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3);}