分析样式:
一共六块(整体可以使用列表)
里面的每一小块实际上也是一个列表;
实现效果:
有一个父子样式的跟随 子样式的背景图片的样式跟随父样式一同变化----鼠标触发
实现父子样式一起变化 但是变化的内容不同
#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>