Css image Genie and css genie

Css image Genie and css genie

<Ul> <li class = "top"> <em> 01 </em> <p> <a href = "http://www.imooc.com/"> [mu ke interview user] diaosi is on the road </a> </p> </li> <li class = "top"> <em> 02 </em> <p> <a href =" http://www.imooc.com/"> [prize activity] to the father of the three lines of correspondence </a> </p> </li> <li class =" top "> <em> 03 </em> <p> <a href = "http://www.imooc.com/"> programmer, please share your childhood award announcement </a> </p> </li> <em> 04 </em> <p> <a href =" http://www.imooc.com/"> [mu class interview] broken cocoon into a butterfly -- the history of the transformation of beautiful programmers </a> </p> </li> <em> 05 </em> <p> <a href = "http://www.imooc.com/"> [award announcement] Catch the "ball" peak, striving to be the "God of prophecy" </a> </p> </li> <em> 06 </em> <p> <a href = "http://www.imooc.com/"> [questionnaire survey] MOOC user learning situation survey </a> </p> </li> </ul>

Image material:

　　

Note: configure the background-position attribute to control the display of different background images for different list items

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