css 如何让三张图片重叠在一起

html-css034

css 如何让三张图片重叠在一起,第1张

用定位做，

<div class="box">

<div class="left"></div>

<div class="center"></div>

<div class="right"></div>

</div>

.box{position:relative}

.left{position:absolutetop:0left:0}

.center{position:absolutetop:0left:}

.right{position:absolutetop:0left:0}

中间填写你第一块的宽

或者你用浮动做：

把原图放在一个<div>里，然后在这个<div>里插入一个空<span>标签，然后在css样式里，给这个span加上背景图，这个背景图就是指原图的装饰。

CSS样式如下：注意在div(本例中class命名为grd )的样式里position被设成relative(相对)而在span里position被设成absolute(绝对)；这个非常重要！而其它样式比如：width(宽度)，top(上间距) 都可以根据实际情况来定。

<style type="text/css">.grd { border:1px solid #CECECEpadding:50pxheight:50pxwidth:147pxposition:relative} .grd span{ background: url(/images/hot.gif) no-repeatdisplay: blockposition: absolutewidth: 35pxheight: 58pxtop: 5pxleft:140pxborder: 0px} </style>

有了上面的CSS，HTML可以这样写：

<div class="grd"><span></span><img src="/images/61dh.png" border="0"/></div>

1. 最简单的情况：设置这个属性就可以了，各浏览器都兼容：

display: inline-block

2. 如果图片需要以block显示，那么就麻烦点：

<div>

<style type="text/css">

img{margin:0pxpadding:0pxdisplay:blockfloat:left}

</style>

<img src="20120601165649_4.jpg"/>

<img src="20120601172023_4.jpg" style="margin-left: 10px"/>

<img src="20120601172645_4.jpg" style="margin-left: 10px"/>

</div>

3. 如果你的图片还有超链接，那么还有第三种情况了，需要给img标签添加border:0属性，不然的话，在IE下会出现蓝色边框：

<style type="text/css">

img{margin:0pxpadding:0pxdisplay:blockfloat:leftborder:0px}

</style>

<a href=""><img src="20120601165649_4.jpg"/></a>

<a href=""><img src="20120601172023_4.jpg" style="margin-left: 10px"/></a>

<a href=""><img src="20120601172645_4.jpg" style="margin-left: 10px"/></a>

</div>

css如何让三个div并排展示，其实就是设置一个浮动点，让三个div靠左或者靠右浮动；

主要标签用于：float：left(靠左对齐)float:right(靠右对齐)：示例如下：

1、首先打开用到的编辑工具这里用DW

2、为了方便观察，我们把三个div设置三个背景颜色来观察，设置三个div样式这里取名：div1 div2 div3 并且引用三个样式；

详解：background:#颜色；是取的三个不同的div背景颜色；给三个div设置宽度为width:300px高度height:200px

3、展示出来的效果如图：