前端基础-CSS精灵技术

cwl_java

发布于 2020-04-01 15:56:08

2920

发布于 2020-04-01 15:56:08

文章被收录于专栏：cwl_Javacwl_Java

一、css精灵技术

网址：http://mil.news.sina.com.cn/china/2018-08-31/doc-ihiixyeu1558608.shtml

网页加载每一张图片都需要对服务器进行一次请求，所以对服务器的负荷会很大，可以将多个小图放到一张大图上，每个地方使用小图片都对大图进行背景定位即可，这样只需要加载一张大图片，对服务器只做一次请求，可以减少服务器的开销，提供网站的性能

微信案例其实就是用的精灵图

<head>
	<meta charset="UTF-8">
	<title>微信案例</title>
	<style type="text/css">
		.box{
			height:74px;
			background:url(img/wx_bg.jpg);
			padding-left:300px;
		}
		ul{
			list-style:none;
			padding:0;
			margin:0;
		}
		li{
			float:left;
			margin-top:20px;
			margin-right:20px;
		}
		a{
			display:inline-block;
			text-decoration: none;
			color:#fff;
			height:33px;
			background:url(img/wxli_bg.png) left -192px;
			line-height:33px;
			padding-left:17px;
		}
		span{
			display:inline-block;
			height:33px;
			background:url(img/wxli_bg.png) right -192px;
			line-height:33px;
			padding-right:17px;
		}
		a:hover{
			color:green;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li><a href="#"><span>首页</span></a></li>
			<li><a href="#"><span>下载吧</span></a></li>
			<li><a href="#"><span>公共平台</span></a></li>
		</ul>
	</div>
</body>