当前位置 博文首页 > 孙叫兽的博客：花了一天的时间给粉丝做了一个小米官网（高仿）
身为前端程序员，经常会找几个官网试试手，哈哈，这次拿小米官网试试手吧。
目录
?
?效果图：
项目结构
index.html
index.css
js
下载地址：点我下载
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米官网</title>
<link rel ="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/usual.css">
<link rel = "stylesheet" type ="text/css" href ="css/index.css"/>
<link rel ="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel ="stylesheet" type="text/css" href="fonts/iconfont.css"/>
<script type ="text/javascript" src = "js/jquery-3.2.1.js"></script>
<script type ="text/javascript" src = "js/slide.js"></script>
<script type ="text/javascript" src = "js/xm-star.js"></script>
<script type ="text/javascript" src = "js/main-page.js"></script>
</head>
<body>
<!--header start-->
<header>
<!--头部新产品广告-->
<div class="h-top-bg">
<a href="#"></a>
</div>
<!--头部快捷导航-->
<div class="h-bar">
<div class="wrap clearFix">
<div class="h-l fl">
<ul class = "nav">
<li><a href="#" target="_blank">小米商城</a></li>
<li>|</li>
<li><a href="#" target="_blank">MIUI</a></li>
<li>|</li>
<li><a href="#" target="_blank">米聊</a></li>
<li>|</li>
<li><a href="#" target="_blank">游戏</a></li>
<li>|</li>
<li><a href="#" target="_blank">多看阅读</a></li>
<li>|</li>
<li><a href="#" target="_blank">云服务</a></li>
<li>|</li>
<li><a href="#" target="_blank">金融</a></li>
<li>|</li>
<li><a href="#" target="_blank">小米商城移动版</a></li>
<li>|</li>
<li><a href="#" target="_blank">问题反馈</a></li>
<li>|</li>
<li>
<a href="">Select Region</a>
<div class="cover">
<div class="modal">
<div class="title"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="h-r fr">
<div class="s-cart fr">
<a href="#" target = "_blank">
<i class="iconfont icon-gouwuche1"></i>
购物车 <span>( 0 )</span>
</a>
<div class="s-info">
</div>
</div>
<ul class = "nav fr">
<li><a href="#" target = "_blank">登录</a></li>
<li>|</li>
<li><a href="#" target ="_blank">注册</a></li>
<li>|</li>
<li><a href="" target ="_black">消息通知</a></li>
</ul>
</div>
</div>
</div>
<a href="javascript:;">
<img src="images/home-elect/xmad_14951679051921_JWQpV.jpg" alt="#" width="234" height="300">
</a>
</div>
<div class="b-right span16 fr">
<ul class ="brick-list brick-list-hot active clearFix">
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077454.46128587!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 49英寸</a></h2>
<p class="small">6月1日-3日,下单立减300</p>
<p class="price">2599元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1469583247.6157588!220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米笔记本Air 13.3英寸</a></h2>
<p class="small">独立显卡，全金属机身，超长续航</p>
<p class="price">4999元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490604824.19051012!220x220.jpg" alt="#" width="150" height="150">
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490604824.19051012!220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米笔记本Air 12.5英寸</a></h2>
<p class="small">独立显卡，全金属机身，超长续航</p>
<p class="price">3599元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<div class="sub-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490770630.65576964!220x220.png" alt="#" width="80" height="80">
</a>
<h2 class="pro-name"><a href="javascript:;">米家IH电饭煲 4L</a></h2>
<p class="price">2099元</p>
</div>
<div class="sub-item">
<a href="javascript:;" class="icon">
<i class="iconfont icon-jiantou5"></i>
</a>
<a href="javascript:;" class="more-link">
浏览更多
<small >热门</small>
</a>
</div>
</li>
</ul>
<ul class ="brick-list brick-list-hot clearFix">
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1474944620.67265595!220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视3s 55英寸</a></h2>
<p class="small">6月1日-3日,直降400元</p>
<p class="price">3599元 <s>3999元</s></p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077569.08131612!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 65英寸</a></h2>
<p class="small">6月1日-3日,下单立减1000</p>
<p class="price">5699元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490778061.59475600!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">电视4A 49英寸人工智能语音版</a></h2>
<p class="small">6月1日~3日，下单立减200元</p>
<p class="price">2899元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490778355.67093197!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米笔记本Air 12.5英寸</a></h2>
<p class="small">独立显卡，全金属机身，超长续航</p>
<p class="price">3599元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1479190789.95594557!220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米盒子3s</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">299元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<div class="sub-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490770630.65576964!220x220.png" alt="#" width="80" height="80">
</a>
<h2 class="pro-name"><a href="javascript:;">米家IH电饭煲 4L</a></h2>
<p class="price">2099元</p>
</div>
<div class="sub-item">
<a href="javascript:;" class="icon">
<i class="iconfont icon-jiantou5"></i>
</a>
<a href="javascript:;" class="more-link">
浏览更多
<small >热门</small>
</a>
</div>
</li>
</ul>
<ul class ="brick-list brick-list-hot clearFix">
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077454.46128587!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 49英寸</a></h2>
<p class="small">6月1日-3日,下单立减300</p>
<p class="price">2599元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1478763592.13343555!220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米笔记本Air 13.3英寸</a></h2>
<p class="small">独立显卡，全金属机身，超长续航</p>
<p class="price">4999元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490702347.3628109!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米笔记本Air 12.5英寸</a></h2>
<p class="small">独立显卡，全金属机身，超长续航</p>
<p class="price">3599元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490595812.95661863!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<div class="sub-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490770630.65576964!220x220.png" alt="#" width="80" height="80">
</a>
<h2 class="pro-name"><a href="javascript:;">米家IH电饭煲 4L</a></h2>
<p class="price">2099元</p>
</div>
<div class="sub-item">
<a href="javascript:;" class="icon">
<i class="iconfont icon-jiantou5"></i>
</a>
<a href="javascript:;" class="more-link">
浏览更多
<small >热门</small>
</a>
</div>
</li>
</ul>
<ul class ="brick-list brick-list-hot clearFix">
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1478678718.61531371!220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1478678718.61531371!220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 49英寸</a></h2>
<p class="small">6月1日-3日,下单立减300</p>
<p class="price">2599元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/T1vJE_Bv_T1RXrhCrK!220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米笔记本Air 13.3英寸</a></h2>
<p class="small">独立显卡，全金属机身，超长续航</p>
<p class="price">4999元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490604824.19051012!220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米笔记本Air 12.5英寸</a></h2>
<p class="small">独立显卡，全金属机身，超长续航</p>
<p class="price">3599元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490756071.3088664!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<div class="sub-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490770630.65576964!220x220.png" alt="#" width="80" height="80">
</a>
<h2 class="pro-name"><a href="javascript:;">米家IH电饭煲 4L</a></h2>
<p class="price">2099元</p>
</div>
<div class="sub-item">
<a href="javascript:;" class="icon">
<i class="iconfont icon-jiantou5"></i>
</a>
<a href="javascript:;" class="more-link">
浏览更多
<small >热门</small>
</a>
</div>
</li>
</ul>
<ul class ="brick-list brick-list-hot clearFix">
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/T1RRCjBKJv1RXrhCrK.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/T1RRCjBKJv1RXrhCrK.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 49英寸</a></h2>
<p class="small">6月1日-3日,下单立减300</p>
<p class="price">2599元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1469429887.76894954!220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米笔记本Air 13.3英寸</a></h2>
<p class="small">独立显卡，全金属机身，超长续航</p>
<p class="price">4999元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/T1G9Y_BmCv1RXrhCrK.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米笔记本Air 12.5英寸</a></h2>
<p class="small">独立显卡，全金属机身，超长续航</p>
<p class="price">3599元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/6ddc1df6-ce8e-4cb5-a26a-b5ef80f1adf7.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/6ddc1df6-ce8e-4cb5-a26a-b5ef80f1adf7.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/pms_1490756071.3088664!220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
<p class="small">6月1日-3日,限量送儿童会员年卡</p>
<p class="price">2099元</p>
<div class="flag">享9.8折</div>
<div class="review">
<p class="content">
速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
</p>
<p class="author">
来自于 zk 的评价
</p>
</div>
</li>
<li class="brick-item">
<div class="sub-item">
<a href="javascript:;" class="img">
<img src="images/home-elect/T1tzL_BjYT1RXrhCrK!220x220.jpg" alt="#" width="80" height="80">
</a>
<h2 class="pro-name"><a href="javascript:;">米家IH电饭煲 4L</a></h2>
<p class="price">2099元</p>
</div>
<div class="sub-item">
<a href="javascript:;" class="icon">
<i class="iconfont icon-jiantou5"></i>
</a>
<a href="javascript:;" class="more-link">
浏览更多
<small >热门</small>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--为你推荐-->
<div class="recommend">
<div class="wrap">
<div class="title">
<p>为你推荐</p>
<div class="btn-group">
<i class="pre iconfont icon-fanhui1 fl "></i>
<i class="next iconfont icon-fanhui fl disabled"></i>
</div>
</div>
<div class="slider">
<ul class="brick-list clearFix">
<li>
<a href="#" class="img">
<img src="images/bea012b2-b439-4df8-bbf8-0733f5a19630.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米Note 2</a></h3>
<p class="price">2799元起</p>
</li>
<li>
<a href="#" class="img">
<img src="images/5e2eb710-a99f-4235-ac5c-1b20b1e6c3b6.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米5s 64GB</a></h3>
<p class="price">1999元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/e991f1e2-20d8-40c3-bf1d-012b122c986b.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米5s Plus</a></h3>
<p class="price">2299元起</p>
</li>
<li>
<a href="#" class="img">
<img src="images/xmad_14926528960147_wJMsC.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米电视4A 49英寸 标准版</a></h3>
<p class="price">2599元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/725a37e3-78b7-4298-8098-c40097bf179d.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米笔记本</a></h3>
<p class="price">3599元起</p>
</li>
<li>
<a href="#" class="img">
<img src="images/xmad_14917453512947_AmXkT.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">10000mAh小米移动电源2</a></h3>
<p class="price">79元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/6ef55907-bbed-49be-a2bb-be0821b5f7b8.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米手环 2</a></h3>
<p class="price">149元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/xmad_14954429057126_LsEIN.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米盒子3c</a></h3>
<p class="price">199元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/xmad_14878364411484_BzwLi.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">米家车载空气净化器</a></h3>
<p class="price">449元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/de35852a-1be5-4ef5-846f-dcdd2efcfea6.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米路由器3</a></h3>
<p class="price">149元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/bea012b2-b439-4df8-bbf8-0733f5a19630.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米Note 2</a></h3>
<p class="price">2799元起</p>
</li>
<li>
<a href="#" class="img">
<img src="images/5e2eb710-a99f-4235-ac5c-1b20b1e6c3b6.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米5s 64GB</a></h3>
<p class="price">1999元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/e991f1e2-20d8-40c3-bf1d-012b122c986b.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米5s Plus</a></h3>
<p class="price">2299元起</p>
</li>
<li>
<a href="#" class="img">
<img src="images/xmad_14926528960147_wJMsC.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米电视4A 49英寸 标准版</a></h3>
<p class="price">2599元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/725a37e3-78b7-4298-8098-c40097bf179d.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米笔记本</a></h3>
<p class="price">3599元起</p>
</li>
<li>
<a href="#" class="img">
<img src="images/xmad_14917453512947_AmXkT.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">10000mAh小米移动电源2</a></h3>
<p class="price">79元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/6ef55907-bbed-49be-a2bb-be0821b5f7b8.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米手环 2</a></h3>
<p class="price">149元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/xmad_14954429057126_LsEIN.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米盒子3c</a></h3>
<p class="price">199元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/xmad_14878364411484_BzwLi.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">米家车载空气净化器</a></h3>
<p class="price">449元</p>
</li>
<li>
<a href="#" class="img">
<img src="images/de35852a-1be5-4ef5-846f-dcdd2efcfea6.png" alt="" width="160" height="160">
</a>
<h3 class="pro-name"><a href="#">小米路由器3</a></h3>
<p class="price">149元</p>
</li>
</ul>
</div>
</div>
</div>
<!--热评产品-->
<div class="hot-pd">
<div class="head">
<p class="title">周边</p>
</div>
<ul class="flex-box">
<li class="flex-item">
<a class="img" href="javascript:;">
<img src="images/hot-pd/05972209-0c29-4f2f-9844-09de1093ab02.jpg" alt="#" width="296" height="220">
</a>
<a class="review">先五星好评。再来说说小米空气净化器，北方的天气雾霾越来越常态，这就迫切需要一台性价比高的空气净化</a>
<p class="author">来自于 爱疯911 的评价</p>
<p class="pd-name"><a href="">小米净水器</a> | 1299元</p>
</li>
<li class="flex-item">
<a class="img" href="javascript:;">
<img src="images/hot-pd/a5886d24-b443-4a15-88ca-5dbd43b72de3.jpg" alt="#" width="296" height="220">
</a>
<a class="review">这箱子很好，外观漂亮，实用性强。很轻，有点软但不影响它的坚固。</a>
<p class="author">来自于 爱疯911 的评价</p>
<p class="pd-name"><a href="">小米净水器</a> | 1299元</p>
</li>
<li class="flex-item">
<a class="img" href="javascript:;">
<img src="images/hot-pd/8949026b-fa9a-4370-989b-5d5e2f149106.jpg" alt="#" width="296" height="220">
</a>
<a class="review">很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还是一如既往的简洁 要是有盒子就好了=￣ω￣=</a>
<p class="author">来自于 爱疯911 的评价</p>
<p class="pd-name"><a href="">小米净水器</a> | 1299元</p>
</li>
<li class="flex-item">
<a class="img" href="javascript:;">
<img src="images/hot-pd/7e051b10-ed56-43df-bd60-3780592a3345.jpg" alt="#" width="296" height="220">
</a>
<a class="review">有了它，妈妈再也不用担心我喝不到健康的水了。呵呵，良心产品，平民价格，对现在的水质起到了很好的改善作...</a>
<p class="author">来自于 爱疯911 的评价</p>
<p class="pd-name"><a href="">小米净水器</a> | 1299元</p>
</li>
</ul>
</div>
<!--内容-->
<div class="content">
<div class="head">
<p class="title">内容</p>
</div>
<ul class="flex-box">
<!--图书-->
<li class="flex-item ">
<h2 class="title">图书</h2>
<div class="slider book">
<div class="slider-box">
<input type="radio" id="btn1" name = "btn" checked>
<label for="btn1"></label>
<div class="slider-item">
<h2 class="title"><a href="">哈利·波特与被诅咒的孩子</a></h2>
<p class="abs"><a href="">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！</a></p>
<p class="price">29.37元</p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/5e5da924-84e3-4959-9e25-5891cdf30757.png" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn2" name = "btn">
<label for="btn2"></label>
<div class="slider-item">
<h2 class="title"><a href="">好吗好的</a></h2>
<p class="abs"><a href="">畅销作家大冰2016年新书！讲给你听，好吗好的！</a></p>
<p class="price">17.99元</p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/61e1385e-54de-48f3-8717-5e4f4b1cdd14.png" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn3" name = "btn">
<label for="btn3"></label>
<div class="slider-item">
<p class="abs">海量好书，享受精品阅读时光漂亮的中文排版，千万读者选择！</p>
<a href="javascript:;" class="link-btn">前往多看阅读</a>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/more-duokan.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
</div>
</li>
<!--MIUI主题-->
<li class="flex-item">
<h2 class="title">MIUI 主题</h2>
<div class="slider theme">
<div class="slider-box">
<input type="radio" id="btn4" name = "btn1" checked>
<label for="btn4"></label>
<div class="slider-item">
<h2 class="title"><a href="">哆啦A梦：大雄的南极冰冰凉大冒险</a></h2>
<p class="abs"><a href="">哆啦A梦剧场版定制主题</a></p>
<p class="price">免费</p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/xmad_14962824771016_ciWtQ.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn5" name = "btn1">
<label for="btn5"></label>
<div class="slider-item">
<h2 class="title"><a href="">小米Max 2官方主题</a></h2>
<p class="abs"><a href="">兼顾左右手的“超级锁屏悬浮球”，单指一键直达APP</a></p>
<p class="price">15米币</p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/xmad_1495694746648_lgqst.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn6" name = "btn1">
<label for="btn6"></label>
<div class="slider-item">
<h2 class="title"><a href="">小米6</a></h2>
<p class="abs"><a href="">3D动态变色，小米6官方主题炫丽出世！</a></p>
<p class="price">12米币</p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/61e1385e-54de-48f3-8717-5e4f4b1cdd14.png" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn7" name = "btn1">
<label for="btn7"></label>
<div class="slider-item">
<p class="abs">众多个性主题、百变锁屏与自由桌面让你的手机与众不同！</p>
<a href="javascript:;" class="link-btn">前往MIUI主题市场</a>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/more-duokan.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
</div>
</li>
<!--游戏-->
<li class="flex-item">
<h2 class="title">游戏</h2>
<div class="slider game">
<div class="slider-box">
<input type="radio" id="btn8" name = "btn2" checked>
<label for="btn8"></label>
<div class="slider-item">
<h2 class="title"><a href="">米柚手游模拟器</a></h2>
<p class="abs"><a href="">在电脑上玩遍小米所有手游</a></p>
<p class="price">免费</p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/T1czW_BXCv1R4cSCrK.png" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn9" name = "btn2">
<label for="btn9"></label>
<div class="slider-item">
<h2 class="title"><a href="">剑侠世界</a></h2>
<p class="abs"><a href="">一生不容错过的浪漫武侠！！</a></p>
<p class="price">免费</p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/695c909b-f541-4575-bace-d08b6465025b.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn10" name = "btn2">
<label for="btn10"></label>
<div class="slider-item">
<h2 class="title"><a href="">老九门</a></h2>
<p class="abs"><a href="">九门恩怨，盗墓笔记前传上线</a></p>
<p class="price">免费</p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/6032cb36-587f-4366-89ef-aefed2546552.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn11" name = "btn2">
<label for="btn11"></label>
<div class="slider-item">
<p class="abs">免费下载海量的手机游戏天天都有现金福利赠送</p>
<a href="javascript:;" class="link-btn">前往小米游戏商店</a>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/more-duokan.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
</div>
</li>
<!--应用-->
<li class="flex-item">
<h2 class="title">应用</h2>
<div class="slider program">
<div class="slider-box">
<input type="radio" id="btn12" name = "btn3" checked>
<label for="btn12"></label>
<div class="slider-item">
<h2 class="title"><a href="">2017金米奖</a></h2>
<p class="abs"><a href="">最优秀的应用和游戏</a></p>
<p class="price"></p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/3332da7d-4056-4694-9548-c83b7b3af7d3.png" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn13" name = "btn3">
<label for="btn13"></label>
<div class="slider-item">
<h2 class="title"><a href="">Forest</a></h2>
<p class="abs"><a href="">帮助您专心于生活中每个重要时刻</a></p>
<p class="price">免费</p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/T1TkKvBCKv1R4cSCrK.png" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn14" name = "btn3">
<label for="btn14"></label>
<div class="slider-item">
<h2 class="title"><a href="">小米应用</a></h2>
<p class="abs"><a href="">小米出品 必属精品</a></p>
<p class="price">免费</p>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/T15VZvB5Kv1R4cSCrK.png" alt="#" width="216" height="154">
</a>
</div>
</div>
<div class="slider-box">
<input type="radio" id="btn15" name = "btn3">
<label for="btn15"></label>
<div class="slider-item">
<p class="abs">帮助小米手机和其他安卓手机用户发现好用的安卓应用</p>
<a href="javascript:;" class="link-btn">前往小米应用商店</a>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/more-app.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<!--视屏-->
<div class="video">
<div class="head">
<p class="title">视屏</p>
<a href="javascript:;" class="btn">查看全部 <i class="iconfont icon-iconfontjiantou"></i></a>
</div>
<ul class="flex-box">
<li class="flex-item">
<a href="javascript:;" class ="img">
<img src="images/hot-pd/xmad_1492588199164_Jykpx.jpg" alt="#" width="296" height="180">
</a>
<a href="javascript" class="btn"><i class="iconfont icon-iconfontjiantou2eps"></i></a>
<h4 class="title"><a href="">听雷总讲述小米7年工艺探索之路</a></h4>
<p class="abs"><a href="">小米6，7年工艺探索的巅峰之作</a></p>
</li>
<li class="flex-item">
<a href="javascript:;" class ="img">
<img src="images/hot-pd/xmad_14925882923733_lghaJ.jpg" alt="#" width="296" height="180">
</a>
<a href="javascript" class="btn"><i class="iconfont icon-iconfontjiantou2eps"></i></a>
<h4 class="title"><a href="">小米6外观设计视频</a></h4>
<p class="abs"><a href="">震惊！小米6竟然如此之美</a></p>
</li>
<li class="flex-item">
<a href="javascript:;" class ="img">
<img src="images/hot-pd/xmad_14954491368955_oHlMm.jpg" alt="#" width="296" height="180">
</a>
<a href="javascript" class="btn"><i class="iconfont icon-iconfontjiantou2eps"></i></a>
<h4 class="title"><a href="">小米电视4 外观设计视频</a></h4>
<p class="abs"><a href="">美哭了！史上最美的小米电视</a></p>
</li>
<li class="flex-item">
<a href="javascript:;" class ="img">
<img src="images/hot-pd/xmad_14954492313573_fOVNG.jpg" alt="#" width="296" height="180">
</a>
<a href="javascript" class="btn"><i class="iconfont icon-iconfontjiantou2eps"></i></a>
<h4 class="title"><a href="">4.9mm极超薄电视的诞生揭秘</a></h4>
<p class="abs"><a href="">小米电视工程师讲述极致之作的背后故事</a></p>
</li>
</ul>
</div>
</div>
</section>
<!--page-main end-->
<!--footer start-->
<footer id="footer">
<div class="wrap">
<div class="f-hd">
<ul class="service flex-box">
<li >
<a href="javascript:;">
<i class="iconfont icon-weixiu"></i>
预约维修服务
</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-iconfont7tian"></i>
7天无理由退货
</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-15tian"></i>
15天免费换货
</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-liwu"></i>
满150元包邮
</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-ditu"></i>
520余家售后网点
</a>
</li>
</ul>
</div>
<div class="f-bd clearFix">
<div class="links">
<dl>
<dt>帮助中心</dt>
<dd><a href="javascript:;">账户管理</a></dd>
<dd><a href="javascript:;">购物指南</a></dd>
<dd><a href="javascript:;">订单操作</a></dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd><a href="javascript:;">售后政策</a></dd>
<dd><a href="javascript:;">自助服务</a></dd>
<dd><a href="javascript:;">相关下载</a></dd>
</dl>
<dl>
<dt>线下门店</dt>
<dd><a href="javascript:;">小米之家</a></dd>
<dd><a href="javascript:;">服务网点</a></dd>
<dd><a href="javascript:;">零售网点</a></dd>
</dl>
<dl>
<dt>关于小米</dt>
<dd><a href="javascript:;">了解小米</a></dd>
<dd><a href="javascript:;">加入小米</a></dd>
<dd><a href="javascript:;">联系我们</a></dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd><a href="javascript:;">新浪微博</a></dd>
<dd><a href="javascript:;">小米部落</a></dd>
<dd><a href="javascript:;">官方微信</a></dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="javascript:;">F 码通道</a></dd>
<dd><a href="javascript:;">礼物码</a></dd>
<dd><a href="javascript:;">防伪查询</a></dd>
</dl>
</div>
<div class="contact fr">
<p class="phone">400-100-5678</p>
<p class="time">周一至周日 8:00-18:00</p>
<p>（仅收市话费）</p>
<a href="javascript:;" class="cs">
<i class="iconfont icon-duanxin"></i>
24小时在线客服
</a>
</div>
</div>
<div class="f-ft"></div>
</div>
</footer>
<!--footer end-->
</body>
</html>
