vivo页面

我就是我 2022-05-27 02:24 164阅读 0赞

![20180409235100140][] ![20180409235109129][]

<!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>

[20180409235100140]: https://img-blog.csdn.net/20180409235100140
[20180409235109129]: /images/20220527/29b859a2b5d346f589d8b02bcb928039.png