<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
/*背景图*/
.nav {
height: 850px;
background: url(images/vivo-banner-x9smsh-bg.jpg);
overflow: hidden;
position: relative;
}
/*头部通栏*/
.head {
height: 44px;
background: rgba(0, 0, 0, 0.5);
}
.head div {
width: 1232px;
height: 44px;
margin: 0 auto;
/*text-align: center;*/
position: relative;
}
.head div >a {
position: absolute;
left: 0;
top: 0;
}
.head div ul {
width: 750px;
height: 44px;
margin-left: 240px;
}
.head div li a {
color: #ffffff;
float: left;
display: block;
height: 100%;
line-height: 44px;
padding: 0 20px;
font-size: 14px;
transition: ease 0.4s;
}
.head div li a:hover {
color: rgba(255, 255, 255, 0.6);
}
/*大图*/
.body {
width: 944px;
height: 806px;
margin: 0 auto;
overflow: hidden;
}
.vivo-body {
width: 314px;
height: 236px;
/*background: pink;*/
margin: 254px 0 0 50px;
position: relative;
}
.vivo-body img {
display: block;
width: 314px;
height: 56px;
}
.vivo-body span {
/*display: block;*/
text-align: center;
color: #fff;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -30px;
font-size: 14px;
}
.vivo-body span::after {
content: "";
background: #fff;
width: 22px;
height: 1px;
left: 18px;
position: absolute;
bottom: -3px;
left: 17px
}
.vivo-tu img {
position: absolute;
right: -230px;
bottom: -288px;
}
/*第三排通栏部分*/
.vivo-f {
height: 300px;
/*background: pink;*/
}
.vivo-f li {
width: 337px;
height: 300px;
float: left;
/*background: pink;*/
position: relative;
text-align: center;
}
.vivo-f li:first-child {
background: url(images/vivo-promos-x9smgj2.jpg) no-repeat -150px 0px;
}
.vivo-f li:nth-child(2) {
background: url(images/vivo-promos-sr1001.jpg) no-repeat -150px 0px;
}
.vivo-f li:nth-child(3) {
background: url(images/vivo-promos-y66.jpg) no-repeat -150px 0px;
}
.vivo-f li:last-child {
background: url(images/vivo-promos-photo1009.jpg) no-repeat -150px 0px;
}
.vivo-f li h4 {
margin-top: 42px;
font-weight: normal;
font-size: 16px;
font-family: "楷体";
}
.vivo-f li p {
margin-top: 10px;
font-size: 16px;
font-family: "楷体";
}
.vivo-f li img {
position: absolute;
left: -150px;
top: 0;
}
/*官方购买*/
.vivo-b {
height: 360px;
/*background: pink;*/
}
.vivo-b .vivo-t {
width: 1200px;
height: 260px;
/*background: pink;*/
margin: 0 auto;
}
.vivo-b .vivo-t ul li {
width: 194px;
height: 169px;
font-family: "楷体";
float: left;
margin: 30px 0;
}
.vivo-b .vivo-t ul li:last-child {
width: 230px;
height: 108px;
float: right;
/*background: pink;*/
}
.vivo-b .vivo-t ul li:last-child p {
float: right;
overflow: hidden;
}
.vivo-b .vivo-t ul li:last-child span {
float: right;
padding: 3px 8px;
border: 1px solid skyblue;
color: skyblue;
border-radius: 15px;
cursor: pointer;/*鼠标小手*/
}
.vivo-b .vivo-t ul li:last-child span:hover {
background: skyblue;
color: #fff;
}
.vivo-b .vivo-t ul li:last-child h3 {
float: right;
font-size: 30px;
margin: 14px 0;
}
.vivo-b .vivo-t dt {
font-size: 14px;
color: #000;
font-weight: normal;
margin-bottom: 20px;
}
.vivo-b .vivo-t dd a {
display: block;
padding-bottom: 7px;
font-size: 12px;
font-weight: normal;
color: #000;
}
.vivo-b .vivo-a {
width: 1200px;
height: 100px;
/*background: pink;*/
margin: 0 auto;
border-top: 1px solid #f2f2f2;
}
.vivo-b .vivo-a p {
font-size: 10px;
font-family: "楷体";
margin-top: 40px;
float: left;
}
.vivo-b .vivo-a ol li:first-child {
border-left: 1px solid #f2f2f2;
padding-right: 0;
}
.vivo-b .vivo-a ol li {
float: right;
font-size: 10px;
font-family: "楷体";
margin-top: 40px;
padding: 0 15px;
}
/*末尾*/
</style>
</head>
<body>
<div class="nav">
<!-- 头部通栏 -->
<div class="head">
<div>
<a href="#"><img src="images/logo.png" alt=""></a>
<ul>
<li><a href="#">Xplsy系列</a></li>
<li><a href="#">X系列</a></li>
<li><a href="#">Y商城</a></li>
<li><a href="#">商城</a></li>
<li><a href="#">Funtouch OS</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<li><a href="#">搜索</a></li>
<li><img src="" alt=""></li>
</ul>
<span></span>
</div>
</div>
<!-- 大图 -->
<div class="body">
<div class="vivo-body">
<a href="#"><img src="images/vivo-banner-x9smsh-title1-v2-big.png" alt=""></a>
<a href="#"><img src="images/vivo-banner-x9smsh-title2-v2-big.png" alt=""></a>
<a href="#"><img src="images/vivo-banner-x9smsh-title3-v2-big.png" alt=""></a>
<span>查看详细</span>
</div>
</div>
<div class="vivo-tu">
<img src="images/vivo-banner-x9smsh-figure2-big.png" alt="">
</div>
</div>
<!-- 第三排通栏部分 -->
<div class="vivo-f">
<ul>
<li>
<h4>X9s</h4>
<p>查看详细</p>
<a href="#">
<img src="" alt="">
</a>
</li>
<li>
<h4>10月生日会，一起来参加吧</h4>
<p>立即参与</p>
<a href="#">
<img src="" alt="">
</a>
</li>
<li>
<h4>Y66</h4>
<p>查看详细</p>
<a href="#">
<img src="" alt="">
</a>
</li>
<li>
<h4>摄影专区</h4>
<p>X20镜头下的那些逆光故事</p>
<a href="#">
<img src="" alt="">
</a>
</li>
</ul>
</div>
</div>
<!-- 官方购买 -->
<div class="vivo-b">
<div class="vivo-t">
<ul>
<li>
<dl>
<dt>热门链接</dt>
<dd><a href="#">X9Plus</a></dd>
<dd><a href="#">X9</a></dd>
<dd><a href="#">Xplay6</a></dd>
<dd><a href="#">查找手机</a></dd>
<dd><a href="#">体验中心</a></dd>
<dd><a href="#">常见问题</a></dd>
</dl>
</li>
<li>
<dl>
<dt>在线购买</dt>
<dd><a href="#">官方商城</a></dd>
<dd><a href="#">选购手机</a></dd>
<dd><a href="#">选购配件</a></dd>
<dd><a href="#">选购碎屏宝</a></dd>
<dd><a href="#">服务保障</a></dd>
</dl>
</li>
<li>
<dl>
<dt>服务支持</dt>
<dd><a href="#">服务首页</a></dd>
<dd><a href="#">服务网点查询</a></dd>
<dd><a href="#">真伪查询</a></dd>
<dd><a href="#">服务政策</a></dd>
<dd><a href="#">预约维修</a></dd>
<dd><a href="#">维修配件价格</a></dd>
</dl>
</li>
<li>
<dl>
<dt>vivo社区</dt>
<dd><a href="#">社区首页</a></dd>
<dd><a href="#">摄影专区</a></dd>
<dd><a href="#">微博</a></dd>
<dd><a href="#">贴吧</a></dd>
<dd><a href="#">兴趣部落</a></dd>
</dl>
</li>
<li>
<dl>
<dt>关于vivo</dt>
<dd><a href="#">vivo简介</a></dd>
<dd><a href="#">工作机会</a></dd>
<dd><a href="#">新闻资讯</a></dd>
<dd><a href="#">采购平台</a></dd>
<dd><a href="#">开发者平台</a></dd>
</dl>
</li>
<li>
<p>24小时全国服务热线:</p>
<h3>400-678-9688</h3>
<span>在线客服</span>
</li>
</ul>
</div>
<div class="vivo-a">
<p>Copyright ©2011-2017 广东步步高电子工业有限公司 版权所有 保留一切权利 | 隐私政策 | 法律声明 | 粤B2-20080267 | 粤ICP备05100288号 </p>
<ol>
<li><a href="#">国际官网</a></li>
<li><a href="#">关注vivo</a></li>
</ol>
</div>
</div>
</div>
<!-- 末尾 -->
</body>
</html>