css 样式的高级使用

css

 

/*图片*/
.arrow-scroll 
.arrow-scroll-bottom,
.arrow-scroll-top{
	float: left;
	background: url('../imgs/arrow-scroll.png?v=d4893b7c.png?v=11vd83') no-repeat;
	width: 99px;
	height: 50px;
	cursor:pointer;
}
/*默认的坐标*/
.arrow-scroll .arrow-scroll-top{
	background-position: 0 0;	
}
.arrow-scroll .arrow-scroll-bottom{
	background-position: -99px 0;
}
/*悬浮*/
.arrow-scroll .arrow-scroll-bottom:hover{
	background-position: -99px -61px;
}
.arrow-scroll .arrow-scroll-top:hover{
	background-position: 0 -61px;
}
/*禁用,是两个在一起啊,中间不能有空格哦*/
.arrow-scroll .arrow-scroll-top.disable{
	background-position: 0 -122px;
}
.arrow-scroll .arrow-scroll-bottom.disable{
	background-position: -99px -122px;
}

 

html

 

 

<div class="arrow-scroll">
									<a class="arrow-scroll-top " href="javascript:void(0)"></a>
									<a class="arrow-scroll-bottom disable" href="javascript:void(0)"></a>
							</div>