CSS雪碧图-html优化

雪碧图的原理：用同一张图片的不同位置，实现减少http请求的减少

<!DOCYTYPE html>
<html lang="en">
<html>
	<HEAD>
		<meta charset="utf-8">
		<title>test</title>
		<style type="text/css">
			.list{
				list-style: none;
				width: 300px;
				height: 305px;
				margin: 50px auto 0;
				padding: 0;
			}
			.list li{
				height: 60px;
				border-bottom:1px dotted #000;
				line-height: 60px;
				text-indent: 50px;
				background:url(images/bg01.png) 0px 10px no-repeat;
			}
			.list .icon2{
				background-position: left -71px;
			}
			.list .icon3{
				background-position: left -154px;
			}
			.list .icon4{
				background-position: left -235px;
			}
			.list .icon5{
				background-position: left -315px;
			}
		</style>
	</HEAD>
	<BODY>
		<ul class="list">
			<li>1111</li>
			<li class="icon2">2222</li>
			<li class="icon3">3333</li>
			<li class="icon4">4444</li>
			<li class="icon5">5555</li>
		</ul>
	</BODY>
</html>

其中序号是一张图达到效果

posted @ 2020-06-17 19:41  胸毛君  阅读(130)  评论(0)  编辑  收藏  举报