小米.css

<!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">
<!-- 版心第2排 -->
	<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>
<!-- 版心第3排 -->
	<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>
<!-- 版心第4排 -->
	<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>
<!-- 版心第5排 -->
	<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>
<!-- 版心第6排 -->
	<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>
<!-- 版心第7排 -->
	<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>
<!-- 版心第8排 -->
	<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>

猜你喜欢

转载自blog.csdn.net/xl4277/article/details/79859261
今日推荐