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