Question

如何用div+css无缝拼接图片？

今天在公司半盗半敲了一个下午代码。但是做出来的效果都不是无缝凭借的。现在求救各位大神，如何用div+css实现图片无缝拼接，并且点击每张图片都能跳转到相应的页面的。我做的是阿里巴巴装修的。
今天的用的代码是这样的
<div>
<p>
<li><a title=""><a href="图片1的链接"><img src="图片1"alt=""width=""height=""></li>
<a title=""><a href="图片2的链接"><img src="图片1"alt=""width=""height=""></li>
<a title=""><a href="图片3的链接"><img src="图片1"alt=""width=""height=""></li>
</p>
<p>
<li><a title=""><a href="图片4的链接"><img src="图片1"alt=""width=""height=""></li>
<a title=""><a href="图片5的链接"><img src="图片1"alt=""width=""height=""></li>
<a title=""><a href="图片6的链接"><img src="图片1"alt=""width=""height=""></li>
</p>
<p>
<li><a title=""><a href="图片7的链接"><img src="图片1"alt=""width=""height=""></li>
<a title=""><a href="图片8的链接"><img src="图片1"alt=""width=""height=""></li>
<a title=""><a href="图片9的链接"><img src="图片1"alt=""width=""height=""></li>
</p>
以下是图片的简图，可以参考一下……希望朋友帮一下忙，不要<td></td>这种形式的，谢谢。

Answer 1

你的HTML代码 特别是A标签 嵌套错误。应该是：<a href="图片9的链接" style="margin:0;padding:0"><img src="图片1" alt="" width="" height=""></a>

margin:0;padding:0的意思是 边距为0，无缝

追问

能完整的从一到九的图片帮我弄一下吗？兄弟，我对div+css完全不懂，我只会HTML。哭…………

追答

没这时间 SORRY。。。给你的 你参考规律直接弄就行了

Answer 2

你看这样子是不是你想要的效果

<div style="width:750px;">
             <ul style="margin:0;padding:0;">
             <li style="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><a href="#"><img src="001.jpg" style="display:block;" /></a></li>
             <li style="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><a href="#"><img src="001.jpg" style="display:block;"/></a></li>
             <li style="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><a href="#"><img src="001.jpg" style="display:block;"/></a></li>
             <li style="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><a href="#"><img src="001.jpg" style="display:block;" /></a></li>
             <li style="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><a href="#"><img src="001.jpg" style="display:block;" /></a></li>
             <li style="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><a href="#"><img src="001.jpg"  style="display:block;"/></a></li>
             <li style="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><a href="#"><img src="001.jpg" style="display:block;" /></a></li>
             <li style="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><a href="#"><img src="001.jpg" style="display:block;"/></a></li>
             <li style="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><a href="#"><img src="001.jpg" style="display:block;"/></a></li>
</ul></div>

 宽度（width）根据你自己的实际情况去改变就可以了