怎样使用DIV+CSS实现拼图

html-css016

怎样使用DIV+CSS实现拼图,第1张

页面中有些是由大大小小的很多图片拼成的。这样的拼图要用到的z-index,浏览器兼容的时候要考虑到FF和IE的margin-left。

eg：（z-index的设置，IE与FF也有区别，div3同div2的时候，IE678测试都可以通过，FF则不行。）

.mainFrame {width:950pxmargin:0px autopadding:0px}

.div1 { float:leftz-index:1display:inline}

.div2 { float:leftz-index:2display:inlinemargin-top:-183px}

.div3 { float:leftz-index:3display:inlinemargin-top:-183pxmargin-left:193px*margin-left:0px}

<div class="mainFrame">

<a href="welcome.html" class="div1">

<img src="../images/1/1.gif" />

</a>

<div class="div1">

<a href="welcome.html"><img src="../images/1/2.gif" /></a>

</div>

<div class="div1">

<a href="#"><img src="../images/1/3.gif" /></a>

</div>

<div class="div1">

<a href="#"><img src="../images/1/4.gif" /></a>

</div>

<div class="div1">

<a href="#"><img src="../images/1/7.gif" /></a>

</div>

<div class="div2">

<a href="#"><img src="../images/1/5.gif" /></a>

</div>

<div class="div3">

<a href="#"><img src="../images/1/6.gif" /></a>

</div>

</div>

拼图？不太懂

定义一个div的position为relative 然后里面的图片全部定义为position absolute属性的 然后控制他们的left 和top值就可以达到效果了

<style>

.box{width:500pxheight:500px background-color:#dddposition:relative}

.box img{position:absolute}

.m1{left:0top:0}

.m2{left:20pxtop:20px}

.m3{left:40pxtop:0}

</style>

<div class="box">

<img src="xx" width="20" height="20" class="m1">

<img src="xx" width="20" height="20" class="m2">

<img src="xx" width="20" height="20" class="m3">

</div>

差不多就是这个逻辑