CSS精灵图定位

穷举法

<div class="other-nav">
	<ul class="other-nav-list clearfix">
		<li>
			<div class="picture"></div>
			<span>话费</span>
		</li>
		<li>
			<div class="picture"></div>
			<span>火车票</span>
		</li>
		<li>
			<div class="picture"></div>
			<span>加油卡</span>
		</li>
		<li>
			<div class="picture"></div>
			<span>白条</span>
		</li>
	</ul>
	<ul class="other-nav-list clearfix">
		<li>
			<div class="picture"></div>
			<span>电影票</span>
		</li>
		<li>
			<div class="picture"></div>
			<span>酒店</span>
		</li>
		<li>
			<div class="picture"></div>
			<span>理财</span>
		</li>
		<li>
			<div class="picture"></div>
			<span>机票</span>
		</li>
	</ul>
	<ul class="other-nav-list clearfix">
		<li>
			<div class="picture"></div>
			<span>礼品卡</span>
		</li>
		<li>
			<div class="picture"></div>
			<span>彩票</span>
		</li>
		<li>
			<div class="picture"></div>
			<span>游戏</span>
		</li>
		<li>
			<div class="picture"></div>
			<span>众筹</span>
		</li>
	</ul>
</div>
.picture {
    width: 48px;
    height: 48px;
    background-image: url("../images/精灵图-侧边功能.png");
}
.other-nav-list:nth-child(1) li:nth-child(1) .picture {
    background-position: 0 0;
}
.other-nav-list:nth-child(1) li:nth-child(2) .picture {
    background-position: -48px 0;
}
.other-nav-list:nth-child(1) li:nth-child(3) .picture {
    background-position: -96px 0;
}
.other-nav-list:nth-child(1) li:nth-child(4) .picture {
    background-position: -144px 0;
}

.other-nav-list:nth-child(2) li:nth-child(1) .picture {
    background-position: 0 -48px;
}
.other-nav-list:nth-child(2) li:nth-child(2) .picture {
    background-position: -48px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(3) .picture {
    background-position: -96px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(4) .picture {
    background-position: -144px -48px;
}

.other-nav-list:nth-child(3) li:nth-child(1) .picture {
    background-position: 0 -96px;
}
.other-nav-list:nth-child(3) li:nth-child(2) .picture {
    background-position: -48px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(3) .picture {
    background-position: -96px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(4) .picture {
    background-position: -144px -96px;
}
上一篇
下一篇