切图的时候不要被遮住的部分啊。。。。

<div class="index-panel-body index-pics">
   <a href="" class="pic-col pic-col-m">
       <img src="images/index-food-05.png" alt="">
   </a>
   <div class="pic-col pic-col-s">
       <a href="" class="pic-row01"><img src="images/index-food-06.png" alt=""></a>
       <a href="" class="pic-row02"><img src="images/index-food-07.png" alt=""></a>
   </div>
   <a href="" class="pic-col pic-col-l">
       <img src="images/index-food-08.png" alt="">
   </a>
</div>

css代码

.index-pics .pic-col-s{

    position: relative;

    width: 287px;

}

.index-pics .pic-col-s .pic-row01{

    position: absolute;

}

.index-pics .pic-col-s .pic-row02{

    margin-top: 176px;

}

这样也可以

我先贴部分你看看，不行我贴全部

<div class="index-panel-body index-pics">

<a class="pic-col pic-col-l"><img src="images/pic1.png" alt=""></a>

<span class="pic-col pic-col-m">

<a class="pic-row1"><img src="images/pic2.png" alt=""></a>

<a class="pic-row2"><img src="images/pic3.png" alt=""></a>

</span>

<a class="pic-col pic-col-r"><img src="images/pic4.png"></a>

</div>

.index-pics .pic-row2{

position: absolute;

top: 480px;

left: 353px;

z-index: -1;

}

解决了，不知道老师的为什么可以，我自己给下面的图片设置了position：absolute 和 z-index：-1；显示出来的就和psd一样了。