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;}