【html 代码片段】 图文+标题（上下）

不知道如何插入可以运行的html，所以看不到效果了。
发个最常用的 图片+标题（上下）结果的 html代码。已经做到了最简洁，最兼容 。
做HTML时间长了 就发现所有的工作都是重复，工作效率提高的重要因素就是代码重用。模块化。

以后慢慢整理。到时候做页面那就是大块大块的复制粘贴了。想想都惬意 ：）

<style type="text/css">
<!--
body,td,th {
    font-size: 12px;
    color: #4D6185;
}
*{ margin:0; padding:0; border:0; list-style:none}
.img_list{ width:300px}
.img_list ul li{ float:left; width:80px; text-align:center; height:100px; overflow:hidden}
.img_list ul li img{ display:block; margin:5px auto; border:1px solid #ccc; padding:2px;}
.img_list ul li a{ }
.img_list ul li a:hover{  color:#CC0000}
.img_list ul li a:hover img{ border:1px solid #333; background:#333}

-->
</style>

<div class="img_list">
<ul>
<li><a target="_blank" href=""><img width="46" height="46" border="0" alt="精彩瞬间" src="http://image.dili360.com/my/html/index/7_1331670_20081020112317.jpg"/>
精彩</a></li>
<li><a target="_blank" href=""><img width="46" height="46" border="0" alt="精彩瞬间" src="http://image.dili360.com/my/html/index/7_1331670_20081020112317.jpg"/>
精彩</a></li>
<li><a target="_blank" href=""><img width="46" height="46" border="0" alt="精彩瞬间" src="http://image.dili360.com/my/html/index/7_1331670_20081020112317.jpg"/>
精彩</a></li>
<li><a target="_blank" href=""><img width="46" height="46" border="0" alt="精彩瞬间" src="http://image.dili360.com/my/html/index/7_1331670_20081020112317.jpg"/>
精彩</a></li>
<li><a target="_blank" href=""><img width="46" height="46" border="0" alt="精彩瞬间" src="http://image.dili360.com/my/html/index/7_1331670_20081020112317.jpg"/>
精彩</a></li>
<li><a target="_blank" href=""><img width="46" height="46" border="0" alt="精彩瞬间" src="http://image.dili360.com/my/html/index/7_1331670_20081020112317.jpg"/>
精彩</a></li>
</ul>
</div>