當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

花了一天的时间给粉丝做了一个小米官网（高仿）

發布時間：2023/12/14 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了花了一天的时间给粉丝做了一个小米官网（高仿）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

身為前端程序員，經常會找幾個官網試試手，哈哈，這次拿小米官網試試手吧。

?效果圖：

項目結構

index.html

index.css

下載地址：點我下載

?效果圖：

項目結構

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><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><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><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> </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及圖片請在源碼中下載。

下載地址：點我下載

總結

以上是生活随笔為你收集整理的花了一天的时间给粉丝做了一个小米官网（高仿）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：什么是CSS特异性及其工作方式？
下一篇：完成 Orange3 数据挖掘汉化版