从一张大图里面获取各种小图标

最新推荐文章于 2024-02-19 21:14:52 发布

兰维轩

最新推荐文章于 2024-02-19 21:14:52 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/lanxuan1/article/details/78069490

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/base.css" />
		<style>
			.lifearea {
				width: 299px;
				margin: 200px auto;
			}
			
			.la_ul li {
				width: 72px;
				height: 60px;
				border: 1px solid #98FB98;
				float: left;
				margin-left: -1px;
				margin-top: -1px;
				text-align: center;
				padding-top: 12px;
			}
			
			.sprite {
				background-image: url(img/spriteimg.png);
			}
			
			.la_ul .sprite {
				display: block;
				width: 25px;
				height: 30px;
				margin: 0 auto;
			}
			
			.la_ul li i.ico1 {
				background-position: 0 0;
			}
			
			.la_ul li i.ico2 {
				background-position: 0 -44px;
			}
			
			.la_ul li i.ico3 {
				background-position: 0 -88px;
			}
			
			.la_ul li i.ico4 {
				background-position: 0 -132px;
			}
			
			.la_ul li i.ico5 {
				background-position: 0 -176px;
			}
			
			.la_ul li i.ico6 {
				background-position: 0 -220px;
			}
			
			.la_ul li i.ico7 {
				background-position: 0 -264px;
			}
			
			.la_ul li i.ico8 {
				background-position: 0 -308px;
			}
			
			.la_ul li i.ico9 {
				background-position: 0 -352px;
			}
			
			.la_ul li i.ico10 {
				background-position: 0 -396px;
			}
			
			.la_ul li i.ico11 {
				background-position: 0 -440px;
			}
			
			.la_ul li i.ico12 {
				background-position: 0 -1144px;
			}
		</style>
	</head>

	<body>
		<div class="lifearea ">
			<ul class="la_ul">

				<li>
					<i class="sprite ico1"></i> 充话费
				</li>
				<li>
					<i class="sprite ico2"></i> 游戏
				</li>
				<li>
					<i class="sprite ico3"></i> 旅行
				</li>
				<li>
					<i class="sprite ico4"></i> 车险
				</li>
				<li>
					<i class="sprite ico5"></i> 彩票
				</li>
				<li>
					<i class="sprite ico6"></i> 电影
				</li>
				<li>
					<i class="sprite ico7"></i> 酒店
				</li>
				<li>
					<i class="sprite ico8"></i> 理财
				</li>
				<li>
					<i class="sprite ico9"></i> 找服务
				</li>
				<li>
					<i class="sprite ico10"></i> 演出
				</li>
				<li>
					<i class="sprite ico11"></i> 水电煤
				</li>
				<li>
					<i class="sprite ico12"></i> 火车票
				</li>

				<div class="clear"></div>
			</ul>
		</div>
	</body>

</html>