综合设计一个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>

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

综合设计一个OPPE主页--页面的插件引用（animate.css）--d动画的使用--滚轮或鼠标到该位置时，才有动画的切换---所以我们需要用jquery监听鼠标滚轮的滚动事件
Animate.css | A cross-browser library of CSS animations. 里面有许多css的效果首先使用 animate.css文件 link rel=&qu ...
综合设计一个OPPE主页--页面的底部
分析结构: 在一行里面, 一个图片,文字实现效果: HTML: <!DOCTYPE html> <html lang="en"> <head> ...
综合设计一个OPPE主页--页面的精选配件的设计
先进行样式的分析 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
综合设计一个OPPE主页--页面的搜素欧珀部分的样式
首先进行样式分析: 样式相同的可以放在列表里面 HTML部分 <!DOCTYPE html> <html lang="en"> <head>&l ...
综合设计一个OPPE主页--页面服务部分
分析:五个部分形式相同除了内容不同 ---------------使用列表做-ul-li 每一个列表里面都有图片和文字 ------图文混排----使用dl-----dt图片 dd文字 HTML ...
综合设计一个OPPE主页--页面的插件引用（swiper.css）--页面横幅部分
swiper.js .css的插件的导入 Swiper演示 - Swiper3|Swiper中文网引入js Swiper使用方法 - Swiper中文网可以查看文档对照使用查看效果: 图片过大 ...
综合设计一个OPPE主页--明星机型的设计
先进行页面的分析是上下分还是左右分上下分两块第二块分成四个部分的相似元素 ,所以整体可以使用列表来做li里面有图片型号价格文字等结构设计开始页面的样式设计 /*初始化样式*/ /*将默 ...
综合设计一个OPPE主页--布局与初始化
首先建立一个站点文件夹--保存网页的所有信息 id做页面的布局 class做页面的样式 <!DOCTYPE html> <html lang="en"> & ...
综合设计一个OPPE主页--导航栏的设计
先进行内容框分析在样式设置 /*初始化样式*/ /*将默认的样式清零*/ *{padding: 0;margin: 0; } /*清除列表前面的标识 */ ol,ul{list-style-type ...

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

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

最新文章

热门文章