<ul>
<li>
<a href="#"><img src="images/tubiao1.png"></a>
<a href="#" class="wenzi">图片一</a></li>
<li><a href="#"><img src="images/tubiao2.png"></a>
<a href="#" class="wenzi">图片二</a></li>
<li><a href="#"><img src="images/tubiao3.png"></a>
<a href="#" class="wenzi">图片三</a></li>
</ul>
*{margin:0; padding:0;}
ul{list-style-type:none; zoom:1;}
ul li{float:left; margin:10px; _display:inline; border:1px solid #CCC;}
ul li a img{width:100px; height:100px; padding:5px;border:0;display:block;}
ul li a.wenzi{line-height:20px; color:#666; display:block; text-align:center;}
ul li a:hover{color:#F00;}
这个单独做出来的效果是
这样子的 但是 放入其他代码之后首页就整个乱掉了 其他用ul li的都会被影响到 怎么办？

换行就行了

其实用绝对定位就不会出现这种问题

没看出乱来，用了浮动就要考虑清除浮动