Question

如何用CSS+DIV实现如下效果

如下我是用表格做的，请高手把产品的表格代码用CSS加入第二段代码里，不胜感激。
<table width="145" border="00" cellspacing="0" cellpadding="0">
<tr>
<td width="145"><img src="/images/1_r1_c1.jpg" width="145" height="9"></td>
</tr>
<tr>
<td height="118" align="center" background="/images/1_r2_c1.jpg">

<a href="{$r[url]}" target="{$target}"><img src="{thumb($r[xpic], $width, $height)}" width="{$width}" height="{$height}" alt="{$r[title]}" /></a> </td>
</tr>
<tr>
<td><img src="/images/1_r4_c1.jpg" width="145" height="8"></td>
</tr>
</table>

--------以下的产品图片处插入上面表格的效果------------

<style type="text/css">
<!--
/*产品列表*/
.ar_products { margin-top:10px; margin-left:10px; }
.ar_products ul { margin:0; padding:0; list-style:none; }
.ar_products ul li { width:150px; height:180px; border:#CCCCCC solid 0px; list-style:none; float:left; margin-right:0px; margin-bottom:10px; }
.ar_products ul li img { border:0; width:120px; height:150px }
-->
</style>

<table width="633" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="633">

<div class="ar_products">
<ul>
{loop $data $n $r}
<li><a href="{$r[url]}" target="{$target}">{if $r[style]}<span class="{$r[style]}"><strong>{str_cut($r[title], $titlelen,'')}</strong></span>{else}<strong>{str_cut($r[title], $titlelen,'')}</strong>{/if}</a><br>
型号：{$r[size]}
<br>
<a href="{$r[url]}" target="{$target}"><img src="{thumb($r[thumb])}" alt="{$r[title]}" width="120" height="150" align="left" /></a><br>
<br>
<a href="{$r[url]}" target="{$target}"></a></li>
{/loop}
</ul>
</div>

</td>
</tr>
</table>
我意是：代码一是表格做的需要在产品图加个框，框由上图中背景下图而成，（可复制其到Dreamweaver一看便明）代码二是由CSS+DIV做成的，我不懂CSS和DIV的应用，想代码一的效果合进代码二，盼请高人指点。不胜感激！！！

还没有解决啊！高手们帮忙啊！

Answer 1

你将做背景的整个图片放在a 标签里面,把a标签设为块状即display:block,还要设置高度

Answer 2

用数据库绑定做啊
真是的还这样啊

Answer 3

什么东东啊。。

Answer 4

不用<br>,改成

<div class="ar_products">
<ul>
{loop $data $n $r}
<li><a href="{$r[url]}" target="{$target}">{if $r[style]}<span class="{$r[style]}"><strong>{str_cut($r[title], $titlelen,'')}</strong></span>{else}<strong>{str_cut($r[title], $titlelen,'')}</strong>{/if}</a></li>
<li>型号：{$r[size]}</li>
<li><a href="{$r[url]}" target="{$target}"><img src="{thumb($r[thumb])}" alt="{$r[title]}" width="120" height="150" align="left" /></a></li>
<li><a href="{$r[url]}" target="{$target}"></a></li>
{/loop}
</ul>
</div>