网页设计里面怎么用css定位图片的不规则摆放?(如图)

html-css024

网页设计里面怎么用css定位图片的不规则摆放?(如图),第1张

百度:css3 变形(低版本ie和少部分浏览器不支持)

低版本ie的实现:

先把图片在ps里面拉斜做影子后存为:png24+背景透明格式,然后网页里面用cssz-index控制层级上下关系,并用定位摆放到合适的位置。另外你还要修正一下ie6的png24背景不透明的问题。

然后,你给那三个猫咪图片每张一个id:

<img src="aaa.jpg" id="cat1" />

<img src="bbb.jpg" id="cat2" />

<img src="ccc.jpg" id="cat3" />

#cat1,#cat2,#cat3{position:absolute}/*绝对定位*/

#cat1{

left:300pxtop:80px

z-index:10

}

#cat2{

left:50pxtop:320px

z-index:9

}

#cat3{

left:300pxtop:80px

z-index:8

}

用四个div浮动,然后每个div里放几张图片<div >

<div style="float:left">

<div>图片<div>

<div>图片<div>

<div>图片<div>

<div>图片<div>

</div>

<div style="float:left">

<div>图片<div>

<div>图片<div>

<div>图片<div>

<div>图片<div>

</div>

<div style="float:left">

<div>图片<div>

<div>图片<div>

<div>图片<div>

<div>图片<div>

</div>

<div style="float:left">

<div>图片<div>

<div>图片<div>

<div>图片<div>

<div>图片<div>

</div>

</div>