CSS定义不规则图片排版

实现效果如下：

http://yxkt.web-179.com/test/test11.html

html代码:

<table class="" width="950" border="1" cellpadding="0" cellspacing="0" height="590">
<tbody>
<tr>
<td colspan="2" rowspan="2" valign="middle" width="290" align="center" height="386"><a class="upupwunav009" href="http://www.baidu.com"></a></td>
<td colspan="3" valign="middle" width="221" align="center" height="206"><a class="upupwunav010" href="#" target="_blank"></a></td>
<td colspan="3" valign="middle" width="221" align="center" height="206"><a class="upupwunav011" href="#" target="_blank"></a></td>
<td colspan="2" valign="middle" width="218" align="center" height="206"><a class="upupwunav012" href="#" target="_blank"></a></td>
</tr>
<tr>
<td colspan="5" valign="middle" width="371" align="center" height="180"><a class="upupwunav013" href="#" target="_blank"></a></td>
<td colspan="3" rowspan="2" valign="middle" width="289" align="center" height="383"><a class="upupwunav014" href="http://www.baidu.com"></a></td>
</tr>
<tr>
<td colspan="3" valign="middle" width="318" align="center" height="203"><a class="upupwunav015" href="#" target="_blank"></a></td>
<td colspan="4" valign="middle" width="343" align="center" height="203"><a class="upupwunav016" href="#" target="_blank"></a></td>
</tr>
<tr>
<td><img alt="" width="189" height="1"></td>
<td><img alt="" width="101" height="1"></td>
<td><img alt="" width="28" height="1"></td>
<td><img alt="" width="63" height="1"></td>
<td><img alt="" width="130" height="1"></td>
<td><img alt="" width="60" height="1"></td>
<td><img alt="" width="90" height="1"></td>
<td><img alt="" width="71" height="1"></td>
<td><img alt="" width="29" height="1"></td>
<td><img alt="" width="189" height="1"></td>
</tr>
</tbody>
</table>

 

转载于:https://www.cnblogs.com/yuxiuting/archive/2011/11/10/2244528.html