只是简单与复杂之分，
如果有ul li做的话可以这么写css，
ul, li{ margin:0padding:0}
ul{clear:both/*清除你前面元素的浮动，有备无患*/ text-align:left}
li{ width:xxxpx/*从文字左到图片右宽度*/ height:图片高度
list-style:nonebackground:url(xxx.jpg/*路径*/) no-repeat right center
}
这样你会看到所有的li都用了同一个图片，只好用web2.0标准不太提倡的方法，找到各自的li标签给他们加内联样式，比如：
<div>
<ul>
<li style="background-image:url(images/2.jpg)">精品课</li>
<li style="background-image:url(images/3.jpg)">实践教学</li>
</ul>
</div>
为了文字垂直居中，兼容ie6可以修改li的样式比如：
li{padding-top:4px/*完全根据你的高度调*/}
你会发现li被撑大了，这时给li减去相应的内边距， 图片路径千万别错了，
初期互联网刚刚兴起时，HTML中还没有引用CSS的概念，大家用的都是TABLE表格来实现布局，当时在互联网上展现的网站，也只是网页形式，没有大型网站的出现，后来随着互联网越来越发达，技术越来越先进，大型网站慢慢的浮现出来，而传统的TABLE表格的问题也渐渐多了起来，网页数量多，不易维护，维护成本太高，有时改一个简单问题，可能需要改成千上百个页面。
后来出现了DIV+CSS（更合理的叫法是XHTML+CSS）的布局方法，与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。
DIV+CSS是网站标准中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种样式制作定位。
DIV+CSS符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 现很多个人站长新建站点都采用了DIV+CSS来构建自己的网站页面，可见DIV+CSS替代table已经不是遥远梦想。
通过制作发行同样的页面使用TABLE做的页面与DIV+CSS制作的页面大小对比，DIV+CSS的XHTML页面大小至少小TABLE制作页面1/4。从而使的浏览DIV+CSS的页面更加快捷快速。
用表格快，但是根据回归本位的思想还是不用table,
用ul li 做就很好，你说的不能居中，是你没有掌握居中的技巧吧，
下面的这个结构是我第一次用UL做的，
建议以后这样的结构在练习技术的情况下，用绝对定位比较好，
为了兼容ie67有些地方用了绝对定位，ie8 ff直接能完全解释，不用额外的样式表，
