跪求div+css高手将我下面这段html代码用div+css实现 大神帮忙啊

Question

<table width="630" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="F2F6ED">
<tr>
<td height="36" background="Images/tit05.gif">
</td>
</tr>
<tr>
<td valign="top" background="images/index_bg.gif">
<table border="0" width="98%" cellpadding="0" cellspacing="0" class="f14 lh15" align="center">
<tr onMouseOver="this.bgColor='#DFF4FF'" onMouseOut="this.bgColor='#ffffff'">
<td><a href="#">这个是问题列表1</a></td>
<td align="right" nowrap><span class="f12">1111</span></td>
</tr>
<tr><td height="1" colspan="2" background="images/dotline.jpg"><img src="images/dotline.jpg" border='0'></td></tr>
<tr onMouseOver="this.bgColor='#DFF4FF'" onMouseOut="this.bgColor='#ffffff'">
<td><a href="#">这个是问题列表2</a></td>
<td align="right" nowrap><span class="f12">33331</span></td>
</tr>
<tr><td height="1" colspan="2" background="images/dotline.jpg"><img src="images/dotline.jpg" border='0'></td></tr>
</table>
</td></tr>
<tr>
<td height="20" valign="top" background="Images/bottoml.gif"></td>
</tr>
</table>

Answer 1

<style type="text/css">
.clear{clear:both;}
#containter{width:630px; margin:0 auto; background:#F2F6ED;}
#containter h3{background:url(Images/tit05.gif); height:36px; line-height:36px;}
#containter ul#main{background:url(images/index_bg.gif); padding:0 5px;}
#containter ul#main li{line-height:22px; clear:both;}
#containter ul#main li:hover{background:#DFF4FF;}
#containter ul#main li a{}
#containter ul#main li span.f12{float:right;}
#containter ul#main li.pic{ background:url(images/dotline.jpg);}
span#page{background:url(Images/bottoml.gif); height:20px;}
</style>

<div id="containter">
<h3>这里你放白了一格是做什么用的？</h3>
<ul id="main">
<li><span class="f12">1111</span><a href="#">这个是问题列表1</a></li>
<li class="pic"><img src="images/dotline.jpg" border='0'></li>
<li><span class="f12">1111</span><a href="#">这个是问题列表2</a></li>
<li class="pic"><img src="images/dotline.jpg" border='0'></li>
<div class="clear"></div>
</ul>
<span class="page">这里最后一行空白</span>
</div>

Answer 2

<style type="text/css">
.list{ width:630px; margin:0 auto; background:#f2f6ed;}
.list h1{ background:url(Images/tit05.gif); height:36px;}
.list1{ width:98%; margin:0 auto;}
.list1 h2{ font-size:16px; font-weight:normal;}
.list1 span{ float:right;}
.list1 li{ background:url(images/dotline.jpg); list-style:none;}
</style>
<div class="list">
<h1></h1>
<div class="list1">
<h2><span>1111</span><a href="#">这是个问题列表1</a></h2>
<ul>
<li><img src="images/dotline.jpg" alt=""/></li>
</ul>
</div>
<div class="list1">
<h2><span>33331</span><a href="#">这是个问题列表2</a></h2>
<ul>
<li><img src="images/dotline.jpg" alt=""/></li>
</ul>
</div>
<h1></h1>
</div>

Answer 3

<style type="text/css">
.apple{ background-color:#F2F6ED; width:500px;}
.apple ul { padding:0px; margin:0px;}
.apple ul li{ line-height:24px; list-style:none; text-indent:1em;}
.apple ul li span{ float:right;}
</style>

<div class="apple">
<ul>
<li><span>1111111</span><a href="#">这是问题列表一</a></li>
<li><span>2222222</span><a href="#">这是问题列表二</a></li>
</ul>
</div>

没看到还有图片。。。

Answer 4

？