css圖片精靈，css精靈

css圖片精靈，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;}