第二天：让我们一起来玩玩css精灵（css sprites）-优快云博客

本文介绍了一种利用 CSS Sprites 技术实现网站图标整合的方法。通过将多个小图标整合到一张大图上，并使用 background-position 属性来定位显示不同的图标片段，从而减少 HTTP 请求次数，提高页面加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;/*边框宽度为一像素，边框为实线，边框的颜色*/
	 	width: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; /*左浮动*/
		width: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} /**/

转载于:https://www.cnblogs.com/huiyuantang/p/5464791.html