今天跟大家分享下仿小米商城html網頁原始碼，正在學習前端的伙伴可以參考下，html+CSS+JS都是全的，
下載方式：微信公眾號【IT學長】回復“小米商城原始碼”免費下載，
下載后如下圖：
首頁（index.html）
部分原始碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米首頁</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.1.11.1.min.js"></script>
<style>
</style>
</head>
<body>
<div class="box">
<div class="inner whiteGL">
<div class="left">
<a class="mix" href="">仿小米商城-學習專用</a>
</div>
<div class="right">
<a class="mix" href="login.html">登錄</a>
<a href="register.html">注冊</a>
<a class="max" href="">訊息通知</a>
<a href="trolley.html"><img src="img/cart.jpg" alt=""></a>
</div>
</div>
</div>
<div class="logo">
<div class="logo_left">
<div>
<a href="javascript:void(0);" title="小米官網"><img class="xiaomi" src="img/logo.jpg"></a>
</div>
</div>
<ul class="logo_center orangeGL">
<a href="">小米手機</a>
<a href="">紅米</a>
<a href="">筆記本</a>
<a href="">電視</a>
<a href="">盒子</a>
<a href="">新品</a>
<a href="">路由器</a>
<a href="">智能硬體</a>
<a href="">服務</a>
<a href="">社區</a>
</ul>
<formv class="logo_right">
<div class="logo_input"><input type="text">
<div class="logo_input_div">
<a class="logo_input_a" href="">小米5 新品</a>
<a class="logo_input_a" href="">小米Note 3</a>
</div>
</div>
<a class="logo_right_a"><img src="img/find.jpg"></a>
<!--<a href="">紅米5新品</a>-->
<!--<a href="">小米Noto 3</a>-->
</formv>
</div>
<div class="scroll">
<ul>
<li><a href="plus5.html"><img src="img/scroll_01.jpg" alt=""></a></li>
<li><a href="plus5.html"><img src="img/scroll_02.jpg" alt=""></a></li>
<li><a href="plus5.html"><img src="img/scroll_03.jpg" alt=""></a></li>
<li><a href="plus5.html"><img src="img/scroll_04.jpg" alt=""></a></li>
<li><a href="plus5.html"><img src="img/scroll_05.jpg" alt=""></a></li>
<li><a href="plus5.html"><img src="img/scroll_06.jpg" alt=""></a></li>
</ul>
<div class="scroll_dot">
<span class="scroll_dot_span"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="scroll_arrows">
<a href="javascript:void(0);"><span class="left scroll_arrows_back">〈</span></a>
<a href="javascript:void(0);"><span class="right scroll_arrows_back">〉</span></a>
</div>
<div class="scroll_left">
<ul class="scr-ul">
<li class="scr_li"><a href="">手機 電話卡</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">筆記本</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">電視 盒子</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">路由器 智能硬體</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">移動電源 電池 插線板</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">耳機 音響</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">保護套 貼膜</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">線材 支架 存盤卡</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">箱包 服飾 鞋 眼鏡</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">米兔 生活周邊</a><i class="scr_i"></i></li>
</ul>
</div>
<!--<div class="scroll_right"><img src="img/scroll_02.jpg"></div>-->
</div>
<div class="bot">
<div class="bot_max">
<div class="bot_first">
<div class="bot_one">
<div><a href=""><img src="img/bot_01.jpg">選購手機</a></div>
<div><a href=""><img src="img/bot_02.jpg">企業團購</a></div>
<div><a href=""><img src="img/bot_03.jpg">F碼通道</a></div>
<div><a href=""><img src="img/bot_04.jpg">img米粉卡</a></div>
<div><a href=""><img src="img/bot_05.jpg">以舊換新</a></div>
<div><a href=""><img src="img/bot_06.jpg">話費充值</a></div>
</div>
</div>
<a href="#"><img src="img/3_02.jpg" alt=""></a>
<a href="#"><img src="img/3_03.jpg" alt=""></a>
<a href="#"><img src="img/3_04.jpg" alt=""></a>
</div>
</div>
<div class="time">
<div class="H">小米明星單品</div>
<div class="time_in">
<div><a href=""><img class="time_min" src="img/4_01.jpg" alt=""></a></div>
<div><a href=""><img src="img/4_02.jpg" alt=""></a></div>
<div><a href=""><img src="img/4_03.jpg" alt=""></a></div>
<div><a href=""><img src="img/4_04.jpg" alt=""></a></div>
<div><a href=""><img src="img/4_05.jpg" alt=""></a></div>
</div>
</div>
<div class="appliances">
<div class="app_width">
<div class="app_A">家電</div>
<div class="app_Ar orangeGL">
<div class="app_Ar_r"><a href="">熱門</a></div>
<div class="app_Ar_r"><a href="">電視影音</a></div>
<div class="app_Ar_r"><a href="">電腦</a></div>
<div class="app_Ar_r"><a href="">家居</a></div>
</div>
<div class="app_max">
<div class="appl"><a href=""><img src="img/app_00.jpg" alt=""></a></div>
<div class="appr">
<div class="appr_top">
<div class="appr_min" id="appr_min1"><a href=""><img src="img/app_04.jpg" alt=""></a></div>
<div class="appr_min"><a href=""><img src="img/app_03.jpg" alt=""></a></div>
<div class="appr_min"><a href=""><img src="img/app_02.jpg" alt=""></a></div>
<div class="appr_min"><a href=""><img src="img/app_01.jpg" alt=""></a></div>
</div>
<div class="appr_bottom">
<div class="appr_min" id="appr_min2">
<div class="appr_min_top"><a href=""><img src="img/app_24.jpg" alt=""></a></div>
<div class="appr_min_bottom"><a href="">
<div class="figure_a">
<h3>瀏覽更多</h3>
<li style="color:#757575; ">熱門</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</a></div>
</div>
<div class="appr_min"><a href=""><img src="img/app_23.jpg" alt=""></a></div>
<div class="appr_min"><a href=""><img src="img/app_22.jpg" alt=""></a></div>
<div class="appr_min"><a href=""><img src="img/app_21.jpg" alt=""></a></div>
</div>
</div>
</div>
</div>
</div>`
<div class="capabackground">
<div class="capacity">
<div class="capa_box_top">
<div class="capa_box_top_al">智能</div>
<div class="capa_box_top_ar">
<div class="capa_box_top_ar_min orangeGL"><a class="script_capa_box_top_ar" href="javascript:;">路由器</a></div>
<div class="capa_box_top_ar_min orangeGL"><a class="script_capa_box_top_ar" href="javascript:;">酷玩</a></div>
<div class="capa_box_top_ar_min orangeGL"><a class="script_capa_box_top_ar" href="javascript:;">健康</a></div>
<div class="capa_box_top_ar_min orangeGL"><a class="script_capa_box_top_ar" href="javascript:;">出行</a></div>
<div class="capa_box_top_ar_min orangeGL"><a class="script_capa_box_top_ar" href="javascript:;">熱門</a></div>
</div>
</div>
<div class="capa_box scrip_capa_box scrip_capa_box_on">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_01.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_02.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div>
</a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能臺燈</li>
<li style="color: #b0b0b0">無可視頻閃,四種場景可變調光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"><div class="tran">
<span>現在看起來挺不錯的，性價比超高！持續關注呀</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">九號平衡車 Plus</li>
<li style="color: #b0b0b0">35km超長續航,一鍵自動跟隨</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg"><div class="tran">
<span>米兔智能故事機.</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事機</li>
<li style="color: #b0b0b0">微信遠程互動,智能語音互動</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_05.jpg" alt="">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒溫電水壺</li>
<li style="color: #b0b0b0">水溫智能控制,304不銹鋼內膽</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
<div class="capa_bottom">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_06.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_07.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">iHealth體溫計</li>
<li style="color: #b0b0b0">一秒速測,LED屏清晰讀數</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_08.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家行車記錄儀</li>
<li style="color: #b0b0b0">晚上能拍清車牌的行車記錄儀</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_09.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家iHealth血壓計</li>
<li style="color: #b0b0b0">爸媽上手就會用的智能血壓計</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
</ul>
</div>
</div>
<div class="capa capa_unright" >
<div class="capa_min ">
<img class="capa_shadow" src="img/capa_10.jpg">
</div>
<div class="capa_min bottom capa_shadow">
<div class="figure_a">
<h3>瀏覽更多</h3>
<li style="color:#757575; ">電影影視</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="capa_box scrip_capa_box ">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_05.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能臺燈</li>
<li style="color: #b0b0b0">無可視頻閃,四種場景可變調光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"><div class="tran">
<span>現在看起來挺不錯的，性價比超高！持續關注呀</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">九號平衡車 Plus</li>
<li style="color: #b0b0b0">35km超長續航,一鍵自動跟隨</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_02.jpg"><div class="tran">
<span>米兔智能故事機.</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事機</li>
<li style="color: #b0b0b0">微信遠程互動,智能語音互動</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_01.jpg" alt="">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒溫電水壺</li>
<li style="color: #b0b0b0">水溫智能控制,304不銹鋼內膽</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
<div class="capa_bottom">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_06.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_07.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">iHealth體溫計</li>
<li style="color: #b0b0b0">一秒速測,LED屏清晰讀數</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_08.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家行車記錄儀</li>
<li style="color: #b0b0b0">晚上能拍清車牌的行車記錄儀</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_09.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家iHealth血壓計</li>
<li style="color: #b0b0b0">爸媽上手就會用的智能血壓計</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
</ul>
</div>
</div>
<div class="capa capa_unright" >
<div class="capa_min ">
<img class="capa_shadow" src="img/capa_10.jpg">
</div>
<div class="capa_min bottom capa_shadow">
<div class="figure_a">
<h3>瀏覽更多</h3>
<li style="color:#757575; ">電影影視</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="capa_box scrip_capa_box">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_01.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_02.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能臺燈</li>
<li style="color: #b0b0b0">無可視頻閃,四種場景可變調光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"><div class="tran">
<span>現在看起來挺不錯的，性價比超高！持續關注呀</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">九號平衡車 Plus</li>
<li style="color: #b0b0b0">35km超長續航,一鍵自動跟隨</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg"><div class="tran">
<span>米兔智能故事機.</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事機</li>
<li style="color: #b0b0b0">微信遠程互動,智能語音互動</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_05.jpg" alt="">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒溫電水壺</li>
<li style="color: #b0b0b0">水溫智能控制,304不銹鋼內膽</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
<div class="capa_bottom">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_10.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_09.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">iHealth體溫計</li>
<li style="color: #b0b0b0">一秒速測,LED屏清晰讀數</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_08.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家行車記錄儀</li>
<li style="color: #b0b0b0">晚上能拍清車牌的行車記錄儀</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_07.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家iHealth血壓計</li>
<li style="color: #b0b0b0">爸媽上手就會用的智能血壓計</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
</ul>
</div>
</div>
<div class="capa capa_unright" >
<div class="capa_min ">
<img class="capa_shadow" src="img/capa_06.jpg">
</div>
<div class="capa_min bottom capa_shadow">
<div class="figure_a">
<h3>瀏覽更多</h3>
<li style="color:#757575; ">電影影視</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="capa_box scrip_capa_box">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能臺燈</li>
<li style="color: #b0b0b0">無可視頻閃,四種場景可變調光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"><div class="tran">
<span>現在看起來挺不錯的，性價比超高！持續關注呀</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">九號平衡車 Plus</li>
<li style="color: #b0b0b0">35km超長續航,一鍵自動跟隨</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg"><div class="tran">
<span>米兔智能故事機.</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事機</li>
<li style="color: #b0b0b0">微信遠程互動,智能語音互動</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_05.jpg" alt="">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒溫電水壺</li>
<li style="color: #b0b0b0">水溫智能控制,304不銹鋼內膽</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
<div class="capa_bottom">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_06.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_07.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">iHealth體溫計</li>
<li style="color: #b0b0b0">一秒速測,LED屏清晰讀數</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_08.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家行車記錄儀</li>
<li style="color: #b0b0b0">晚上能拍清車牌的行車記錄儀</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_09.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家iHealth血壓計</li>
<li style="color: #b0b0b0">爸媽上手就會用的智能血壓計</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
</ul>
</div>
</div>
<div class="capa capa_unright" >
<div class="capa_min ">
<img class="capa_shadow" src="img/capa_10.jpg">
</div>
<div class="capa_min bottom capa_shadow">
<div class="figure_a">
<h3>瀏覽更多</h3>
<li style="color:#757575; ">電影影視</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="capa_box scrip_capa_box">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_01.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_02.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能臺燈</li>
<li style="color: #b0b0b0">無可視頻閃,四種場景可變調光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"><div class="tran">
<span>現在看起來挺不錯的，性價比超高！持續關注呀</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">九號平衡車 Plus</li>
<li style="color: #b0b0b0">35km超長續航,一鍵自動跟隨</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg"><div class="tran">
<span>米兔智能故事機.</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事機</li>
<li style="color: #b0b0b0">微信遠程互動,智能語音互動</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_05.jpg" alt="">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒溫電水壺</li>
<li style="color: #b0b0b0">水溫智能控制,304不銹鋼內膽</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
<div class="capa_bottom">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_06.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_07.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">iHealth體溫計</li>
<li style="color: #b0b0b0">一秒速測,LED屏清晰讀數</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_08.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家行車記錄儀</li>
<li style="color: #b0b0b0">晚上能拍清車牌的行車記錄儀</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_09.jpg">
<div class="tran">
<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家iHealth血壓計</li>
<li style="color: #b0b0b0">爸媽上手就會用的智能血壓計</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
</ul>
</div>
</div>
<div class="capa capa_unright" >
<div class="capa_min ">
<img class="capa_shadow" src="img/capa_10.jpg">
</div>
<div class="capa_min bottom capa_shadow">
<div class="figure_a">
<h3>瀏覽更多</h3>
<li style="color:#757575; ">電影影視</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="recommend">
<div class="capacity">
<div class="capa_box_top">
<div class="capa_box_top_al">為你推薦</div>
<div class="capa_box_top_ar">
<!--<div class="capa_box_top_ar_min orangeGL"><a href="">路由器</a></div>-->
<!--<div class="capa_box_top_ar_min orangeGL"><a href="">酷玩</a></div>-->
<!--<div class="capa_box_top_ar_min orangeGL"><a href="">健康</a></div>-->
<!--<div class="capa_box_top_ar_min orangeGL"><a href="">出行</a></div>-->
<!--<div class="capa_box_top_ar_min orangeGL"><a href="">熱門</a></div>-->
</div>
</div>
<div class="capa_box">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_01.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_02.jpg">
<!--<div class="tran">-->
<!--<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>-->
<!--</div>-->
</a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能臺燈</li>
<li style="color: #b0b0b0">無可視頻閃,四種場景可變調光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg">
<!--<div class="tran">-->
<!--<span>現在看起來挺不錯的，性價比超高！持續關注呀</span>-->
<!--</div>-->
</a>
<div class="capa_a">
<ul>
<li style="color: #333333">九號平衡車 Plus</li>
<li style="color: #b0b0b0">35km超長續航,一鍵自動跟隨</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg">
<!--<div class="tran">-->
<!--<span>米兔智能故事機.</span>-->
<!--</div>-->
</a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事機</li>
<li style="color: #b0b0b0">微信遠程互動,智能語音互動</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_05.jpg" alt="">
<!--<div class="tran">-->
<!--<span>小米一如既往的好前天下單今天就到了，送貨到家很細心的...</span>-->
<!--</div>-->
</a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒溫電水壺</li>
<li style="color: #b0b0b0">水溫智能控制,304不銹鋼內膽</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="popular">
<div class="popular_background">
<div class="popular_box_top">
<div class="popular_box_top_al">熱門產品</div>
</div>
<div class="popu_box">
<div class="popu popu_unleft popu_shadow">
<a href=""><img src="img/popu_01.jpg"></a>
<div class="popu_bottom">
<p class="review">
外形簡潔大方，大愛小米！全家人都在用小米的產品，真心不錯，最主要的是性價比高，附圖，給客服妹子一個大...
</p>
<p class="author"> 來自于 秘密 的評價 </p>
<div class="info">
<h3 class="title">小米隨身藍牙音箱</h3>
<span class="sep">|</span>
<p class="price"><span>69</span>元</p>
</div>
</div>
</div>
<div class="popu popu_shadow">
<a href=""><img src="img/popu_02.jpg"></a>
<div class="popu_bottom">
<p class="review">
這箱子很好，外觀漂亮，實用性強，很輕，有點軟但不影響它的堅固，
</p>
<p class="author"> 來自于 秘密 的評價 </p>
<div class="info">
<h3 class="title">90分旅行箱 20寸</h3>
<span class="sep">|</span>
<p class="price"><span>229</span>元</p>
</div>
</div>
</div>
<div class="popu popu_shadow">
<a href=""><img src="img/popu_03.jpg"></a>
<div class="popu_bottom">
<p class="review">
安裝簡潔方便，信號不錯！！！！！
</p>
<p class="author"> 來自于 秘密 的評價 </p>
<div class="info">
<h3 class="title">小米路由器3</h3>
<span class="sep">|</span>
<p class="price"><span>149</span>元</p>
</div>
</div>
</div>
<div class="popu popu_shadow">
<a href=""><img src="img/popu_04.jpg"></a>
<div class="popu_bottom">
<p class="review">
包裝很讓人感動，式樣也很可愛，做出的飯全家人都愛吃，超愛五星！手機控制還是不太熟練，最主要是沒有連接...
</p>
<p class="author"> 來自于 秘密 的評價 </p>
<div class="info">
<h3 class="title">米家壓力IH電飯煲</h3>
<span class="sep">|</span>
<p class="price"><span>999</span>元</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="popular_background">
<div class="popular_box_top">
<div class="popular_box_top_al">內容</div>
</div>
<div class="popu_box">
<div class="popu cont_border_top1 popu_unleft popu_shadow">
<div class="popu_bottom">
<h2 class="con_title">圖書</h2>
<h4 class="popu_name">哈利·波特與被詛咒的孩子</h4>
<p class="popu_desc"><a href="">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！ </a></p>
<p class="popu_price"><a href="">29.37元</a></p>
</div>
<a href=""><img src="img/cont_01.jpg"></a>
</div>
<div class="popu cont_border_top2 popu_shadow ">
<div class="popu_bottom">
<h2 class="con_title">MIUI 主題</h2>
<h4 class="popu_name">包寶寶養成記</h4>
<p class="popu_desc"><a href="">包寶寶定制主題Q萌上線！快來領取萌萌包寶寶吧！</a></p>
<p class="popu_price"><a href="">4.2米幣</a></p>
</div>
<a href=""><img src="img/cont_02.jpg"></a>
</div>
<div class="popu cont_border_top3 popu_shadow ">
<div class="popu_bottom">
<h2 class="con_title">游戲</h2>
<h4 class="popu_name">小米超神</h4>
<p class="popu_desc"><a href="">實力派！一起團！</a></p>
<p class="popu_price"><a href=""></a></p>
</div>
<a href=""><img src="img/cont_03.jpg"></a>
</div>
<div class="popu popu_border_top4 popu_shadow ">
<div class="popu_bottom">
<h2 class="con_title">應用</h2>
<h4 class="popu_name">2017金米獎</h4>
<p class="popu_desc"><a href="">最優秀的應用和游戲</a></p>
<p class="popu_price"><a href=""></a></p>
</div>
<a href=""><img src="img/cont_04.jpg"></a>
</div>
</div>
</div>
</div>
<div class="video">
<div class="popular_background">
<div class="popular_box_top">
<div class="popular_box_top_al">視頻</div>
</div>
<div class="popu_box">
<div class="vid popu_unleft popu_shadow">
<div class="video_top">
<a href=""><video class="this_vid" src="img/snowPerson.mp4" controls loop poster="img/video_01.jpg"></video></a>
</div>
<div class="video_bottom">
<h3 class="vid_title"><a href="">小米8，一部與眾不同的手機</a></h3>
<p class="vid_desc">透明探索版，將科技與美學完美結合</p>
</div>
</div>
<div class="vid popu_shadow">
<div class="video_top">
<a href=""><video class="this_vid" src="img/snowPerson.mp4" controls loop poster="img/video_02.jpg"></video></a>
</div>
<div class="video_bottom">
<h3 class="vid_title"><a href="">小米MIX 2S，一面科技 一面藝術</a></h3>
<p class="vid_desc">藝術品般陶瓷機身，驚艷、璀璨</p>
</div>
</div>
<div class="vid popu_shadow">
<div class="video_top">
<a href=""><video class="this_vid" src="img/snowPerson.mp4" controls loop poster="img/video_03.jpg"></video></a>
</div>
<div class="video_bottom">
<h3 class="vid_title"><a href="">天生麗質的小米6X</a></h3>
<p class="vid_desc">讓你一見傾心</p>
</div>
</div>
<div class="vid popu_shadow">
<div class="video_top">
<a href=""><video class="this_vid" src="img/snowPerson.mp4" controls loop poster="img/video_01.jpg"></video></a>
</div>
<div class="video_bottom">
<h3 class="vid_title"><a href="">生活中無所不在的小愛同學</a></h3>
<p class="vid_desc">透明探索版，將科技與美學完美結合</p>
</div>
</div>
</div>
</div>
</div>
<div class="foot">
<ul class="foot_ul">
<li class="foot_li">預約維修服務</li>
<li class="foot_li">7天無理由退貨</li>
<li class="foot_li">15天免費換貨</li>
<li class="foot_li">滿15元包郵</li>
<li class="foot_li foot_fot">520余家售后網點</li>
</ul>
<div class="foot_center">
<div class="foot_cen_left">
<dl class="foot_dl">
<dt class="foot_dt">幫助中心</dt>
<dd class="foot_dd"><a>賬戶管理</a></dd>
<dd class="foot_dd"><a>購物指南</a></dd>
<dd class="foot_dd"><a>訂單操作</a></dd>
</dl>
<dl class="foot_dl">
<dt class="foot_dt">幫助中心</dt>
<dd class="foot_dd"><a>賬戶管理</a></dd>
<dd class="foot_dd"><a>購物指南</a></dd>
<dd class="foot_dd"><a>訂單操作</a></dd>
</dl>
<dl class="foot_dl">
<dt class="foot_dt">幫助中心</dt>
<dd class="foot_dd"><a>賬戶管理</a></dd>
<dd class="foot_dd"><a>購物指南</a></dd>
<dd class="foot_dd"><a>訂單操作</a></dd>
</dl>
<dl class="foot_dl">
<dt class="foot_dt">幫助中心</dt>
<dd class="foot_dd"><a>賬戶管理</a></dd>
<dd class="foot_dd"><a>購物指南</a></dd>
<dd class="foot_dd"><a>訂單操作</a></dd>
</dl>
<dl class="foot_dl">
<dt class="foot_dt">幫助中心</dt>
<dd class="foot_dd"><a>賬戶管理</a></dd>
<dd class="foot_dd"><a>購物指南</a></dd>
<dd class="foot_dd"><a>訂單操作</a></dd>
</dl>
<dl class="foot_dl">
<dt class="foot_dt">幫助中心</dt>
<dd class="foot_dd"><a>賬戶管理</a></dd>
<dd class="foot_dd"><a>購物指南</a></dd>
<dd class="foot_dd"><a>訂單操作</a></dd>
</dl>
</div>
<div class="foot_cen_right">
<p class="foot-phone">400-100-5678</p>
<p class="foot-right-center">周一至周日 8:00-18:00<br>（僅收市話費)</p>
<a class="foot-right-bottmo" href="">聯系客服</a>
</div>
</div>
</div>
<div class="fot_bot_max">
<div class="fot_bot">
<img src="img/logo.jpg" class="fot_bot_logo" >
<div class="fot_bot_text">
<p class="fot_bot_p">
<a class="fot_bot_a" href="">小米商城</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">MIUI</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">米家</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">米聊</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">多看</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">游戲</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">路由器</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">米粉卡</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">政企服務</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">小米天貓店</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">隱私政策</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">問題反饋</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">廉政舉報</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">Select Region</a>
</p>
<p class="fot_bot_p fot_bot_a1">
"?"
<a class="fot_bot_a1" href="">mi.con</a>
" 京ICP證110507號"
<a class="fot_bot_a1" href="">京ICP備10046444號</a>
<a class="fot_bot_a1" href="">京公網安備11010802020134號</a>
<a class="fot_bot_a1" href="">京網文[2017]1530-131號</a>
"<br>違法和不良資訊舉報電話：185-0130-1238，本網站所列資料，除特殊說明，所有資料均出自我司實驗室測驗"
</p>
</div>
<div class="fot_bot_right">
<a href="" class="fot_bot_right_img"><img src="img/foot_01.png" alt=""></a>
<a href="" class="fot_bot_right_img"><img src="img/foot_02.png" alt=""></a>
<a href="" class="fot_bot_right_img"><img src="img/foot_03.png" alt=""></a>
<a href="" class="fot_bot_right_img"><img src="img/foot_04.png" alt=""></a>
<a href="" class="fot_bot_right_img"><img src="img/foot_05.png" alt=""></a>
</div>
</div>
<img class="fot_bottom_img" src="img/foot_06.png">
</div>
<script>
var abc = document.getElementsByClassName("script_capa_box_top_ar");
console.log("abc:"+abc);
console.log("abc[0]"+abc[0]);
var box = document.getElementsByClassName("scrip_capa_box");
console.log("box:"+box);
console.log("box[0]:"+box[0]);
for(var i = 0; i<abc.length;i++){
abc[i].index=i;
abc[i].onmouseover=function(){
for(var j = 0 ;j<abc.length;j++){
box[j].className="capa_box scrip_capa_box";
}
box[this.index].className="capa_box scrip_capa_box scrip_capa_box_on"
console.log("this.index:"+this.index);
}
}
var n = 0;
/*setInterval(function () {
n++;
if(n > $(".scroll ul li").length){
n=0;
}
$(".scroll ul li").css("opacity","0").eq(n).css("opacity","1")
},100)*/
var t = setInterval(fun,1000);
function fun() {
n++;
if(n > $(".scroll>ul>li").length-1){
n = 0;
}
$(".scroll>ul>li").css("opacity","0").eq(n).css("opacity","1")
$(".scroll_dot span").eq(n).addClass("scroll_dot_span").siblings().removeClass("scroll_dot_span");
}
$(".scroll_arrows .left").click(function() {
n -= 2;
if(n <-1){
n=4;
}
fun()
} );
$(".scroll_arrows .right").click(function() {
fun()
});
$(".scroll_dot span").click(function () {
console.log($(this).index());
n=$(this).index()-1;
$(this).siblings().removeClass("scroll_dot_span").end().addClass("scroll_dot_span");
fun()
}); $(".scroll").hover(function () {
clearInterval(t);
},
function () {
t = setInterval(fun,1000);
});
</script>
</body>
</html>
登錄頁（login.html）
部分原始碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.1.11.1.min.js"></script>
<style>
</style>
</head>
<body>
<div class="register_head_on">
</div>
<div class="register_head">
<a href="index.html"><img src="img/logo.jpg" alt=""></a>
<div class="register_head_right">
<p class="register_head_right_p1">小 米 商 城</p>
<p class="register_head_right_p2">讓每個人都享受科技樂趣</p>
</div>
</div>
<div class="register">
<div class="register_boby">
<div class="register_boby_min">
<div class="register_boby_no1">
<div class="register_boby_no1_in">
<span style="color: #ff6700">賬號登錄 </span>
<span class="register_boby_sapn"> | </span>
<span> 掃碼登錄</span>
</div>
</div>
<div class="register_boby_no2">
<input type="text" placeholder="郵箱/手機號碼/小米ID">
<input type="password" placeholder="密碼">
<div class="register_boby_no2_div">
<span>登錄</span>
</div>
</div>
<div class="register_boby_no3">
<a href="javascript:void(0);" style="color: #ff6700">手機短信登錄/注冊</a>
<sapn class="register_boby_no3_span">
<a href="avascript:void(0);">立即注冊</a>
<span>|</span>
<a href="avascript:void(0);">忘記密碼?</a>
</sapn>
</div>
<div class="register_boby_no4">
<img src="img/register02.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="register_foot">
<img src="img/register03.jpg" alt="">
</div>
</body>
</html>
注冊頁（register.html）
詳情頁（plus5.html）
訂單頁（order.html）
購物車頁
以上就是小米商城的所有介紹，文中只粘貼了部分原始碼僅供參考，獲取詳細原始碼請在微信公眾號【IT學長】回復“小米商城原始碼”自行下載，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/396225.html
標籤：其他
上一篇：物資資訊管理系統（springboot+bootstrap+jquery+ajax適合才學完springboot的童鞋，基本的增刪改查）