按照教程做了，可是仍然不行
css

.mainpdbox2.coll{width:333px;float:left;border:#ccc 1px solid;height:200px;overflow:hidden;margin-bottom:10px;}
.mainpdbox2.colr{width:333px;float:right;border:#ccc 1px solid;height:200px;overflow:hidden;margin-bottom:10px;}
.mainpdbox2.coll .t,.mainpdbox .colr .t{background:url(menu.jpg) repeat-x 0px bottom; height:32px; line-height:32px; font-size:12px; font-weight:bold; padding-left:10px; color:#069;position:relative;}
.mainpdbox2.coll .t span,.mainpdbox .colr .t span{position:absolute;right:10px;top:0px;}
.mainpdbox2.coll .t span a,.mainpdbox .colr .t span a{font-size:12px;font-weight:normal;color:#069;}
.mainpdbox2.coll ul,.mainpdbox .colr ul{padding:8px;}
.mainpdbox2.coll li,.mainpdbox .colr li{height:25px;line-height:25px;background:url(artarrow.gif) no-repeat 0px 10px; padding-left:10px;}
.mainpdbox2.coll a:hover,.mainpdbox .colr a:hover{color:#ff3300;text-decoration:none;}


调用代码 （频道首页）

<div class="wrap clearfix">
    <div class="mainpdbox">
        <div class="mainpdbox">
{LB_频道首页循环列表新版}
        </div>
    </div>


外循环：

{$IF {@autoid} MOD 2=0}{<div class="coll">
}{<div class="colr">
}{/$IF}
<div class="t"><span><a href="{@classurl}" target="_blank">更多...</a></span>{@classname}</div>
<ul>{$InnerText}</ul>
</div>



内循环：

[loop=3]
<div class="imgArea">
<div class="imgLAreapic"><a href="{@linkurl}"><img src="{@photourl}" alt="{@fulltitle}" width="90" height="70" border="0"></a></div>
<div class="imgT">
<h3><a href="{@linkurl}" title="{@fulltitle}">{@title}</a></h3>
<span>{@intro}</span>
</div>
</div>
[/loop]


想实现的样子




想实现的样子


求教，应该怎么弄啊？css应该怎么写？  调用代码应该怎么写？

学习下基础的HTML+ CSS吧