<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
</head>
<body>
<!-- 第一个大盒子 -->
<div class="box">
<!-- logo部分 -->
<div class="nav w">
<img src="images/logo.jpg" alt="">
<ul>
<li><a href="#">手机</a></li>
<li><a href="#">品牌</a></li>
<li><a href="#">商城</a></li>
<li><a href="#">体验店</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<li><a href="#">ColorOS</a></li>
<li><a href="#">云服务</a></li>
</ul>
</div>
<div class="biaoti w">
<p class="bt1">真诚服务,如友相随</p>
<p class="bt2">欢迎使用 OPPO 服务</p>
</div>
<div class="search w">
<i class="iconfont icon-icon-"></i>
<input type="text" placeholder="请输入你的问题 ">
</div>
</div>
<div class="wenzi w">自助服务</div>
<!-- 第三个大盒子 -->
<div class="xinxi w">
<ul>
<li>
<a href="#">
<i class="icon"></i>
<p class="name">零配件价格</p>
<p class="desc">通过手机型号查询手机配件和手机附件的参考价格。</p>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<p class="name">零配件价格</p>
<p class="desc">通过手机型号查询手机配件和手机附件的参考价格。</p>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<p class="name">零配件价格</p>
<p class="desc">通过手机型号查询手机配件和手机附件的参考价格。</p>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<p class="name">零配件价格</p>
<p class="desc">通过手机型号查询手机配件和手机附件的参考价格。</p>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<p class="name">零配件价格</p>
<p class="desc">通过手机型号查询手机配件和手机附件的参考价格。</p>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<p class="name">零配件价格</p>
<p class="desc">通过手机型号查询手机配件和手机附件的参考价格。</p>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<p class="name">零配件价格</p>
<p class="desc">通过手机型号查询手机配件和手机附件的参考价格。</p>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<p class="name">零配件价格</p>
<p class="desc">通过手机型号查询手机配件和手机附件的参考价格。</p>
</a>
</li>
</ul>
</div>
<!-- 第四个盒子 -->
<div class="four">
<div class="zhuti w">
热门主题
</div>
<div class="fuwu w">
<div class="left1">
<p class="l11">简单一“点”，OPPO 服务都在这儿</p>
<p class="l12">OPPO 会员 APP 新增服务版块，专业问题搜索、9大常用功能整合、个性化服务推送，随时随地为您服务！好的服务，不用等待！</p>
<p class="l13">查看话题</p>
</div>
<div class="right1">
<a href="#"><img src="images/service-topic-app.jpg" alt=""></a>
</div>
</div>
<div class="word w">
<div class="left2">
<div class="l21">带你进入 ColorOS 3.2 的新世界</div>
<div class="l22">ColorOS 3.2 全新智慧升级，为用户个性化定制“恰到好处”的智能解决方案，更易用、更贴心、更省心。</div>
<div class="l23">查看话题</div>
</div>
<div class="right2">
<a href="#"><img src="images/service-topic-os3.jpg" alt=""></a>
</div>
</div>
</div>
<!-- 第五个盒子 -->
<div class="five">
<div class="left">
<p class="left1">服务政策</p>
<p class="left2">OPPO 竭尽所能为你提供更优质的服务体验。</p>
<a href="#" class="left3">了解更多</a>
</div>
<div class="right">
<div class="right1">授权网店</div>
<div class="right2">OPPO 竭尽所能维护你应有的权利。</div>
<a href="#" class="right3">了解更多</a>
</div>
</div>
<!-- 第六个盒子 -->
<div class="six">
<div class="six1 w">
<div class="zuo">
<ul>
<li><a href="#" class="yi">推荐机型</a></li>
<li><a href="#">R11s</a></li>
<li><a href="#">A73</a></li>
<li><a href="#">A57</a></li>
<li><a href="#">A79</a></li>
</ul>
<ul>
<li><a href="#" class="yi">推荐机型</a></li>
<li><a href="#">R11s</a></li>
<li><a href="#">A73</a></li>
<li><a href="#">A57</a></li>
<li><a href="#">A79</a></li>
</ul>
<ul>
<li><a href="#" class="yi">推荐机型</a></li>
<li><a href="#">R11s</a></li>
<li><a href="#">A73</a></li>
<li><a href="#">A57</a></li>
<li><a href="#">A79</a></li>
</ul>
<ul>
<li><a href="#" class="yi">推荐机型</a></li>
<li><a href="#">R11s</a></li>
<li><a href="#">A73</a></li>
<li><a href="#">A57</a></li>
<li><a href="#">A79</a></li>
</ul>
</div>
<div class="you">
<a href="#"><i class="iconfont icon-chaoaiwawa"></i><i class="text">在线客服</i></a>
<p class="s1">4001-666-888</p>
<p class="s2">24 小时全国热线</p>
</div>
</div>
</div>
<!-- 第七个盒子 -->
<div class="footer">
<div class="w">
<p>© 2005 - 2018 OPPO 版权所有 粤ICP备08130115号-1 联系方式：4001-666-888 </p>
<ul>
<li>关注我们：</li>
<li class="iconfont icon-xinlang"></li>
<li class="iconfont icon-zhifubao"></li>
<li class="iconfont icon-webao"></li>
<li class="line">|</li>
<li class="iconfont icon-diqiu"></li>
<li>Global</li>
</ul>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clearfix::after,
.clearfix::before {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.w {
width: 1200px;
margin: 0 auto;
}
body {
font: 12px/100% "方正悠黑";
background-color: #f6f6f6;
}
.box {
width: 100%;
height: 770px;
background: url(images/banner.jpg) no-repeat center center;
}
.box .nav {
height: 41px;
}
.nav img {
float: left;
line-height: 41px;
padding-top: 23px;
}
.nav ul {
float: left;
margin-left: 94px;
}
.nav ul li {
float: left;
line-height: 41px;
padding: 10px 27px 0 27px;
}
.nav ul li a {
font-size: 16px;
color: #000;
line-height: 41px;
}
.biaoti {
width: 330px;
text-align: center;
margin-top: 130px;
}
.biaoti .bt1 {
font-size: 37px;
font-weight: 700;
}
.biaoti .bt2 {
margin-top: 29px;
font-size: 22px;
}
.search {
width: 650px;
height: 50px;
background-color: #fff;
border-radius: 25px;
margin-top: 35px;
line-height: 50px
}
.search i.icon-icon- {
font-size: 35px;
float: left;
width: 50px;
height: 50px;
text-align: center;
}
.search input {
float: left;
width: 505px;
height: 50px;
outline: none;
border: 0;
}
.wenzi {
height: 226px;
font-size: 34px;
font-weight: 700;
line-height: 226px;
text-align: center;
}
.xinxi {
height: 720px;
}
.xinxi ul li {
float: left;
margin-right: 8px;
margin-bottom: 8px;
height: 360px;
width: 294px;
background-color: #ffffff;
}
.xinxi ul li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
.xinxi ul li:nth-child(4n) {
margin-right: 0px;
}
.xinxi ul li:nth-child(n+5) {
margin-bottom: 0px;
}
.xinxi ul li a .icon {
display: block;
width: 100px;
height: 70px;
background: url("images/精灵图.jpg");
margin: 44px auto 22px;
}
.xinxi ul li a .name {
font-size: 20px;
font-weight: 700;
line-height: 20px;
color: #000;
}
.xinxi ul li a .desc {
font-size: 16px;
padding: 0 35px;
line-height: 32px;
margin-top: 60px;
color: #7c7a7d;
}
/* 第四个大盒子 */
.four {
height: 947px;
margin-top: 83px;
background-color: #fff;
}
.four .zhuti {
height: 196px;
font-size: 34px;
font-weight: 700;
text-align: center;
line-height: 196px;
}
.four .fuwu,
.four .word {
height: 375px;
border-top: 1px solid #ededed;
}
.four .fuwu .left1,
.four .word .left2{
float: left;
width: 330px;
}
.four .fuwu .left1 .l11,
.four .word .left2 .l21{
margin-top: 57px;
font-size: 27px;
font-weight: 700;
line-height: 47px;
}
.four .fuwu .left1 .l12,
.four .word .left2 .l22 {
margin-top: 20px;
font-size: 16px;
line-height: 36px;
}
.four .fuwu .left1 .l13,
.four .word .left2 .l23 {
margin-top: 16px;
font-size: 16px;
}
.four .fuwu .right1,
.four .word .right2{
float: left;
margin-top: 57px;
margin-left: 273px;
}
/* 第五个盒子 */
.five {
height: 168px;
background-color: #fff;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
}
.five .left {
float: left;
margin-left: 199px;
width: 599px;
height: 116px;
text-align: center;
border-right: 1px solid #ededed;
margin-top: 26px;
}
.five .right {
float: left;
margin-top: 26px;
width: 465px;
height: 116px;
text-align: center;
padding-left: 135px;
}
.five .left .left1,
.five .right .right1 {
font-size: 21px;
font-weight: 700;
/* text-align: center; */
margin-top: 40px;
}
.five .left .left2,
.five .right .right2 {
font-size: 14px;
color: #d7dbde;
margin-top: 20px;
}
.five .left .left3,
.five .right .right3 {
display: inline-block;
font-size: 14px;
margin-top: 16px;
color: #000;
}
/* 第六个盒子 */
.six {
height: 270px;
background-color: #fff;
border-bottom: 1px solid #ededed;
}
.six1 .zuo {
/* background-color: black; */
float: left;
margin-top: 60px;
}
.six1 .zuo ul {
float: left;
margin-right: 130px;
}
.six1 .zuo ul li {
margin-bottom: 18px;
font-size: 10px;
color: #687679;
}
.six1 .zuo ul li .yi {
font-size: 12px;
color: #000;
}
.six1 .you {
float: right;
width: 173px;
height: 120px;
margin-top: 50px;
}
.six1 .you a {
display: block;
width: 173px;
height: 51px;
text-align: center;
line-height: 51px;
background-color: #656565;
border-radius: 25px;
color: #fff;
}
.six1 .you a i.icon-chaoaiwawa {
font-size: 36px;
float: left;
margin-left: 30px;
margin-right: 5px;
}
.six1 .you a i.text {
font-size: 16px;
float: left;
}
.six1 .you .s1 {
float: right;
font-size: 20px;
line-height: 20px;
margin-top: 20px;
}
.six1 .you .s2 {
float: right;
margin-top: 14px;
}
/* 第七个盒子 */
.footer {
height: 109px;
background-color: #fff;
}
.footer p {
float: left;
margin-top: 30px;
}
.footer ul {
float: right;
margin-top: 26px;
}
.footer ul li {
float: left;
height: 20px;
line-height: 20px;
margin-right: 12px;
}
.footer ul li:nth-child(2),
.footer ul li:nth-child(3),
.footer ul li:nth-child(4),
.footer ul li:nth-child(6) {
font-size: 18px;
} |
|
收藏
淘帖
踩
