小米静态页面

快来打我* 2022-05-27 00:56 203阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		* {
    			padding: 0;
    			margin: 0;
    		}
    		.header {
    			background-color: #fff;
    			height: 1200px;
    			width: 100%;
    		}
    		.five2 .nav1 li:nth-child(8):hover {
    			box-shadow: 0 0 0 0 ;
    		}
    		.five2 .nav1 li div {
    			transition: 0.5s;
    		}
    		.five2 .nav1 li>div:hover {
    			box-shadow: 0 1px 20px 2px #000;
    		}
    		.five2 .nav1 li {
    			transition: 0.5s;
    		}
    		.five2 .nav1 li:hover {
    			box-shadow: 0 1px 20px 2px #000;
    		}
    		.four2 div {
    			transition: 0.4s
    		}
    		.four2 div:hover {
    			box-shadow: 0 1px 20px 2px #000;
    		}
    		body {
    			background-color: #fafaf8
    		}
    		input {
    			outline: 0;/* 清除外边线*/
    		}
    		ul {
    			list-style: none;
    		}
    		a {
    			text-decoration: none;
    			font-family: "楷体";
    		}
    /*通栏*/		
    		.daohang {
    			height: 40px;
    			background-color: #333333;
    		}
    
    /*版心*/		
    		.daohang .nav {
    			width: 1226px;
    			height: 40px;
    			/*background-color: pink;*/
    			margin: 0 auto ;
    		}
    		.ul1 a {
    			float: left;
    			margin: 14px 0 0 8px;
    			font-size: 12px;
    			color: #fff;
    
    		}
    		.ul2 a {
    			float: right;
    			margin: 12px 10px;
    			font-size: 12px;
    			color: #fff;
    		}
    		.daohang .nav a:hover {
    			background-color: #fff;
    			color: #000;
    			box-shadow: 0 0 20px 20px #fff;
    			border-radius: 15px;
    		}
    
    /*版心第二排*/
    		.one {
    			width: 1226px;
    			height: 100px;
    			/*background-color: red;*/
    			margin: 0 auto;
    			box-sizing: border-box;
    		}
    		.one img {
    			margin-top: 22px;
    			float: left;
    		}
    		.one ul {
    			margin-left: 179px;
    			float: left;
    			height: 100px;
    			line-height: 100px;
    		}
    		.one li {
    			float: left;
    		}
    		.one ul a {
    			color: #000;
    			margin: 0 10px;
    		}
    		.one ul a:hover {
    			background-color: #fff;
    			border-radius: 15px;
    			box-shadow: 0 0 20px 20px #beefed;
    		}
    		.one .one1 {
    			width: 294px;
    			height: 49px;
    			/*background-color: skyblue;*/
    			float: right;
    			margin: 25px 0;
    			border: 1px solid #dedede;
    			position: relative;
    		}
    		.one1 input[type=text] {
    			height: 49px;
    			width: 224px;
    			/*background-color: red;*/
    			float: left;
    			border: 0;
    			padding-left: 10px;
    		}
    		.one1 input[type=submit] { 
    			height: 49px;
    			width: 60px;
    			float: left;
    			border: 0;
    			background: url("sousuo.png") no-repeat center #fff;
    			border-left: 1px solid #dedede;
    		}
    		/*.one1 img {
    			width: 60px;
    			height: 49px;
    			float: right;
    		}*/
    
    /*版心第三排*/
    		.two {
    			height: 460px;
    			width: 1226px;
    			/*background-color: pink;*/
    			margin: 0 auto;
    			box-sizing: border-box;
    		}
    		.two1 {
    			height: 435px;
    			width: 234px;
    			background-color: #625D58;
    			float: left;
    			padding-top: 25px;
    		}
    		.two .two1 li {
    			padding: 10px 20px;
    			display: block;
    			padding-left: 
    		}
    		.two .two1 a {
    			color: #fff;
    		}
    		.two .two1 li:hover {
    			background-color: #000;
    			border-radius: 15px;
    			box-shadow: 0 0 20px 20px #fff;
    		}
    		.two img {
    			float: right;
    		}
    		.two1 span {
    			float: right;
    		}
    
    /*版心第四排*/
    	.three {
    		width: 1226px;
    		height: 170px;
    		background-color: pink;
    		margin: 10px auto;
    	}
    	.three1 {
    		height: 170px;
    		width: 234px;
    		background-color: #5F5750;
    		float: left;
    	}
    	.three2 {
    		height: 170px;
    		width: 992px;
    		/*background-color: blue;*/
    		float: right;
    	}
    	.three2 img {
    		width: 330px;
    		height: 170px;
    		float: left;
    	}
    	.three1 li {
    		float: left;
    		width: 78px;
    		height: 85px;
    		line-height: 85px;
    		text-align: center;
    	}
    	.three1 li a {
    		color: #fff;
    		font-weight: 700;
    	}
    	.three1 li img {
    		display: block;
    		margin: 0 auto;
    	}
    	
    /*版心第五排*/
    	.four {
    		width: 1226px;
    		height: 424px;
    		/*background-color: pink;*/
    		margin: 0 auto 40px;
    	}
    	.four1 {
    		width: 1226px;
    		height: 84px;
    	/*	background-color: red;*/
    	}
    	.four1 h3 {
    		float: left;
    		margin-top: 43px;
    	}
    	.four1 div {
    		float: right;
    		width: 70px;
    		height: 22px;
    		
    		margin-top: 50px; 
    	}
    	input:nth-child(1) {
    		width: 35px;
    		height: 22px;
    		float: left;
    		background: url("zuo.png") no-repeat ;
    	}
    	input:nth-child(2) {
    		width: 35px;
    		height: 22px;
    		float: left;
    		background: url("you.png") no-repeat ;
    	}
    	.four2 {
    		height: 338px;
    		width: 1224px;
    		/*background-color: #fafaf9;*/
    	}
    	.four2 div {
    		width: 234px;
    		height: 336px;
    		background-color: #fafaf9;
    		float: left;
    		margin-right: 13px;
    		text-align: center;
    		border-top: 1px solid orange ;
    	}
    	.four2 div:nth-child(2n) {
    		border-top: 1px solid #E53935;
    	}
    	.four2 div:nth-child(5) {
    		margin-right: 0;
    		border-top: 1px solid #00C0A5;
    	}
    	.four2 div img {
    		margin: 46px auto 25px;
    	}
    	.four2 div h4 {
    		font-weight: normal;
    		font-size: 16px;
    		margin-bottom: 10px;
    	}
    	.four2 div p {
    		margin-bottom: 10px;
    		font-size: 14px;
    		color: #B0B0B0
    	}
    	.four2 div a {
    		color: #FF6709
    	}
    
    /*版心第六排*/
    		.five {
    			width: 1226px;
    			height: 732px;
    			/*background-color: pink;*/
    			margin: 0 auto 0;
    			overflow: hidden;
    		}
    /*第一个盒子*/
    		.five1 {
    			height: 40px;
    			width: 1226px;
    			/*background-color: red;*/
    		}
    		.five1 h4 {
    			height: 40px;
    			float: left;
    		}
    		.five1 ul li {
    			float: right;
    			margin-right: 30px;
    		}
    		.five1 ul li:nth-child(1) {
    			margin-right: 0;
    		}
    		.five1 li .remen {
    			color: #FF6700;
    			border-bottom: 2px solid #FF6700;
    		}
    /*第二个盒子*/
    		.five2 {
    			width: 1226px;
    			height: 614px;
    		}
    		.xiaobai >div {
    			width: 234px;
    			height: 119px;
    			/*background-color: red;*/
    		}
    		.five .xiaobai div:nth-child(1) {
    			margin-bottom: 14px;
    			float: left;
    			margin-left: 10px;
    			padding-top: 23px;
    			overflow: hidden;
    		}
    		.five .xiaobai div:nth-child(2) {
    			margin-bottom: 14px;
    			float: left;
    			margin-left: 10px;
    			padding-top: 23px;
    			overflow: hidden;
    		}
    		.five .xiaobai img {
    			float: right;
    			margin-right: 32px;
    		}
    		.five .xiaobai div {
    			float: left;
    		}
    		.five2 .nav {
    			width: 234px;
    			height: 614px;
    			/*background-color: blue;*/
    			float: left;
    			overflow: hidden;
    		}
    		.five2 .nav1 {
    			width: 992px;
    			height: 614px;
    			/*background-color: #fafaf9;*/
    			float: right;
    		}
    		.nav1 li {
    			width: 234px;
    			height: 299px;
    			background-color: #FFFFFF;
    			float: left;
    			margin: 0 0 14px 14px;
    			text-align: center;
    		}
    		.nav1 li img {
    			margin: 20px auto 46px;
    		}
    		.nav1 li h4 {
    			font-weight: normal;
    			font-size: 16px;
    			margin: 15px auto;
    		}
    		.nav1 li p {
    			font-size: 14px;
    			color: #B0B0B0;
    		}
    		.nav1 li a {
    			color: #FF6700;
    		}
    		.nav1 li s {
    			color: #B0B0B0;
    		}
    
    /*热评产品*/
    	.ten {
    		height: 456px;
    		width: 1226px;
    		/*background-color: pink;*/
    		margin: 40px auto 0;
    	}
    	.ten div:nth-child(1) {
    		height: 40px;
    		width: 1226px;
    		/*background-color: red;*/
    	}
    	.ten div:nth-child(2) {
    		height: 416px;
    		width: 1226px;
    		/*background-color: pink;*/
    	}
    	.ten .ten1 div {
    		height: 416px;
    		width: 296px;
    		background-color: #fff;
    		float: left;
    		margin-right: 14px;
    	}
    	.ten .ten1 div:nth-child(4) {
    		margin-right: 0;
    	}
    	.ten .ten1 div h4 {
    		margin-top: 34px;
    		margin-left: 28px; 
    		margin-bottom: 39px;
    	}
    	.ten .ten1 div p {
    		margin-top: 50px;
    		margin-left: 28px;
    		margin-bottom: 16px;
    	}
    /*为你推荐*/
    		.fast {
    			height: 342px;
    			width: 1226px;
    			/*background-color: pink;*/
    			margin: 0 auto;
    		}
    		.fast1 {
    			width: 1226px;
    			height: 40px;
    			/*background-color: red;*/
    		}
    		.fast1 h3 {
    			float: left;
    		}
    		.fast1 div {
    			float: right;
    		}
    		.fast2 {
    			width: 1226px;
    			height: 302px;
    			/*background-color: blue;*/
    			overflow: hidden;
    		}
    		.fast2 div {
    			width: 234px;
    			height: 302px;
    			background-color: #FFFFFF;
    			float: left;
    			margin-right: 14px;
    			text-align: center;
    			padding-top: 20px;
    		}
    		.fast2 div h4 {
    			font-weight: normal;
    			margin: 14px auto ;
    		}
    		.fast2 div a {
    			color: #FF6700;
    		}
    		.fast2 div p {
    			color: #757575;
    			margin-top: 17px;
    			font-size: 14px;
    		}
    		.fast2 div:nth-child(5) {
    			margin-right: 0;
    		}
    /*内容*/
    		.neirong {
    			width: 1226px;
    			height: 460px;
    			/*background-color: pink;*/
    			margin: 40px auto 0;
    		}
    		.neirong div:nth-child(1) {
    			width: 1226px;
    			height: 40px;
    			position: relative;
    			/*background-color: red;*/
    		}
    		.neirong div:nth-child(2) {
    			width: 1226px;
    			height: 420px;
    			/*background-color: blue;*/
    		}
    		.neirong .neirong1 div {
    			height: 420px;
    			width: 296px;
    			background-color: #FFFFFF;
    			float: left;
    			margin-right: 14px;
    			text-align: center;
    		}
    		.neirong .neirong1 div:nth-child(4) {
    			margin-right: 0;
    		}
    		.neirong .neirong1 div h5 {
    			margin: 44px auto 25px;
    			color: #FFB813;
    		}
    		.neirong .neirong1 div p {
    			margin: 10px auto 20px;
    			color: #B0B0B0;
    		}
    		.neirong .neirong1 div img {
    			margin: 20px auto 0;
    		}
    		.neirong .neirong1 div .dingwei {
    			width: 76px;
    			height: 10px;
    			/*background-color: pink;*/
    			position: absolute;
    			bottom: 26px;
    			left: 50%;
    			margin-left: -33px;
    		}
    		.neirong .neirong1 div .dingwei div {
    			width: 8px;
    			height: 8px;
    			border: 0 ;
    			background-color: #B0B0B0;
    			float: left;
    			border-radius: 50%;
    		}
    		.neirong .neirong1 div .dingwei div:nth-child(1) {
    			background-color: #fff;
    			border: 2px solid #FF6700;
    		}
    		.neirong .neirong1 div ul {
    			width: 76px;
    			height: 10px;
    			/*background-color: pink;*/
    			margin: 14px auto;
    
    		}
    		.neirong .neirong1 div li {
    			width: 8px;
    			height: 8px;
    			border: 0 ;
    			background-color: #B0B0B0;
    			float: left;
    			border-radius: 50%;
    			margin-right: 15px;
    		}
    		.neirong .neirong1 div li:nth-child(1) {
    			background-color: #fff;
    			border: 2px solid #FF6700;
    		}
    /*视频*/
    		.shipin {
    			height: 325px;
    			width: 1226px;
    			/*background-color: pink;*/
    			margin: 40px auto 0;
    		}	
    		.shipin1 {
    			height: 40px;
    			width: 1226px;
    			/*background-color: red;*/
    		}
    		.shipin1 h3 {
    			float: left;
    		}
    		.shipin1 a {
    			float: right;
    			color: #424242;
    		}
    		.shipin1 span {
    			width: 20px;
    			height: 23px;
    			background-color: #B0B0B0;
    			margin-left: 8px;
    			border-radius: 15px;
    			padding: 0 7px ;
    		}
    		.shipin div:nth-child(2) {
    			width: 1226px;
    			height: 285px;
    			/*background-color: blue;*/
    		}
    		.shipin .shipin2 div {
    			width: 296px;
    			height: 285px;
    			background-color: #FFFFFF;
    			float: left;
    			margin-right: 14px;
    			text-align: center;
    		}
    		.shipin .shipin2 div:nth-child(4) {
    			margin-right: 0;
    		}
    		.shipin .shipin2 div img {
    			margin-bottom: 33px;
    		}
    		.shipin .shipin2 div h4 {
    			margin-bottom: 13px;
    			font-size: 16px;
    			font-weight: normal;
    		} 
    		.shipin .shipin2 div p {
    			color: #B0B0B0;
    			font-size: 14px;
    		}
    /*收尾*/
    		.shouwei {
    			height: 271px;
    			width: 1226px;
    			background-color: #FFFFFF;
    			margin: 62px auto ;
    		}
    		.shouwei1 {
    			height: 78px;
    			width: 1226px;
    			/*background-color: red;*/
    			margin: 0 auto;
    			overflow: hidden;
    			border-bottom: 1px solid #E0E0E0;
    		}
    		.shouwei1 a {
    			color: #616161;h
    		}
    		.shouwei1 h3 {
    			height: 25px;
    			width: 243px;
    			float: left;
    			text-align: center;
    			margin-top: 30px;
    			border-right: 1px solid #E0E0E0;
    		}
    		.shouwei2 {
    			height: 192px;
    			width: 1226px;
    			/*background-color: red;*/
    			margin: 0 auto;
    			overflow: hidden;
    		}
    		.shouwei2 dl {
    			float: left;
    			margin: 40px 52px;
    		}
    		.shouwei2 dd {
    			line-height: 28px;
    			color: #757575;
    			font-size: 14px;
    		}
    		.shouwei2 div {
    			border-left: 1px solid #E0E0E0;
    			width: 217px;
    			height: 192px;
    			background-color: #FFFFFF;
    			float: left;
    			text-align: center;
    		}
    		.shouwei2 div h2 {
    			color: #FF6700;
    			margin-top: 42px;
    		}
    		.shouwei2 div p {
    			font-size: 14px;
    		}
    		.shouwei2 div h4 {
    			width: 118px;
    			height: 28px;
    			border: 1px solid #FF6700;
    			margin: 18px auto 0;
    		}
    		.shouwei2 dt {
    			margin-bottom: 14px;
    			color: #424242;
    		}
    /*米*/
    		.mimi {
    			height: 166px;
    			width: 100%;
    			background-color: #FAFAFA;
    		}
    		.mimi div {
    			width: 1226px;
    			height: 166px;
    			/*background-color: pink;*/
    			margin: 0 auto;
    		}
    		.mimi div img {
    			margin-top: 30px;
    			float: left;
    		}
    		.mimi div h4 {
    			float: left;
    			margin-top: 30px;
    			color: #757575;
    		}
    		.mimi div p {
    			float: left;
    			font-size: 12px;
    			color: #BABABA;
    			/*padding-top: 30px;*/
    		}
    		.mimi div h3 {
    			margin: 0 auto;
    			text-align: center;
    			font-weight: normal;
    			color: #BABABA;
    		}
    	</style>
    </head>
    <body>
    
    	<div class="daohang">
    		<div class="nav">
    			<ul class="ul1">
    				<li><a href="#">小米商城</a></li>
    				<li><a href="#">MIUI</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="#">米聊</a></li>
    				<li><a href="#">小米商城手机版</a></li>
    				<li><a href="#">问题反馈</a></li>
    				<li><a href="#">Select Region</a></li>
    			</ul>
    			<ul class="ul2">
    				<li><a href="#">登录</a></li>
    				<li><a href="#">注册</a></li>
    				<li><a href="#">消息通知</a></li>
    				<li><a href="#">购物车</a></li>
    			</ul>
    		</div>
    	</div>
    	<div class="header">
    
    	<div class="one">
    		<img src="mi.png">
    		<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="#">智能硬件</a></li>
    			<li><a href="#">盒子</a></li>
    			<li><a href="#">服务</a></li>
    			<li><a href="#">社区</a></li>
    		</ul>
    		<div class="one1">
    			<input type="text" placeholder="红米4x  小米Note 3直降300">
    			<input type="submit" value="">
    		</div>
    	</div>
    
    	<div class="two">
    		<div class="two1">
    			<ul>
    				<li><a href="#">手机 电话卡<span>></span></a></li>
    				<li><a href="#">笔记本<span>></span></a></li>
    				<li><a href="#">电视 盒子<span>></span></a></li>
    				<li><a href="#">路由器 智能硬件<span>></span></a></li>
    				<li><a href="#">移动电源 电池 插板<span>></span></a></li>
    				<li><a href="#">耳机 音箱<span>></span></a></li>
    				<li><a href="#">保护套 贴膜<span>></span></a></li>
    				<li><a href="#">线材 支架 储存卡<span>></span></a></li>
    				<li><a href="#">箱包 服饰 鞋 眼镜<span>></span></a></li>
    				<li><a href="#">米兔 生活周边<span>></span></a></li>
    			</ul>
    		</div>
    		<div class="two2">
    			<a href="#"><img src="xiaomi.png" alt=""></a>
    		</div>
    	</div>
    
    	<div class="three">
    		<div class="three1">
    			<ul>
    				<li><img src="sj_r2_c2.png" alt=""><a href="#">选购手机</a></li>
    				<li><img src="" alt=""><a href="#">企业团购</a></li>
    				<li><img src="" alt=""><a href="#">F码通道</a></li>
    				<li><img src="" alt=""><a href="#">米粉卡</a></li>
    				<li><img src="" alt=""><a href="#">以旧换新</a></li>
    				<li><img src="" alt=""><a href="#">话费充值</a></li>
    			</ul>
    		</div>
    		<div class="three2">
    			<a href="#"><img src="tu2.png"></a>
    			<a href="#"><img src="tu3.png"></a>
    			<a href="#"><img src="tu4.png"></a>
    		</div>
    	</div>
    
    	<div class="four">
    		<div class="four1">
    			<h3>小米明星单品</h3>
    			<div>
    				<input type="submit" value="">
    				<input type="submit" value="">
    			</div>
    		</div>
    		<div class="four2">
    			<div>
    				<img src="tou.png" alt="">
    				<h4>米家智能摄像机云台版</h4>
    				<p>红外夜视 720P分辨率</p>
    				<a href="#">199元</a>
    			</div>
    			<div>
    				<img src="shouhuan.png" alt="">
    				<h4>小米手环 2</h4>
    				<p>OLED显示屏幕 升级计步算法</p>
    				<a href="#">149元</a>
    			</div>
    			<div>
    				<img src="yali.png" alt="">
    				<h4>米家智能摄像机云台版</h4>
    				<p>红外夜视 720P分辨率</p>
    				<a href="#">199元</a>
    			</div>
    			<div>
    				<img src="kong.png" alt="">
    				<h4>米家空气净化器Pro</h4>
    				<p>OLED显示屏幕 激光颗粒物传感器</p>
    				<a href="#">1499元</a>
    			</div>
    			<div>
    				<img src="lutouqi.png" alt="">
    				<h4>小米路由器3</h4>
    				<p>更快更强 不止四天线</p>
    				<a href="#">149元</a>
    			</div>
    		</div>
    	</div>
    
    	<div class="five">
    		<div class="five1">
    			<h4>家电</h4>
    			<ul>
    				<li><a href="#">家居</a></li>
    				<li><a href="#">电脑</a></li>
    				<li><a href="#">电视影音</a></li>
    				<li><a href="#" class="remen">热门</a></li>
    			</ul>
    		</div>
    		<div class="five2">
    			<div class="nav">
    				<a href="#"><img src="kongqi.png" alt=""></a>
    			</div>
    			<div class="nav1">
    				<ul>
    					<li>
    						<img src="dianshi.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="dianshi1.png" alt="">
    						<h4>小米电视4A 49英寸 标准版</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">2399元</a>
    					</li>
    					<li>
    						<img src="dianshi2.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="dianshi3.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="dianshi4.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="dianshi5.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="dianshi6.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li class="xiaobai">
    					<div>
    						<div>
    							<h4>小白摄像机</h4>
    							<a href="#">399元</a>
    						</div>
    							<img src="399.png" alt="">
    					</div>
    					<div>
    						<div>
    							<h4>浏览更多</h4>
    							<a href="#">热门</a>
    						</div>
    							<img src="you1.png" alt="">
    					</div>
    					</li>
    				</ul>
    			</div>
    		</div>
    	</div>
    
    	<div class="five">
    		<div class="five1">
    			<h4>智能</h4>
    			<ul>
    				<li><a href="#">路由器</a></li>
    				<li><a href="#">酷玩</a></li>
    				<li><a href="#">健康</a></li>
    				<li><a href="#">出行</a></li>
    				<li><a href="#" class="remen">热门</a></li>
    			</ul>
    		</div>
    		<div class="five2">
    			<div class="nav">
    				<a href="#"><img src="xiangji.png" alt=""></a>
    			</div>
    			<div class="nav1">
    				<ul>
    					<li>
    						<img src="che.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="che.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="che.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="che.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="che.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="che.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="che.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li class="xiaobai">
    					<div>
    						<div>
    							<h4>小白摄像机</h4>
    							<a href="#">399元</a>
    						</div>
    							<img src="399.png" alt="">
    					</div>
    					<div>
    						<div>
    							<h4>浏览更多</h4>
    							<a href="#">热门</a>
    						</div>
    							<img src="you1.png" alt="">
    					</div>
    					</li>
    				</ul>
    			</div>
    		</div>
    	</div>
    
    	<div class="five">
    		<div class="five1">
    			<h4>周边</h4>
    			<ul>
    				<li><a href="#">箱包</a></li>
    				<li><a href="#">生活周边</a></li>
    				<li><a href="#">居家</a></li>
    				<li><a href="#">服装</a></li>
    				<li><a href="#" class="remen">热门</a></li>
    			</ul>
    		</div>
    		<div class="five2">
    			<div class="nav">
    				<a href="#"><img src="yanjing.png" alt=""></a>
    			</div>
    			<div class="nav1">
    				<ul>
    					<li>
    						<img src="yifu.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">19元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="yifu.png" alt="">
    						<h4>小米电视4A 32"<yifu.png/h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">2299元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="yifu.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="yifu.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="yifu.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="yifu.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="yifu.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    					<li>
    						<img src="yifu.png" alt="">
    						<h4>小米电视4A 32"</h4>
    						<p>64位四核处理器/1GB+4GB大内存</p>
    						<a href="#">199元<s>1199元</s></a>
    					</li>
    				</ul>
    			</div>
    		</div>
    	</div>
    
    	<div class="fast">
    		<div class="fast1">
    			<h3>小米明星单品</h3>
    			<div>
    				<input type="submit" value="">
    				<input type="submit" value="">
    			</div>
    		</div>
    		<div class="fast2">
    			<div>
    				<img src="xiaomi5x.png" alt="">
    				<h4>小米5x 全网通版 4GB内存</h4>
    				<a href="#">1499元</a>
    				<p>1911人好评</p>
    			</div>
    			<div>
    				<img src="Note3.png" alt="">
    				<h4>小米Max2 全网通版 4GB内存</h4>
    				<a href="#">1699元</a>
    				<p>3.1万人好评</p>
    			</div>
    			<div>
    				<img src="max2.png" alt="">
    				<h4>小米6 全网通版 4GB内存</h4>
    				<a href="#">2299元</a>
    				<p>1好评</p>
    			</div>
    			<div>
    				<img src="xiaomi6.png" alt="">
    				<h4>小米Note3 全网通版 4GB内存</h4>
    				<a href="#">2299元</a>
    				<p>1.1万人好评</p>
    			</div>
    			<div>
    				<img src="xiaomi6.png" alt="">
    				<h4>小米Note3 全网通版 4GB内存</h4>
    				<a href="#">2299元</a>
    				<p>1.1万人好评</p>
    			</div>
    		</div>
    	</div>
    
    	<div class="ten">
    		<div>
    			<h3>热评产品</h3>
    		</div>
    		<div class="ten1">
    			<div>
    				<img src="lu.png">
    				<h4>安装简介方便，信号不错</h4>
    				<p>来自于 追溯 的评价</p>
    				<h4>小米路由器3 |<a href="#">149元</a></h4>
    			</div>
    			<div>
    				<img src="xiaohai.png">
    				<h4>安装简介方便，信号不错</h4>
    				<p>来自于 追溯 的评价</p>
    				<h4>小米路由器3 |<a href="#">149元</a></h4>
    			</div>
    			<div>
    				<img src="dian.png">
    				<h4>安装简介方便，信号不错</h4>
    				<p>来自于 追溯 的评价</p>
    				<h4>小米路由器3 |<a href="#">149元</a></h4>
    			</div>
    			<div>
    				<img src="lu.png">
    				<h4>安装简介方便，信号不错</h4>
    				<p>来自于 追溯 的评价</p>
    				<h4>小米路由器3 |<a href="#">149元</a></h4>
    			</div>
    		</div>
    	</div>
    
    	<div class="neirong">
    		<div>
    			<h3>内容</h3>
    		</div>
    		<div class="neirong1">
    			<div>
    				<h5>图书</h5>
    				<h3>哈利.波特与被诅咒的孩子</h3>
    				<p>哈利。波特第八个故事中文版震撼来<br>袭！特别才排版剧本</p>
    				<a href="#"><span>29.37元</span></a><br>
    				<img src="hali.png" alt="">
    				<div class="dingwei">
    					<div></div>
    					<div></div>
    					<div></div>
    				</div>
    			</div>
    			<div >
    				<h5>图书</h5>
    				<h3>哈利.波特与被诅咒的孩子</h3>
    				<p>哈利。波特第八个故事中文版震撼来<br>袭！特别才排版剧本</p>
    				<a href="#"><span>29.37元</span></a><br>
    				<img src="huangren.png" alt="">
    				<ul>
    					<li></li>
    					<li></li>
    					<li></li>
    				</ul>
    			</div>
    			<div >
    				<h5>图书</h5>
    				<h3>哈利.波特与被诅咒的孩子</h3>
    				<p>哈利。波特第八个故事中文版震撼来<br>袭！特别才排版剧本</p>
    				<a href="#"><span>29.37元</span></a><br>
    				<img src="xiong.png" alt="">
    				<ul>
    					<li></li>
    					<li></li>
    					<li></li>
    				</ul>
    			</div>
    			<div >
    				<h5>图书</h5>
    				<h3>哈利.波特与被诅咒的孩子</h3>
    				<p>哈利。波特第八个故事中文版震撼来<br>袭！特别才排版剧本</p>
    				<a href="#"><span>29.37元</span></a><br>
    				<img src="youxi.png" alt="">
    				<ul>
    					<li></li>
    					<li></li>
    					<li></li>
    				</ul>
    			</div>
    		</div>
    	</div>
    
    	<div class="shipin">
    		<div class="shipin1">
    			<h3>视频</h3>
    			<a href="#">查看全部<span>></span></a>
    		</div>
    		<div class="shipin2">
    			<div>
    				<img src="leijun.png" alt="">
    				<h4>雷军与斯塔克打造全面2.0</h4>
    				<p>一场关于小米MIX2极致工艺的巅峰对话</p>
    			</div>
    			<div>
    				<img src="wuyifan.png" alt="">
    				<h4>小米Note3 与吴亦凡</h4>
    				<p>看看小米Note3与吴亦凡谁更帅？</p>
    			</div><div>
    				<img src="MiUi.png" alt="">
    				<h4>MIUI9 理念视频</h4>
    				<p>快如闪电，前所未有的流畅</p>
    			</div><div>
    				<img src="gushi.png" alt="">
    				<h4>拍人更美的背后故事</h4>
    				<p>小米手机工程师采访视频</p>
    			</div>
    		</div>
    	</div>
    
    	<div class="shouwei">
    		<div class="shouwei1">
    			<h3><a href="#">预约维修服务</a></h3>
    			<h3><a href="#">7天无理由退货</a></h3>
    			<h3><a href="#">15天免费换货</a></h3>
    			<h3><a href="#">满150元包邮</a></h3>
    			<h3><a href="#">520余家售后网点</a></h3>
    		</div>
    		<div class="shouwei2">
    			<dl>
    				<dt>帮助中心</dt>
    				<dd>账号管理</dd>
    				<dd>购物指南</dd>
    				<dd>订单操作</dd>
    			</dl>
    			<dl>
    				<dt>服务支持</dt>
    				<dd>售后政策</dd>
    				<dd>自助服务</dd>
    				<dd>相关下载</dd>
    			</dl>
    			<dl>
    				<dt>线下门店</dt>
    				<dd>小米之家</dd>
    				<dd>服务网点</dd>
    				<dd>零点网点</dd>
    			</dl>
    			<dl>
    				<dt>关于小米</dt>
    				<dd>了解小米</dd>
    				<dd>加入小米</dd>
    				<dd>联系我们</dd>
    			</dl>
    			<dl>
    				<dt>关注我们</dt>
    				<dd>新浪微博</dd>
    				<dd>小米部落</dd>
    				<dd>订单操作</dd>
    			</dl>
    			<dl>
    				<dt>特色服务</dt>
    				<dd>F码通道</dd>
    				<dd>礼物盒</dd>
    				<dd>防伪查询</dd>
    			</dl>
    			<div>
    				<h2>400-100-5678</h2>
    				<p>周一至周五8:00-18:00<br>(仅收市话费)</p>
    				<h4><a href="#">24小时在线客服</a></h4>
    			</div>
    		</div>
    	</div>
    
    	<div class="mimi">
    		<div>
    			<img src="mi.png" alt="">
    			<h4>小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫点|小米淘宝直营店|小米移动|隐私政策|Select Region</h4>
    			<p>@mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009<br />违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    		</div>
    		<div>
    			<h3>探索黑科技，小米为发烧而生！</h3>
    		</div>
    	</div>
    </body> 
    </html>