身为前端程序员，经常会找几个官网试试手，哈哈，这次拿小米官网试试手吧。
目录
效果图：
项目结构
index.html
index.css
js
下载地址：点我下载
效果图：
项目结构
index.html
<!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>
index.css
.ui-wrapper
{position: relative;margin: 0;padding: 0;*zoom: 1
}.ui-wrapper img
{display: block;max-width: 100%
}.ui-wrapper .ui-viewport
{-webkit-transform: translatez(0);-ms-transform: translatez(0);transform: translatez(0)
}.ui-wrapper .ui-pager,.ui-wrapper .ui-controls-auto
{position: absolute;left: 0;bottom: 20px;width: 100%;z-index: 999
}.ui-wrapper .ui-loading
{min-height: 50px;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 999
}.ui-wrapper .ui-pager
{font-size: 12px;text-align: center;color: #666
}.ui-wrapper .ui-pager .ui-pager-item,.ui-wrapper .ui-controls-auto .ui-controls-auto-item
{display: inline-block;*zoom: 1;*display: inline
}.ui-wrapper .ui-pager.ui-default-pager a
{display: block;width: 6px;height: 6px;margin: 0 5px;border: 2px solid #fff;border-color: rgba(255,255,255,0.3);border-radius: 10px;text-align: left;text-indent: -9999px;overflow: hidden;_zoom: 1;background: #f5f5f5;background: rgba(0,0,0,0.4);-webkit-transition: all .2s;transition: all .2s
}.ui-wrapper .ui-pager.ui-default-pager a:hover,.ui-wrapper .ui-pager.ui-default-pager a.active
{background: #fff;background: rgba(255,255,255,0.4);border-color: #757575;border-color: rgba(0,0,0,0.4)
}.ui-wrapper .ui-pager.ui-default-pager a:focus
{outline: 0
}.ui-wrapper .ui-prev
{left: 0;background: url(//c1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat -84px 50%
}.ui-wrapper .ui-next
{right: 0;background: url(//c1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat -125px 50%
}.ui-wrapper .ui-prev:hover
{background-position: 0 50%
}.ui-wrapper .ui-next:hover
{background-position: -42px 50%
}.ui-wrapper .ui-controls-direction a
{position: absolute;top: 50%;z-index: 999;width: 41px;height: 69px;margin-top: -35px;text-indent: -9999px;overflow: hidden;_zoom: 1;outline: 0
}.ui-wrapper .ui-controls-direction a.disabled
{display: none
}.xm-plain-box .box-hd
{position: relative;height: 58px;-webkit-font-smoothing: antialiased
}.xm-plain-box .box-hd .title
{margin: 0;font-size: 22px;font-weight: 200;line-height: 58px;color: #333
}.xm-plain-box .box-hd .title small
{margin-left: 10px;font-size: 14px
}.xm-plain-box .box-hd .title .tip
{color: #757575
}.xm-plain-box .box-hd .more
{position: absolute;top: 0;right: 0
}.xm-plain-box .box-hd .more .more-link
{font-size: 16px;line-height: 58px;color: #424242;-webkit-transition: all .4s;transition: all .4s
}.xm-plain-box .box-hd .more .more-link:hover
{color: #ff6700
}.xm-plain-box .box-hd .more .more-link:hover .iconfont
{background: #ff6700
}.xm-plain-box .box-hd .more .more-link .iconfont
{width: 12px;height: 12px;padding: 4px;margin-left: 8px;border-radius: 16px;font-size: 12px;line-height: 12px;background: #b0b0b0;color: #fff;vertical-align: 1px;-webkit-transition: all .4s;transition: all .4s
}.xm-plain-box .box-hd .more .control
{margin-left: -1px
}.xm-plain-box .box-hd .more .tab-list
{margin: 0;padding: 16px 0 0;list-style-type: none;font-size: 16px
}.xm-plain-box .box-hd .more .tab-list li
{display: inline-block;*zoom: 1;*display: inline;padding: 0;margin: 0 15px;color: #424242;border-bottom: 2px solid #f5f5f5;border-bottom: 2px solid transparent;-webkit-transition: border-color .5s;transition: border-color .5s;cursor: pointer
}.xm-plain-box .box-hd .more .tab-list li:hover,.xm-plain-box .box-hd .more .tab-list li.tab-active
{color: #ff6700;border-bottom: 2px solid #ff6700
}.brick-list,.brick-promo-list
{height: 614px;margin: 0;padding: 0;list-style-type: none
}.brick-list
{width: 992px
}.brick-promo-list a
{display: block;width: 100%;height: 100%
}.brick-promo-list img
{width: 234px
}.brick-promo-list .brick-item-l img
{height: 614px
}.brick-promo-list .brick-item-m
{height: 300px;padding: 0
}.brick-promo-list .brick-item-m img
{height: 300px
}.brick-promo-list .brick-item-s img
{height: 143px
}.brick-item
{position: relative;z-index: 1;float: left;width: 234px;margin-left: 14px;margin-bottom: 14px;background: #fff;-webkit-transition: all .2s linear;transition: all .2s linear
}.brick-item:hover
{z-index: 2
}.brick-item .flag
{position: absolute;top: 0;left: 50%;z-index: 2;width: 64px;height: 20px;margin-left: -32px;font-size: 12px;line-height: 20px;text-align: center;color: #fff
}.brick-item .flag-saleoff
{background-color: #e53935
}.brick-item .flag-postfree
{background-color: #ffac13;z-index: 4
}.brick-item .flag-gift
{background-color: #2196f3;z-index: 3
}.brick-item .flag-new
{background-color: #83c44e;z-index: 5
}.brick-item-l
{height: 614px
}.brick-item-m
{height: 246px;padding: 34px 0 20px;*zoom: 1
}.brick-item-m .figure-img
{width: 150px;height: 150px;margin: 0 auto 18px
}.brick-item-m .figure-img a
{display: block
}.brick-item-m .figure-img img
{width: 150px;height: 150px
}.brick-item-m .title
{margin: 0 10px;font-size: 14px;font-weight: 400;text-align: center
}.brick-item-m .title,.brick-item-m .title a
{color: #333
}.brick-item-m .title a
{display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1
}.brick-item-m .desc
{margin: 0 10px 10px;height: 18px;font-size: 12px;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1;color: #b0b0b0
}.brick-item-m .price
{margin: 0 10px 10px;text-align: center;color: #ff6700
}.brick-item-m .price del
{color: #b0b0b0
}.brick-item-m .rank
{margin: 0 10px;font-size: 12px;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1;color: #b0b0b0
}.brick-item-m .review-wrapper
{position: absolute;bottom: 0;left: 0;z-index: 3;width: 234px;height: 0;overflow: hidden;_zoom: 1;font-size: 12px;background: #ff6700;opacity: 0;filter: alpha(opacity=0)\9;-webkit-transition: all .2s linear;transition: all .2s linear
}.brick-item-m .review-wrapper a
{display: block;padding: 8px 30px;outline: 0
}.brick-item-m .review,.brick-item-m .author
{display: block
}.brick-item-m .review
{margin-bottom: 5px;color: #fff
}.brick-item-m .author
{color: #fff;color: rgba(255,255,255,0.6)
}.brick-item-m .date
{margin-left: 6px
}.brick-item-m-2
{height: 260px;padding: 20px 0
}.brick-item-m-2 .figure-img
{width: 160px;height: 160px
}.brick-item-m-2 .figure-img img
{width: 160px;height: 160px
}.brick-item-m-2 .title
{margin: 0 10px 2px
}.brick-item-m-2 .price
{margin: 0 10px 14px
}.brick-item-s
{height: 93px;padding-top: 50px
}.brick-item-s .figure-img
{position: absolute;right: 20px;top: 32px;width: 80px;height: 80px
}.brick-item-s .figure-img a
{display: block
}.brick-item-s .figure-img img
{width: 80px;height: 80px
}.brick-item-s .figure-more
{position: absolute;right: 35px;top: 48px;width: 48px;height: 48px
}.brick-item-s .figure-more a
{display: block;color: #ff6700
}.brick-item-s .title
{margin: -10px 110px 5px 30px;font-size: 14px;font-weight: 400
}.brick-item-s .title,.brick-item-s .title a
{color: #333
}.brick-item-s .title a
{display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1
}.brick-item-s .price
{margin: 0 110px 0 30px;font-size: 12px;color: #ff6700
}.brick-item-s .price .num
{font-size: 14px
}.brick-item-s .more
{display: block;margin: 0 110px 0 30px;font-size: 18px;color: #333
}.brick-item-s .more small
{display: block;font-size: 12px;color: #757575
}.brick-item-s i
{font-size: 48px;line-height: 48px
}.brick-item-active
{-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);box-shadow: 0 15px 30px rgba(0,0,0,0.1);-webkit-transform: translate3d(0, -2px, 0);transform: translate3d(0, -2px, 0)
}.brick-item-active .review-wrapper
{height: 76px;opacity: 1;filter: alpha(opacity=100)\9
}.review-list
{width: 1240px;height: 415px;margin: 0;padding: 0;list-style-type: none
}.review-item
{position: relative;float: left;width: 296px;height: 415px;margin-left: 14px;margin-bottom: 14px;background: #fff;-webkit-transition: all .2s linear;transition: all .2s linear
}.review-item:first-child,.review-item-first
{margin-left: 0
}.review-item:hover
{z-index: 2;-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);box-shadow: 0 15px 30px rgba(0,0,0,0.1);-webkit-transform: translate3d(0, -2px, 0);transform: translate3d(0, -2px, 0)
}.review-item .figure-img
{width: 296px;height: 220px;margin: 0 0 28px
}.review-item .figure-img a
{display: block
}.review-item .figure-img img
{width: 296px;height: 220px
}.review-item .review
{height: 72px;margin: 0 28px 22px;font-size: 14px;line-height: 24px;font-weight: 400;overflow: hidden;_zoom: 1
}.review-item .review,.review-item .review a
{color: #333
}.review-item .review a
{display: block
}.review-item .author
{position: relative;height: 18px;margin: 0 28px 8px;padding: 0 10px 0 0;font-size: 12px;color: #b0b0b0
}.review-item .author a
{color: #b0b0b0
}.review-item .avatar
{position: absolute;left: 0;top: 5px;width: 22px;height: 22px;border: 1px solid #e0e0e0;border-radius: 20px
}.review-item .info
{margin: 0 30px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1
}.review-item .title
{display: inline-block;*zoom: 1;*display: inline;margin: 0;font-size: 14px;font-weight: 400;max-width: 170px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1;vertical-align: bottom;color: #333
}.review-item .title a
{color: #333
}.review-item .sep
{color: #b0b0b0
}.review-item .price
{display: inline;margin: 0;color: #ff6700
}.content-list
{width: 1240px;height: 420px;margin: 0;padding: 0;list-style-type: none
}.content-item
{position: relative;float: left;width: 296px;height: 374px;padding: 45px 0 0;border-top: 1px solid #e0e0e0;margin-left: 14px;margin-bottom: 14px;background: #fff;-webkit-transition: all .2s linear;transition: all .2s linear
}.content-item:first-child,.content-item-first
{margin-left: 0
}.content-item:hover
{z-index: 2;-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);box-shadow: 0 15px 30px rgba(0,0,0,0.1);-webkit-transform: translate3d(0, -2px, 0);transform: translate3d(0, -2px, 0)
}.content-item .title
{margin: 0 10px 18px;font-size: 16px;font-weight: 400;text-align: center
}.content-item .item-list
{height: 340px;margin: 0;padding: 0;list-style-type: none;text-align: center;overflow: hidden;_zoom: 1;color: #333
}.content-item .item-list li
{float: left;width: 296px;height: 340px
}.content-item .item-list li.more .thumb
{display: block;width: 216px;height: 154px;margin: 30px auto 0
}.content-item .name
{margin: 0 20px 5px;font-size: 20px;font-weight: 400;line-height: 1.25;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1
}.content-item .name,.content-item .name a
{color: #333
}.content-item .name a
{display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1;outline: none
}.content-item .desc
{margin: 0 48px 10px;height: 40px;font-size: 12px;line-height: 20px;text-align: center;overflow: hidden;_zoom: 1;color: #b0b0b0
}.content-item .desc,.content-item .desc a
{color: #b0b0b0
}.content-item .price
{height: 21px;margin: 0 10px 15px;text-align: center;color: #333
}.content-item .price,.content-item .price a
{color: #333
}.content-item .figure-img
{width: 216px;height: 154px;margin: 0 auto
}.content-item .figure-img a
{display: block;height: 154px
}.content-item .figure-img img
{width: 216px;height: 154px
}.content-item .xm-pagers-wrapper
{position: absolute;bottom: 15px;left: 0;width: 296px
}.content-item .xm-controls .control
{position: absolute;top: 50%;margin-top: -20px;opacity: 0;filter: alpha(opacity=0)\9;-webkit-transition: all .6s;transition: all .6s
}.content-item .xm-controls .control-prev
{left: 0
}.content-item .xm-controls .control-next
{right: 0
}.content-item:hover .xm-controls .control
{opacity: 1;filter: alpha(opacity=100)\9
}.content-item-book
{border-top-color: #ffac13;color: #ffac13
}.content-item-theme
{border-top-color: #83c44e;color: #83c44e
}.content-item-game
{border-top-color: #e53935;color: #e53935
}.content-item-app
{border-top-color: #2196f3;color: #2196f3
}.video-list
{width: 1240px;height: 285px;margin: 0;padding: 0;list-style-type: none
}.video-item
{position: relative;float: left;width: 296px;height: 285px;margin-left: 14px;margin-bottom: 14px;text-align: center;background: #fff;-webkit-transition: all .2s linear;transition: all .2s linear
}.video-item:first-child,.video-item-first
{margin-left: 0
}.video-item:hover
{z-index: 2;-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);box-shadow: 0 15px 30px rgba(0,0,0,0.1);-webkit-transform: translate3d(0, -2px, 0);transform: translate3d(0, -2px, 0)
}.video-item .figure-img
{position: relative;width: 296px;height: 180px;margin: 0 0 28px
}.video-item .figure-img:hover .play
{background-color: #ff6700;border-color: #ff6700
}.video-item .figure-img a
{display: block;height: 180px
}.video-item .figure-img img
{width: 296px;height: 180px
}.video-item .play
{position: absolute;left: 20px;bottom: 10px;width: 32px;height: 20px;border: 2px solid #fff;border-radius: 12px;background-color: #424242;background-color: rgba(0,0,0,0.6);color: #fff;-webkit-transition: all .2s;transition: all .2s;overflow: hidden;_zoom: 1
}.video-item .play i
{font-size: 30px;line-height: 20px
}.video-item .title
{margin: 0 0 6px;font-size: 14px;font-weight: 400;text-align: center;color: #333
}.video-item .title a
{color: #333
}.video-item .title a:hover
{color: #ff6700
}.video-item .desc
{height: 18px;margin: 0;font-size: 12px;color: #b0b0b0
}.site-header .logo:after
{display: none
}.site-header .logo:hover:before
{opacity: 1;filter: alpha(opacity=100)\9;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)
}@-webkit-keyframes screen
{0%{-webkit-transform: translate3d(-35px, 55px, 0)}100%{-webkit-transform: translate3d(-90px, 55px, 0)}
}@keyframes screen
{0%{-webkit-transform: translate3d(-35px, 55px, 0);transform: translate3d(-35px, 55px, 0)}100%{-webkit-transform: translate3d(-90px, 55px, 0);transform: translate3d(-90px, 55px, 0)}
}.home-hero-container
{position: relative;z-index: 10
}.home-hero
{position: relative;margin-bottom: 26px
}.home-hero .home-hero-sub
{margin-top: 14px
}.ie6 .home-hero .home-hero-sub
{_margin-left: 0
}.site-header .nav-category .link-category
{visibility: hidden
}.site-category
{display: block
}.site-category-list
{height: 420px;border: 0;color: #fff;background: #333;background: rgba(0,0,0,0.6)
}.site-category-list .title
{color: #fff
}.site-category-list .title i
{color: #fff;color: rgba(255,255,255,0.5)
}.home-hero-slider
{position: relative;height: 460px;overflow: hidden;_zoom: 1
}.home-hero-slider .slide
{display: none;width: 1226px;height: 460px
}.home-hero-slider .slide a
{display: block
}.home-hero-slider .slide img
{width: 1226px;height: 460px
}.home-hero-slider .ui-wrapper .ui-prev
{left: 234px
}.home-hero-slider .ui-pager
{display: block;left: auto;right: 30px;width: 400px;text-align: right
}.home-channel-list
{margin: 0;padding: 3px;list-style-type: none;font-size: 12px;text-align: center;background: #5f5750
}.home-channel-list li
{position: relative;float: left;width: 70px;height: 82px;padding: 0 3px
}.home-channel-list li:before,.home-channel-list li:after
{position: absolute;content: "";background: #665e57
}.home-channel-list li:before
{top: -1px;left: 6px;width: 64px;height: 1px
}.home-channel-list li:after
{top: 6px;left: 0;width: 1px;height: 70px
}.home-channel-list li.top:before
{display: none
}.home-channel-list li.left:after
{display: none
}
.home-channel-list a
{display: block;padding-top: 18px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1;color: #fff;color: rgba(255,255,255,0.7);*color: #fff;-webkit-transition: color .2s;transition: color .2s
}.home-channel-list a:hover
{color: #fff
}.home-channel-list i
{display: block;height: 24px;margin-bottom: 4px;font-size: 24px;line-height: 24px
}.home-promo-list
{margin: 0;padding: 0;list-style-type: none
}.home-promo-list li
{float: left;width: 316px;height: 170px;margin-left: 15px;-webkit-transition: -webkit-box-shadow .2s linear;transition: box-shadow .2s linear
}.home-promo-list li:hover
{z-index: 2;-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);box-shadow: 0 15px 30px rgba(0,0,0,0.1)
}.home-promo-list li.first
{margin-left: 0
}.home-promo-list a
{display: block;height: 170px
}.home-promo-list img
{width: 316px;height: 170px
}.home-star-goods .box-hd .more
{top: 24px
}.home-star-goods .box-bd
{position: relative;width: 1226px;overflow: hidden;_zoom: 1;padding-bottom: 40px
}.home-star-goods .xm-carousel-wrapper
{height: 340px
}.home-star-goods .xm-controls-middle .control
{margin-left: 5px
}.home-star-goods .xm-carousel-list
{width: 1240px;height: 340px
}.home-star-goods .goods-list
{height: 340px;overflow: hidden;_zoom: 1
}.home-star-goods .goods-list li
{height: 300px;padding-top: 39px;border-top-width: 1px;border-top-style: solid;text-align: center;background: #fafafa;-webkit-transition: all .6s;transition: all .6s
}.home-star-goods .goods-list li:hover
{z-index: 2
}.home-star-goods .goods-list .thumb
{display: block;width: 160px;margin: 0 auto 22px
}.home-star-goods .goods-list .thumb img
{width: 160px;height: 160px
}.home-star-goods .goods-list .title
{margin: 0 20px 3px;font-size: 14px;font-weight: 400;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1
}.home-star-goods .goods-list .title,.home-star-goods .goods-list .title a
{color: #212121
}.home-star-goods .goods-list .desc
{height: 18px;margin: 0 20px 12px;font-size: 12px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;_zoom: 1;color: #b0b0b0
}.home-star-goods .goods-list .price
{margin: 0;color: #ff6709
}.home-star-goods .rainbow-list .rainbow-item-1
{border-top-color: #ffac13
}.home-star-goods .rainbow-list .rainbow-item-2
{border-top-color: #83c44e
}.home-star-goods .rainbow-list .rainbow-item-3
{border-top-color: #2196f3
}.home-star-goods .rainbow-list .rainbow-item-4
{border-top-color: #e53935
}.home-star-goods .rainbow-list .rainbow-item-5
{border-top-color: #00c0a5
}.home-star-goods .rainbow-list .rainbow-item-6
{border-top-color: #ffac13
}.home-star-goods .rainbow-list .rainbow-item-7
{border-top-color: #83c44e
}.home-star-goods .rainbow-list .rainbow-item-8
{border-top-color: #2196f3
}.home-star-goods .rainbow-list .rainbow-item-9
{border-top-color: #e53935
}.home-star-goods .rainbow-list .rainbow-item-10
{border-top-color: #00c0a5
}.home-star-goods .rainbow-list .rainbow-item-11
{border-top-color: #ffac13
}.home-star-goods .rainbow-list .rainbow-item-12
{border-top-color: #83c44e
}.home-star-goods .rainbow-list .rainbow-item-13
{border-top-color: #2196f3
}.home-star-goods .rainbow-list .rainbow-item-14
{border-top-color: #e53935
}.home-star-goods .rainbow-list .rainbow-item-15
{border-top-color: #00c0a5
}.home-star-goods .rainbow-list .rainbow-item-16
{border-top-color: #ffac13
}.home-star-goods .rainbow-list .rainbow-item-17
{border-top-color: #83c44e
}.home-star-goods .rainbow-list .rainbow-item-18
{border-top-color: #2196f3
}.home-star-goods .rainbow-list .rainbow-item-19
{border-top-color: #e53935
}.home-star-goods .rainbow-list .rainbow-item-20
{border-top-color: #00c0a5
}.home-main
{padding-top: 60px
}.home-brick-box
{margin-bottom: 8px
}.home-brick-box .box-hd .more .tab-list li
{margin: 0 0 0 30px
}.home-brick-box .brick-list,.home-brick-box .brick-promo-list
{margin: 0 0 -14px -14px;_margin-left: 0
}.home-brick-box .tab-content-hide
{display: none
}.ie6 .home-brick-box .span4
{margin-left: 0
}.ie6 .home-brick-box .brick-promo-list .brick-item
{margin-left: 0
}.ie6 .home-brick-box .brick-list
{width: 978px
}.ie6 .home-brick-box .brick-item
{margin-left: 8px
}.home-brick-row-1-box
{height: 358px
}.home-brick-row-2-box
{height: 686px
}.home-recm-box
{margin-bottom: 22px
}.home-recm-box .box-hd .more
{top: 15px
}.home-recm-box .xm-carousel-wrapper
{position: relative;width: 1226px
}.home-recm-box .xm-controls-middle .control
{margin-left: 5px
}.home-recm-box .xm-recommend ul.xm-carousel-list li
{-webkit-transition: all 0.2s linear;transition: all 0.2s linear
}.home-recm-box .xm-recommend ul.xm-carousel-list li:hover
{-webkit-transform: translate3d(0, -2px, 0);transform: translate3d(0, -2px, 0)
}.home-review-box
{margin-bottom: 22px
}.home-review-box .sep
{color: #e0e0e0
}.home-content-box
{margin-bottom: 22px
}.home-content-box .dot
{border-color: #fff
}.home-video-box
{margin-bottom: 60px
}.modal-video
{width: 880px;height: 596px;margin-top: -298px;margin-left: -440px;-webkit-box-shadow: 0 18px 30px rgba(0,0,0,0.18);box-shadow: 0 18px 30px rgba(0,0,0,0.18)
}.modal-video .modal-bd
{max-height: 536px;padding: 0
}.site-bn
{display: none;position: fixed;_position: absolute;top: 0;left: 0;z-index: 99;width: 100%
}.site-bn .container
{position: relative
}.site-bn .close
{position: absolute;top: 0;right: 0;width: 40px;height: 40px;text-align: center;font-size: 24px;line-height: 40px;background-color: #000;color: #fff;opacity: .4;filter: alpha(opacity=40)\9
}.site-bn .close:hover
{opacity: .6;filter: alpha(opacity=60)\9
}.site-bn-backdrop
{display: none;position: fixed;_position: absolute;top: 0;left: 0;z-index: 98;width: 100%;height: 1000px;background: #000;opacity: .3;filter: alpha(opacity=30)\9
}.site-bn-bar
{width: 100%;background-repeat: no-repeat;background-position: center 0
}.site-bn-bar .container
{position: relative
}.site-bn-bar .site-bn-bar-link
{display: block;width: 100%;height: 120px;text-indent: -9999em
}.doodle
{display: none
}.doodle .link-block
{position: absolute;left: 69px;bottom: 0;z-index: 21;width: 165px;height: 100px;background-repeat: no-repeat;background-position: center center;text-indent: -9999em
}.air-doodle
{display: none
}.air-doodle .link-block
{left: 70px;width: 75px;height: 75px;padding-left: 75px;padding-top: 25px;font-size: 12px;text-align: center;color: #b0b0b0
}.air-doodle .link-block:hover
{color: #b0b0b0
}.air-doodle .doodle-img
{position: absolute;left: 0;top: 12px;width: 75px;height: 75px
}.air-doodle .doodle-state
{display: block;font-size: 14px;color: #83c44e
}.air-doodle .doodle-info .city,.air-doodle .doodle-info .pm
{display: block
}.air-doodle .doodle-info .pm
{font-size: 10px
}js
/*** Created by Administrator on 2017/5/25.*/
$(function() {var $slider = $(".xm-star,.recommend");// 给xm-star 和recommend添加鼠标移入事件,根据this指向的对象查找按钮并添加点击事件$slider.mouseenter(function () {var $this = $(this),$sliderItem = $this.find(".brick-list"), //轮播项$pre = $this.find(".btn-group .pre"),$next = $this.find(".btn-group .next"),len = $sliderItem.children().length, //li个数width = 248 * len, //248为每个li的占位宽page = 0, //初始页面max = len / 5; //最大页面//设置ul宽度，以便使所有li排成一排$sliderItem.css("width", width);$pre.on("click",clickHandleFn);//设置button hover效果$pre.hover(mouseIn, mouseOut);$next.hover(mouseIn, mouseOut);function mouseIn() {if (!$(this).hasClass("disabled")) {$(this).addClass("active");}}function mouseOut() {if (!$(this).hasClass("disabled")) {$(this).removeClass("active");}}function clickHandleFn(e) {e.stopPropagation();console.log(e.currentTarget);if($(this).index()){page--;}else{page++;}move(page);$pre.off("click",clickHandleFn);$next.off("click",clickHandleFn);disable(page);enable(page);}//移动function move(page){$sliderItem.css("transform","translate("+ (-width / max)*page +"px)");}//禁用按钮function disable(page){if(page === 0){$next.off("click",clickHandleFn).addClass("disabled").removeClass("active");}if(page === max-1){$pre.off("click",clickHandleFn).addClass("disabled").removeClass("active");}}//激活按钮function enable(page) {if (page > 0) {$next.on("click", clickHandleFn).removeClass("disabled");}if (page < max - 1) {$pre.on("click", clickHandleFn).removeClass("disabled");}}});
});主要的核心代码如上所示，引用的js,css及图片请在源码中下载。
下载地址：点我下载
