課程
/前端開(kāi)發(fā)
/HTML/CSS
/從 psd 到 html
The Gallery中間的兩張圖,怎么讓上面的圖蓋住下面的圖上面的部分,為什么我的是第二張圖的底部超出隱藏了?
2016-08-01
源自:從 psd 到 html 4-6
正在回答
切圖的時(shí)候不要被遮住的部分啊。。。。
<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;
解決了,不知道老師的為什么可以,我自己給下面的圖片設(shè)置了position:absolute 和 z-index:-1;顯示出來(lái)的就和psd一樣了。
qq_blackjack_0
舉報(bào)
教你把PSD設(shè)計(jì)稿轉(zhuǎn)化成HTML,用案例來(lái)講解基本流程
1 回答index-pics部分,中間豎向的兩張圖片是相互重疊的
2 回答請(qǐng)問(wèn)下老師是怎么復(fù)制PSD上面的文字的?
2 回答banner中的背景圖怎么有灰邊
2 回答切圖為什么不直接用ps里面的復(fù)制css
2 回答如圖所示,紅色框選部分的白色空隙怎么回事
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2017-03-28
切圖的時(shí)候不要被遮住的部分啊。。。。
2016-11-26
<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;
}
這樣也可以
2016-09-14
我先貼部分你看看,不行我貼全部
<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;
}
2016-08-01
解決了,不知道老師的為什么可以,我自己給下面的圖片設(shè)置了position:absolute 和 z-index:-1;顯示出來(lái)的就和psd一樣了。