请问这样一排三个图,如何用CSS实现

html-css016

请问这样一排三个图,如何用CSS实现,第1张

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>

<div class="module">

<ul>

<li><a href="http://www.youku.com/"charset="100-004-1">首页</a></li>

<li class="current"><a href="http://tv.youku.com/"charset="100-004-3">电视剧</a></li>

<li><a href="http://movie.youku.com/"charset="100-004-4">电影</a></li>

<li><a href="http://zy.youku.com/"charset="100-004-6">综艺</a></li>

<li><a href="http://music.youku.com/"charset="100-004-8">音乐</a></li>

<li><a href="http://comic.youku.com/"charset="100-004-7">动漫</a></li>

<li><a href="http://www.youku.com/v/"charset="100-004-2">全部</a></li>

</ul>

</div>

上面的代码就是优酷停留在电视剧当前的时候有个样式 这个样式就是控制当前的背景色