1、效果图
2、html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> 欢迎来到梦之都 </title>
<!--这是引入css文件的外联方式-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul class="Sprites">
<li><span class="a1"></span><a href="#">WORD文章标题</a></li>
<li><span class="a2"></span><a href="#">PPT文章标题</a></li>
<li><span class="a3"></span><a href="#">EXCEL文章标题</a></li>
<li><span class="a4"></span><a href="#">PDF文章标题</a></li>
<li><span class="a5"></span><a href="#">文本文章标题</a></li>
</ul>
</body>
</html>
3、css代码
/**/
ul.Sprites{
margin:0 auto;/*这个指的是上下边界为0，左右根据宽度自适应，即所谓的居中*/
border:1px solid #F00;/*边框宽度为一像素，边框为实线，边框的颜色*/
300px; /*边框宽度为300像素*/
padding:10px;/*内边距*/
}
ul.Sprites li{
height:24px; /*div的高度*/
font-size:14px;/*字体大小*/
line-height:24px;/*行高*/
text-align:left; /*左对齐*/
overflow:hidden;/*滚动条隐藏*/
list-style-type:none;/*这是把我们li上面的点点去掉*/
}
ul.Sprites li span{
float:left; /*左浮动*/
17px;/*内联元素span的宽度*/
padding-top:5px;/*距离上方的内边距*/
height:17px; /*高度*/
overflow:hidden;/*滚动条隐藏*/
background:url(ico.png) no-repeat;/*图片不平铺*/
}
ul.Sprites li a{
padding-left:5px;/*内边距是5像素*/
}
ul.Sprites li span.a1{ background-position: -62px -32px} /*说白了就是每个span中有这么一张图片，x和y可以确定唯一的一个位置，通过这个位置把它显示到相应的位置*/
ul.Sprites li span.a2{ background-position: -86px -32px} /**/
ul.Sprites li span.a3{ background-position: -110px -32px} /**/
ul.Sprites li span.a4{ background-position: -133px -32px} /**/
ul.Sprites li span.a5{ background-position: -158px -32px} /**/