综合设计一个OPPE主页--页面的售后服务

分析样式：

一共六块（整体可以使用列表）

里面的每一小块实际上也是一个列表；

 实现效果：

 有一个父子样式的跟随 子样式的背景图片的样式跟随父样式一同变化----鼠标触发

实现父子样式一起变化 但是变化的内容不同

#alter_sale .a a:hover{ 
    color: red;
}
#alter_sale .a a:hover .xlwb{
    background: url("../img/icons-1.png") no-repeat -140px -880px; /*偏移量量一下*/
}

CSS 

/**************************************************
*****************页面的售后服务部分的样式**************
***************************************************/

#alter_sale{
	height: 200px;
	background-color: #fff;
}
#alter_sale ul{
	width: 1100px;
	margin: 0px auto;
	padding-top: 20px;
}
#alter_sale ul li{
	width: 140px;
	float: left;
	text-align: center;
	margin: 0 20px;
}
#alter_sale ol li{
	line-height: 30px;
}
#alter_sale ol li:first-child a{
	font-weight: bold;
}
#alter_sale .a{
	position: relative;
}

/*新浪微博图标的设置*/
#alter_sale  .xlwb{
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url("../img/icons-1.png") no-repeat 0px -880px; /*偏移量量一下*/
	position: absolute;
	left: 5px;
	top: 3px;
}
#alter_sale .a a:hover{
	color: red;
}
#alter_sale .a a:hover .xlwb{
	background: url("../img/icons-1.png") no-repeat -140px -880px; /*偏移量量一下*/
}
/*腾讯微博图标的设置*/
#alter_sale  .txwb{
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url("../img/icons-1.png") no-repeat 0px -908px; /*偏移量量一下*/
	position: absolute;
	left: 5px;
	top: 3px;
}
#alter_sale .a a:hover .txwb{
	background: url("../img/icons-1.png") no-repeat -140px -908px; /*偏移量量一下*/
}



/*人人网图标的设置*/
#alter_sale  .rrw{
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url("../img/icons-1.png") no-repeat 0px -938px; /*偏移量量一下*/
	position: absolute;
	left: 5px;
	top: 3px;
}
#alter_sale .a a:hover .rrw{
	background: url("../img/icons-1.png") no-repeat -140px -938px; /*偏移量量一下*/
}


/*qq空间图标的设置*/
#alter_sale  .qqkj{
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url("../img/icons-1.png") no-repeat 0px -854px; /*偏移量量一下*/
	position: absolute;
	left: 5px;
	top: 3px;

}
#alter_sale .a a:hover .qqkj{
	background: url("../img/icons-1.png") no-repeat -140px -854px; /*偏移量量一下*/
}

#alter_sale  .b span{
	display: inline-block;
	width: 33px;
	height: 33px;
	background: url("../img/icons.png") no-repeat 0px 0px; /*偏移量量一下*/
	position: absolute;
	left: -35px;

}
#alter_sale  .b a{
	color: #00925f;
	font-size: 17px;
	position: relative;
}
#alter_sale  .c,.e a{
	font-size: 8px;

}
#alter_sale  .d a span{
	display: inline-block;
	width: 33px;
	height: 33px;
	background: url("../img/icons.png") no-repeat -38px 0px; /*偏移量量一下*/
	position: absolute;
	left: -55px;


}
#alter_sale  .d a{
	color: #00925f;
	font-size: 17px;
	position: relative;
}

 HTML

	<!-- 页面的售后服务 -->
	<div id="alter_sale">
		<div class="container">
			<ul>
				<li>
					<ol>
						<li><a href="#">关于我们</a></li>
						<li><a href="#">关于OPPO</a></li>
						<li><a href="#">新闻中心</a></li>
						<li><a href="#">人才招聘</a></li>
						
					</ol>
				</li>

				<li>
					<ol>
							<li><a href="#">推荐机型</a></li>
							<li><a href="#">N3</a></li>
							<li><a href="#">R5</a></li>
							<li><a href="#">R1C</a></li>
							<li><a href="#">Find 7</a></li>
					</ol>
				</li>

				<li>
					<ol>
							<li><a href="#">购物相关</a></li>
							<li><a href="#">帮助中心</a></li>
							<li><a href="#">周边产品</a></li>
							<li><a href="#">OPPO体验店</a></li>
							<li><a href="#">客户服务政策</a></li>
					</ol>
				</li>

				<li>
					<ol>
							<li><a href="#">会员中心</a></li>
							<li><a href="#">产品注册</a></li>
							<li><a href="#">会员注册</a></li>
							<li><a href="#">会员登录</a></li>
					</ol>
				</li>

				<li>
					<ol>
							<li><a href="#">关注我们</a></li>
							<li class="a">
								<a href="#">
									<span class="xlwb"></span>新浪微博</a>
								</li>
							<li class="a"><a href="#"><span class="txwb"></span>腾讯微博<li></a></li>
							<li class="a"><a href="#"><span class="rrw"></span>人人网</a></li>
							<li class="a"><a href="#"><span class="qqkj"></span>QQ空间</a></li>
					</ol>
				</li>

				<li>
					<ol>
							<li><a href="#">联系我们</a></li>
							<li class="b"><a href="#"><span></span>4001-666-88</a></li>
							<li class="c">
								<a href="#">7*24小时客服电话
							</a></li>
							<li class="d"><a href="#"><span></span>在线客服</a></li>
							<li class="e"><a href="#">服务时段：8:30-22:00</a></li>

					</ol>
				</li>

			</ul>
		</div>
	</div>