css图片精灵

<ul>
	<li class="top"> <em>01</em>
	  <p><a href="http://www.imooc.com/" >【慕客访谈 用户篇】“有为屌丝”在路上</a></p>
	</li>
	<li class="top"> <em>02</em>
	  <p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>
	</li>
	<li class="top"> <em>03</em>
	  <p><a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a></p>
	</li>
	<li> <em>04</em>
	  <p><a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></p>
	</li>
	<li> <em>05</em>
	  <p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰，争当“预言帝”</a></p>
	</li>
	<li> <em>06</em>
	  <p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>
	</li>
</ul>

图片素材:

注意：
1.em为内联元素，要把他改为块级元素后，设置的宽度和高度才有效
2.所有em的背景图片均为num.gif，通过设置background-position属性来控制不同列表项显示不同的背景图片

ul
{
	padding:5px;
}
li
{
	list-style-type:none;
	height:30px;
}
em
{
	width:20px;
	height:16px;
	background:url(images/num.gif) no-repeat;
	display:block;
	text-align:center;
	font-style:normal;
	color:#333;
	background-position:0 -16px;
	float:left;
}
.top em
{
	color:#FFF;
	background-position:0 0;
}
p{
	float:left;
}
a:link,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover,a:active{color:#b52725;text-decoration:underline;}