怎样使用DIV+CSS实现拼图

html-css013

怎样使用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 元素的背景来进行的，当然也可以是背景加上图层了 下面我们以div背景来进行实例的说明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>拼图</title>

<style>

#main, #main1, #main2 {margin:100px auto width:1024px}

#main {margin:0 auto}

#img1 {background:url("http://www.e-zhao.net/templets/greed/css/img/seokey.jpg") no-repeat center top width:1020px height:153px margin:0 padding:0}

#img2 {background:url("http://www.e-zhao.net/templets/greed/css/img/step1.jpg") no-repeat center top width:1020px height:243px margin:0 padding:0}

#img3 {background:url("http://www.e-zhao.net/templets/greed/css/img/seokey.jpg") no-repeat center top width:1020px height:153px margin:0 padding:0 padding-top:153px}

</style>

</head>

<body>

<!---两图层直接拼接--->

<div id="main">

<p align="center">-两图层直接拼接</p>

<img src="http://www.e-zhao.net/templets/greed/css/img/seokey.jpg" />

<img src="http://www.e-zhao.net/templets/greed/css/img/step1.jpg" />

</div>

<!---两div背景拼图--->

<div id="main1">

<p align="center">-两div背景拼图</p>

<div id="img1"></div>

<div id="img2"></div>

</div>

<!---背景与图层的拼接--->

<div id="main2">

<p align="center">-背景与图层的拼接</p>

<div id="img3"><img src="http://www.e-zhao.net/templets/greed/css/img/step1.jpg" /></div>

</div>

</body>

</html>

简单的代码 希望你可以看的懂..

拼图？不太懂

定义一个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>

差不多就是这个逻辑