導讀：秒殺的檢索結果,小米官方網站包含秒殺價格及秒殺適配機型,官方推薦秒殺產品,幫助米粉挑選合適自己的秒殺商品。
仿小米手機商城的全套頁面。包含首頁,訂單頁,列表頁,商品詳情頁,個人中心,購物車,等等幾十個頁面。 有輪播的實現，demo 基於html css 實現小米官網部分內容搭建。
目錄
效果圖：
項目結構：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米官網</title>
<link rel="icon" href="img/favicon.png" type="image/png">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 頭部開始 -->
<div class="head">
<div class="head_main">
<div class="head_left">
<a href="" class="head_wenzi">小米商城</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">MIUI</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">米聊</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">遊戲</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">多看閱讀</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">雲服務</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">金融</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">小米商城移動版</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">問題反饋</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">Select Region</a>
</div>
<div class="head_right">
<a href="" class="head_wenzi">登錄</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">註冊</a>
<div class="head_line"></div>
<a href="" class="head_wenzi">消息通知</a>
<div class="head_car">
<span class="head_car1"></span>
<span class="head_car2">購物車<i>(0)</i></span>
</div>
</div>
</div>
</div>
<!-- 頭部結束 -->
<!-- 導航開始 -->
<main class="nav">
<img src="img/mi-logo.png" alt="" class="nav_logo">
<div class="nav_wenzi">
<li>小米手機
<div class="nav_wenzi_bottom">
<div class="nav_wenzi_bottom_kuang">
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang1.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang1.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang1.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
</div>
</div>
</li>
<li>紅米
<div class="nav_wenzi_bottom">
<div class="nav_wenzi_bottom_kuang">
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang2.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang2.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang2.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
</div>
</div>
</li>
<li>電視
<div class="nav_wenzi_bottom">
<div class="nav_wenzi_bottom_kuang">
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang3.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang3.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang3.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
</div>
</div>
</li>
<li>筆記本
<div class="nav_wenzi_bottom">
<div class="nav_wenzi_bottom_kuang">
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang4.jpg" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang4.jpg" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang4.jpg" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
</div>
</div>
</li>
<li>盒子
<div class="nav_wenzi_bottom">
<div class="nav_wenzi_bottom_kuang">
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang5.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang5.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang5.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
</div>
</div>
</li>
<li>新品
<div class="nav_wenzi_bottom">
<div class="nav_wenzi_bottom_kuang">
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang6.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang6.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang6.png" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
</div>
</div>
</li>
<li>路由器
<div class="nav_wenzi_bottom">
<div class="nav_wenzi_bottom_kuang">
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang7.jpg" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang7.jpg" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang7.jpg" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
</div>
</div>
</li>
<li>智能硬件
<div class="nav_wenzi_bottom">
<div class="nav_wenzi_bottom_kuang">
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang8.jpg" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang8.jpg" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
<div class="nav_wenzi_bottom_kuang_tu">
<div class="nav_wenzi_bottom_kuang_tu_1">
<span>熱賣</span>
</div>
<div class="nav_wenzi_bottom_kuang_tu_img">
<img src="img/3.10shang8.jpg" alt="">
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
小米MIX2
</div>
<div class="nav_wenzi_bottom_kuang_tu_zi">
3299元起
</div>
</div>
</div>
</div>
</li>
<li>服務
</li>
<li>社區
</li>
</div>
<form action="">
<div class="search">
<input type="text" class="sousuo" placeholder="紅米5plus 小米Note3">
<input type="button" class="search_button" value="">
</div>
</form>
</main>
<!-- 導航結束 -->
<!-- banner開始 -->
<div id="banner">
<!--<div class="banner_img">-->
<ul class="imgbox">
<li class="active"><img src="img/banner1.jpg" alt=""></li>
<li><img src="img/banner2.jpg" alt=""></li>
<li><img src="img/banner3.jpg" alt=""></li>
<li><img src="img/banner4.jpg" alt=""></li>
<li><img src="img/banner5.jpg" alt=""></li>
</ul>
<!--</div>-->
<ul class="banner_nav">
<li>
<div class="banner_nav_tan">
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
</div>
<sapn class="banner_title">手機 電話卡</sapn>
<span class="banner_jiantou">></span>
</li>
<li>
<div class="banner_nav_tan">
<div class="banner_nav_tan_tu2">
<img src="img/3.10dianshi.jpg" alt="">
<p>小米電視4A 32英寸</p>
</div>
<div class="banner_nav_tan_tu2">
<img src="img/3.10dianshi.jpg" alt="">
<p>小米電視4A 32英寸</p>
</div>
<div class="banner_nav_tan_tu2">
<img src="img/3.10dianshi.jpg" alt="">
<p>小米電視4A 32英寸</p>
</div> <div class="banner_nav_tan_tu2">
<img src="img/3.10dianshi.jpg" alt="">
<p>小米電視4A 32英寸</p>
</div>
</div>
<sapn class="banner_title">電視 盒子</sapn>
<span class="banner_jiantou">></span>
</li>
<li>
<div class="banner_nav_tan">
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu3.jpg" alt="">
<p>筆記本Air 13.3"</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu3.jpg" alt="">
<p>筆記本Air 13.3"</p>
</div>
</div>
<sapn class="banner_title">筆記本</sapn>
<span class="banner_jiantou">></span>
</li>
<li>
<div class="banner_nav_tan">
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu4.jpg" alt="">
<p>空氣進化器2</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu4.jpg" alt="">
<p>空氣進化器2</p>
</div>
</div>
<sapn class="banner_title">智能 家電</sapn>
<span class="banner_jiantou">></span>
</li>
<li>
<div class="banner_nav_tan">
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
</div>
<sapn class="banner_title">健康 家局</sapn>
<span class="banner_jiantou">></span>
</li>
<li>
<div class="banner_nav_tan">
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
</div>
<sapn class="banner_title">出行 兒童</sapn>
<span class="banner_jiantou">></span>
</li>
<li>
<div class="banner_nav_tan">
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
</div>
<sapn class="banner_title">路由器 手機配件</sapn>
<span class="banner_jiantou">></span>
</li>
<li>
<div class="banner_nav_tan">
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
</div>
<sapn class="banner_title">移動電源 插線板</sapn>
<span class="banner_jiantou">></span>
</li>
<li>
<div class="banner_nav_tan">
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
</div>
<sapn class="banner_title">耳機 音響</sapn>
<span class="banner_jiantou">></span>
</li>
<li>
<div class="banner_nav_tan">
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
<div class="banner_nav_tan_tu1">
<img src="img/3.10tu1.png" alt="">
<p>小米Note3</p>
</div>
</div>
<sapn class="banner_title">生活 米兔</sapn>
<span class="banner_jiantou">></span>
</li>
</ul>
<div class="banner_btn banner_lbtn"><</div>
<div class="banner_btn banner_rbtn">></div>
<ul class="pagers">
<li class="active2"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- banner結束 -->
<!-- 導航底部開始 -->
<div class="nav_bottom">
<div class="nav_bottom1">
<div class="nav_bottom1_wz">
<span class="nav_bt"></span>
<h1 class="nav_bt_wz">選購手機</h1>
</div>
<div class="nav_bottom1_wz">
<span class="nav_bt"></span>
<h1 class="nav_bt_wz">企業團購</h1>
</div>
<div class="nav_bottom1_wz">
<span class="nav_bt"></span>
<h1 class="nav_bt_wz">F碼通道</h1>
</div>
<div class="nav_bottom1_wz">
<span class="nav_bt"></span>
<h1 class="nav_bt_wz">小米移動</h1>
</div>
<div class="nav_bottom1_wz">
<span class="nav_bt"></span>
<h1 class="nav_bt_wz">以舊換新</h1>
</div>
<div class="nav_bottom1_wz">
<span class="nav_bt"></span>
<h1 class="nav_bt_wz">話費充值</h1>
</div>
</div>
<div class="nav_bottom2">
<img src="img/navbt1.jpg" alt="" class="nav_bottom2_tu">
</div>
<div class="nav_bottom2">
<img src="img/navbt2.jpg" alt="" class="nav_bottom2_tu">
</div>
<div class="nav_bottom2">
<img src="img/navbt3.jpg" alt="" class="nav_bottom2_tu">
</div>
</div>
<!-- 導航底部結束 -->
<!-- 小米單品開始 -->
<section class="star">
<div class="star_top">
<h1>小米明星單品</h1>
<div class="star_btn">
<div class="star_btn_x star_btn1 disable"><</div>
<div class="star_btn_d">></div>
</div>
</div>
<div class="star_bottom">
<div class="buy_time">
<img src="img/3.10shijian_03.png" alt="">
</div>
<div class="buy_long">
<ul class="buy_inner">
<li class="star_item">
<img src="img/shouhaun.png" alt="">
<h1>小米手環2</h1>
<h2>OLED 顯示屏幕，升級計步算法</h2>
<h3>149元</h3>
</li>
<li class="star_item star_item2">
<img src="img/saodi.png" alt="">
<h1>米家掃地機器人</h1>
<h2>愛乾淨，高效完成清掃任務</h2>
<h3>1499元</h3>
</li>
<li class="star_item star_item3">
<img src="img/water.jpg" alt="">
<h1>小米淨水器,廚下式</h1>
<h2>直出純淨水，隱藏式安裝</h2>
<h3>1999元</h3>
</li>
<li class="star_item star_item4 ">
<img src="img/luyouqi.png" alt="">
<h1>小米路由器3</h1>
<h2>更快更強，不止四天線</h2>
<h3>143元</h3>
</li>
<li class="star_item">
<img src="img/shouhaun.png" alt="">
<h1>小米手環2</h1>
<h2>OLED 顯示屏幕，升級計步算法</h2>
<h3>149元</h3>
</li>
<li class="star_item star_item2">
<img src="img/saodi.png" alt="">
<h1>米家掃地機器人</h1>
<h2>愛乾淨，高效完成清掃任務</h2>
<h3>1499元</h3>
</li>
<li class="star_item star_item3">
<img src="img/water.jpg" alt="">
<h1>小米淨水器,廚下式</h1>
<h2>直出純淨水，隱藏式安裝</h2>
<h3>1999元</h3>
</li>
<li class="star_item star_item4 ">
<img src="img/luyouqi.png" alt="">
<h1>小米路由器3</h1>
<h2>更快更強，不止四天線</h2>
<h3>143元</h3>
</li>
<li class="star_item">
<img src="img/shouhaun.png" alt="">
<h1>小米手環2</h1>
<h2>OLED 顯示屏幕，升級計步算法</h2>
<h3>149元</h3>
</li>
<li class="star_item star_item2">
<img src="img/saodi.png" alt="">
<h1>米家掃地機器人</h1>
<h2>愛乾淨，高效完成清掃任務</h2>
<h3>1499元</h3>
</li>
<li class="star_item star_item3">
<img src="img/water.jpg" alt="">
<h1>小米淨水器,廚下式</h1>
<h2>直出純淨水，隱藏式安裝</h2>
<h3>1999元</h3>
</li>
<li class="star_item star_item4 ">
<img src="img/luyouqi.png" alt="">
<h1>小米路由器3</h1>
<h2>更快更強，不止四天線</h2>
<h3>143元</h3>
</li>
</ul>
</div>
</div>
</section>
<!-- 小米單品結束 -->
<!-- 中間部分開始 -->
<div class="content">
<!-- 智能開始 -->
<section class="zhineng">
<div class="zhineng_top">
<h1>智能硬件</h1>
<div class="zhineng_more">
<h1 class="zhineng_more_together">查看全部</h1>
<span class="quanbu zhineng_more_together"></span>
<!-- <img src="img/btn.png" alt="" class="btn"> -->
</div>
</div>
<img src="img/aa.jpg" alt="" class="aaa">
<div class="big_pic">
<div class="big_pic_1">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/tv.jpg" alt="" class="pic_1_tu">
<a href="">小米電視4A 32英寸</a>
<p>64位四核處理器/1GB+4GB</p>
<h1>999元
<span>1100元</span>
</h1>
<div class="zhineng_tan">
小米電視太給力了
</div>
</div>
<div class="big_pic_1">
<div class="big_pic_1tu">
享9.2折
</div>
<img src="img/xm4A.png" alt="" class="pic_1_tu">
<a href="">小米電視4A 49英寸 標準版</a>
<p>2GB+8GB大存儲/全高清</p>
<h1>2199元
<span>2300元</span>
</h1>
</div>
<div class="big_pic_1">
<img src="img/bjb1.jpg" alt="" class="pic_1_tu">
<a href="">13.3"小米筆記本Air</a>
<p><br></p>
<h1>5199元</h1>
<div class="zhineng_tan">
小米電視太給力了
</div>
</div>
<div class="big_pic_1 pic_right">
<img src="img/bjb2.jpg" alt="" class="pic_1_tu">
<a href="">15.6"小米筆記本Air</a>
<p><br></p>
<h1>6999元</h1>
</div>
<div class="big_pic_1 pic_top">
<div class="big_pic_1tu big_pic_2tu">
新品
</div>
<img src="img/dp.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p>亮度色可調，十年使用壽命</p>
<h1>59元</h1>
<div class="zhineng_tan">
小米電視太給力了
</div>
</div>
<div class="big_pic_1 pic_top">
<img src="img/jhq.png" alt="" class="pic_1_tu">
<a href="">米家空氣淨化器Pro</a>
<p>限量贈59元插線板</p>
<h1>1199元
<span>1499元</span>
</h1>
</div>
<div class="big_pic_1 pic_top">
<img src="img/sb0.jpg" alt="" class="pic_1_tu">
<a href="">米家電水壺</a>
<p>一杯水，是一家人的安心</p>
<h1>99元</h1>
<div class="zhineng_tan">
小米電視太給力了
</div>
</div>
<div class="big_pic_1 pic_right pic_top">
<img src="img/tv.jpg" alt="" class="pic_1_tu">
<a href="">小米電視</a>
<p>3000+煮米方案</p>
<h1>375元</h1>
<div class="zhineng_tan">
小米電視太給力了
</div>
</div>
</div>
</section>
<!-- 智能結束 -->
<!-- 搭配開始 -->
<main class="dapei">
<div class="dapei_top">
<h1>搭配</h1>
<div class="renmen_wenzi remenright">
<span>熱門</span>
</div>
<div class="renmen_wenzi">
<span>耳機音響</span>
</div>
<div class="renmen_wenzi">
<span>電源</span>
</div>
<div class="renmen_wenzi">
<span class="active">電池存儲卡</span>
</div>
</div>
<div class="dapei_bottom">
<div class="qiehuan_left">
<div class="dapei_bottom1">
<img src="img/dp1.jpg" alt="" class="size">
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<img src="img/twj.jpg" alt="" class="size">
</div>
</div>
<div class="qiehuan_right">
<div class="goodlist active1">
<div class="dapei_bottom1 ">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp4t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp5t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp6t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
<div class="goodlist">
<div class="dapei_bottom1 ">
<img src="img/dp5t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp6t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
<div class="goodlist">
<div class="dapei_bottom1 ">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp4t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
<div class="goodlist">
<div class="dapei_bottom1 ">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp6t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp5t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp1.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
</div>
</div>
</main>
<!-- 搭配結束 -->
<!-- 配件開始 -->
<main class="dapei">
<div class="dapei_top">
<h1>搭配</h1>
<div class="renmen_wenzi remenright">
<span>熱門</span>
</div>
<div class="renmen_wenzi">
<span>耳機音響</span>
</div>
<div class="renmen_wenzi">
<span>電源</span>
</div>
<div class="renmen_wenzi">
<span class="active">電池存儲卡</span>
</div>
</div>
<div class="dapei_bottom">
<div class="qiehuan_left">
<div class="dapei_bottom1">
<img src="img/dp1.jpg" alt="" class="size">
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<img src="img/twj.jpg" alt="" class="size">
</div>
</div>
<div class="qiehuan_right">
<div class="goodlist active1">
<div class="dapei_bottom1 ">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp4t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp5t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp6t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
<div class="goodlist">
<div class="dapei_bottom1 ">
<img src="img/dp5t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp6t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
<div class="goodlist">
<div class="dapei_bottom1 ">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp4t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
<div class="goodlist">
<div class="dapei_bottom1 ">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp6t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp5t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp1.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
</div>
</div>
</main>
<!-- 配件結束 -->
<!-- 周邊開始 -->
<main class="dapei">
<div class="dapei_top">
<h1>搭配</h1>
<div class="renmen_wenzi remenright">
<span>熱門</span>
</div>
<div class="renmen_wenzi">
<span>耳機音響</span>
</div>
<div class="renmen_wenzi">
<span>電源</span>
</div>
<div class="renmen_wenzi">
<span class="active">電池存儲卡</span>
</div>
</div>
<div class="dapei_bottom">
<div class="qiehuan_left">
<div class="dapei_bottom1">
<img src="img/dp1.jpg" alt="" class="size">
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<img src="img/twj.jpg" alt="" class="size">
</div>
</div>
<div class="qiehuan_right">
<div class="goodlist active1">
<div class="dapei_bottom1 ">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp4t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp5t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp6t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
<div class="goodlist">
<div class="dapei_bottom1 ">
<img src="img/dp5t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp6t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
<div class="goodlist">
<div class="dapei_bottom1 ">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp4t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
<div class="goodlist">
<div class="dapei_bottom1 ">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">新小米移動電源2 (10000mAh)</a>
<p class="ys1">79元</p>
<h1 class="ys2">2757人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp2t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2C 20000mAh</a>
<p class="ys1">192元</p>
<h1 class="ys2">1.4萬人評價</h1>
<div class="dapei_tan">
小米電視太給力了
</div>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp3t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源10000mAh高配版</a>
<p class="ys1">129元</p>
<h1 class="ys2">2萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/dp1t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源2 (5000mAh版)</a>
<p class="ys1">49元</p>
<h1 class="ys2">191人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_top">
<div class="big_pic_1tu">
享9折
</div>
<img src="img/dp6t.jpg" alt="" class="pic_1_tu">
<a href="">ZMI雙模智能充電器+充電寶</a>
<p class="ys1">109元</p>
<h1 class="ys2">100人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp7t.jpg" alt="" class="pic_1_tu">
<a href="">小米移動電源5000mAh</a>
<p class="ys1">49元</p>
<h1 class="ys2">10.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp5t.jpg" alt="" class="pic_1_tu">
<a href="">小米活塞耳機 清新版</a>
<p class="ys1">25元</p>
<h1 class="ys2">9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left dapei_bottom_top">
<img src="img/dp1.jpg" alt="" class="pic_1_tu">
<a href="">飛利浦智睿蠟燭燈泡 水晶版</a>
<p class="ys1">亮度色可調，十年使用壽命</p>
<h1 class="ys2">59元</h1>
</div>
</div>
</div>
</div>
</main>
<!-- 周邊結束 -->
<!-- 爲你推薦開始 -->
<div class="bk_tj">
<div class="star_top star_tj">
<h1>爲你推薦</h1>
<div class="star_btn">
<div class="star_btn_x star_btn1"><</div>
<div class="star_btn_d">></div>
</div>
</div>
<div class="dapei_bottom tujian">
<div class="dapei_bottom1">
<img src="img/tj1.jpg" alt="" class="pic_1_tu">
<a href="">紅米手機4A 全網通版 16GB</a>
<p>549元</p>
<h1>2.9萬人評價</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/tj2.jpg" alt="" class="pic_1_tu">
<a href="">紅米Note 4X 全網通版</a>
<p>899元</p>
<h1>10.5萬人好評</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/tj3.jpg" alt="" class="pic_1_tu">
<a href="">小米V領短袖T恤 男款</a>
<p>39元</p>
<h1>7409人好評</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/tj4.jpg" alt="" class="pic_1_tu">
<a href="">米家門窗傳感器</a>
<p>49元</p>
<h1>4023人好評</h1>
</div>
<div class="dapei_bottom1 dapei_bottom_left">
<img src="img/tj5.jpg" alt="" class="pic_1_tu">
<a href="">USB Type-C 轉接頭</a>
<p>5元</p>
<h1>8.7萬人好評</h1>
</div>
</div>
</div>
<!-- 爲你推薦結束 -->
<!-- 熱評產品開始 -->
<div class="bk_rp">
<div class="star_top star_tj">
<h1>熱評產品</h1>
</div>
<div class="reping_bottom">
<div class="reping_bottom_1">
<img src="img/rp1.jpg" alt="" class="reping_size">
<div class="reping_bottom_wz">
<a href="">
東西真心不錯，用過最好用的插線板，做工外觀沒得挑剔，
3個USB接口很實用，
充電快，建議不包郵的應該在...
</a>
</div>
<h2>來自於龍巖的評價</h2>
<h3>小米筆記本</h3>
<div class="rp_line"></div>
<h4 class="reping_bottom_wz_h4">3499元</h4>
</div>
<div class="reping_bottom_1 reping_left">
<img src="img/rp2.jpg" alt="" class="reping_size">
<div class="reping_bottom_wz">
<a href="">
東西真心不錯，用過最好用的插線板，做工外觀沒得挑剔，
3個USB接口很實用，
充電快，建議不包郵的應該在...
</a>
</div>
<h2>來自於龍巖的評價</h2>
<h3>小米筆記本</h3>
<div class="rp_line"></div>
<h4 class="reping_bottom_wz_h4">3499元</h4>
</div>
<div class="reping_bottom_1 reping_left">
<img src="img/rp3.jpg" alt="" class="reping_size">
<div class="reping_bottom_wz">
<a href="">
東西真心不錯，用過最好用的插線板，做工外觀沒得挑剔，
3個USB接口很實用，
充電快，建議不包郵的應該在...
</a>
</div>
<h2>來自於龍巖的評價</h2>
<h3>小米筆記本</h3>
<div class="rp_line"></div>
<h4 class="reping_bottom_wz_h4">3499元</h4>
</div>
<div class="reping_bottom_1 reping_left">
<img src="img/rp4.jpg" alt="" class="reping_size">
<div class="reping_bottom_wz">
<a href="">
東西真心不錯，用過最好用的插線板，做工外觀沒得挑剔，
3個USB接口很實用，
充電快，建議不包郵的應該在...
</a>
</div>
<h2>來自於龍巖的評價</h2>
<h3>小米筆記本</h3>
<div class="rp_line"></div>
<h4 class="reping_bottom_wz_h4">3499元</h4>
</div>
</div>
</div>
<!-- 熱評產品結束 -->
<!-- 內容開始 -->
<div class="bk_rn">
<div class="star_top star_tj">
<h1>內容</h1>
</div>
<div class="reping_bottom">
<div class="reping_bottom_1 reping_bottom_top_1">
<div class="reping_bottom_1_left">
<
</div>
<div class="reping_bottom_1_right">
>
</div>
<div class="reping_bottom_1_dianbig">
<div class="reping_bottom_1_dianbig_1 reping_bottom_1_dianbig_1_bian">
</div>
<div class="reping_bottom_1_dianbig_1">
</div>
<div class="reping_bottom_1_dianbig_1">
</div>
</div>
<div class="neirongbig">
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
</div>
</div>
<div class="reping_bottom_1 reping_bottom_top_1">
<div class="reping_bottom_1_left">
<
</div>
<div class="reping_bottom_1_right">
>
</div>
<div class="reping_bottom_1_dianbig">
<div class="reping_bottom_1_dianbig_1 reping_bottom_1_dianbig_1_bian">
</div>
<div class="reping_bottom_1_dianbig_1">
</div>
<div class="reping_bottom_1_dianbig_1">
</div>
</div>
<div class="neirongbig">
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
</div>
</div>
<div class="reping_bottom_1 reping_bottom_top_1">
<div class="reping_bottom_1_left">
<
</div>
<div class="reping_bottom_1_right">
>
</div>
<div class="reping_bottom_1_dianbig">
<div class="reping_bottom_1_dianbig_1 reping_bottom_1_dianbig_1_bian">
</div>
<div class="reping_bottom_1_dianbig_1">
</div>
<div class="reping_bottom_1_dianbig_1">
</div>
</div>
<div class="neirongbig">
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
</div>
</div>
<div class="reping_bottom_1 reping_bottom_top_1 reping_bottom_top_qu">
<div class="reping_bottom_1_left">
<
</div>
<div class="reping_bottom_1_right">
>
</div>
<div class="reping_bottom_1_dianbig">
<div class="reping_bottom_1_dianbig_1 reping_bottom_1_dianbig_1_bian">
</div>
<div class="reping_bottom_1_dianbig_1">
</div>
</div>
<div class="neirongbig">
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
<div class="neirongbao">
<h1 class="neirong_1">圖片</h1>
<h4 class="neirong_2">哈利·波特與被詛咒的孩子</h4>
<div class="hl">
<p class="neirong_3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
</div>
<h5 class="neirong_4">29.37元</h5>
<img src="img/nr1.png" alt="" class="neirong_tu">
</div>
</div>
</div>
</div>
</div>
<!-- 內容結束 -->
<!-- 視頻開始 -->
<section class="shipin">
<div class="zhineng_top">
<h1>視頻</h1>
<div class="zhineng_more">
<h1 class="zhineng_more_together">查看全部</h1>
<span class="quanbu zhineng_more_together"></span>
<!-- <img src="img/btn.png" alt="" class="btn"> -->
</div>
</div>
<div class="shipin_bottom">
<div class="shipin_bt1">
<span class="shipin_loc"></span>
<img src="img/shipin1.jpg" alt="" class="shipin_tu">
<h1>品質之魂 存於匠心</h1>
<h2>紅米手機品質的工程師訪談</h2>
</div>
<div class="shipin_bt1 shipin_left">
<span class="shipin_loc"></span>
<img src="img/shipin2.jpg" alt="" class="shipin_tu">
<h1>紅米手機工藝視頻</h1>
<h2>紅米5 / 紅米5 Plus 高顏值機身</h2>
</div>
<div class="shipin_bt1 shipin_left">
<span class="shipin_loc"></span>
<img src="img/shipin3.jpg" alt="" class="shipin_tu">
<h1>雷軍與斯塔克打造全面屏2.0</h1>
<h2>一場關於小米MIX 2 極致工藝的巔峯對話</h2>
</div>
<div class="shipin_bt1 shipin_left">
<span class="shipin_loc"></span>
<img src="img/shipin4.jpg" alt="" class="shipin_tu">
<h1>MIUI 9 理念視頻</h1>
<h2>快如閃電，前所未有的流暢</h2>
</div>
</div>
</section>
<!-- 視頻結束 -->
<!-- 尾部開始 -->
<div class="weibu">
<div class="weibu_top">
<div class="weibu_top1">
<span class="head_car1 weibu_span"></span>
<span class="weibu_span">預約維修服務</span>
</div>
<div class="weibu_top1_line"></div>
<div class="weibu_top1">
<span class="head_car1 weibu_span"></span>
<span class="weibu_span">7天無理由退貨</span>
</div>
<div class="weibu_top1_line"></div>
<div class="weibu_top1">
<span class="head_car1 weibu_span"></span>
<span class="weibu_span">15天免費換貨</span>
</div>
<div class="weibu_top1_line"></div>
<div class="weibu_top1">
<span class="head_car1 weibu_span"></span>
<span class="weibu_span">滿150包郵</span>
</div>
<div class="weibu_top1_line"></div>
<div class="weibu_top1">
<span class="head_car1 weibu_span"></span>
<span class="weibu_span">520餘家售後網點</span>
</div>
</div>
<div class="weibu_bottom">
<div class="weibu_bottom1">
<div class="weibu_wenzi">
<h1>幫助中心</h1>
<h2><a href="">賬戶管理</a></h2>
<h3><a href="">購物指南</a></h3>
<h3><a href="">訂單操作</a></h3>
</div>
<div class="weibu_wenzi">
<h1>服務支持</h1>
<h2><a href="">售後政策</a></h2>
<h3><a href="">自助服務</a></h3>
<h3><a href="">相關下載</a></h3>
</div>
<div class="weibu_wenzi">
<h1>線下門店</h1>
<h2><a href="">小米之家</a></h2>
<h3><a href="">服務網點</a></h3>
<h3><a href="">零售網點</a></h3>
</div>
<div class="weibu_wenzi">
<h1>關於小米</h1>
<h2><a href="">瞭解小米</a></h2>
<h3><a href="">加入小米</a></h3>
<h3><a href="">聯繫我們</a></h3>
</div>
<div class="weibu_wenzi">
<h1>關注我們</h1>
<h2><a href="">新浪微博</a></h2>
<h3><a href="">小米部落</a></h3>
<h3><a href="">官方微信</a></h3>
</div>
<div class="weibu_wenzi">
<h1>特色服務</h1>
<h2><a href="">F碼通道</a></h2>
<h3><a href="">禮物碼</a></h3>
<h3><a href="">防僞查詢</a></h3>
</div>
</div>
<div class="weibu_bottom2">
<div class="weibu_wenzi2">
<h1>400-100-6089</h1>
<h2>週一至週日 8:00-18:00</h2>
<h3>（僅收市話費）</h3>
<a href="">
<div class="weibu_block">
<span class="tu_size"></span>
<span class="wenzi_size">24小時在線客服</span>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 尾部結束 -->
<!-- 版權開始 -->
<div class="banquan">
<div class="banquan1">
<img src="img/logo-footer.png" alt="" class="bq_logo">
<div class="bq_right">
<div class="head_left">
<a href="" class="head_wenzi1">小米商城</a>
<div class="head_line1"></div>
<a href="" class="head_wenzi1">MIUI</a>
<div class="head_line1"></div>
<a href="" class="head_wenzi1">米聊</a>
<div class="head_line1"></div>
<a href="" class="head_wenzi1">多看書城</a>
<div class="head_line1"></div>
<a href="" class="head_wenzi1">小米路由器</a>
<div class="head_line1"></div>
<a href="" class="head_wenzi1">視頻電話</a>
<div class="head_line1"></div>
<a href="" class="head_wenzi1">小米天貓店</a>
<div class="head_line1"></div>
<a href="" class="head_wenzi1">小米網盟</a>
<div class="head_line1"></div>
<a href="" class="head_wenzi1">小米移動</a>
<div class="head_line1"></div>
<a href="" class="head_wenzi1">隱私政策</a>
<div class="head_line1"></div>
<a href="" class="head_wenzi1">Select Region</a>
</div>
<h1 class="bq_right_wenzi">©mi.com 京ICP證110507號 京ICP備10046444號 京公網安備11010802020134號
京網文[2014]0059-0009號 </h1>
<h1 class="bq_right_wenzi">違法和不良信息舉報電話：185-0130-1238，本網站所列數據，除特殊說明，所有數據均出自我司實驗室測試</h1>
</div>
<div class="bq_right_2">
<div class="bqtu">
<img src="img/bq1.png" alt="" class="bqtu_size">
</div>
<div class="bqtu">
<img src="img/bq2.png" alt="" class="bqtu_size">
</div>
<div class="bqtu">
<img src="img/bq3.png" alt="" class="bqtu_size">
</div>
<div class="bqtu bq_r">
<img src="img/bq4.png" alt="" class="bqtu_size">
</div>
</div>
</div>
<div class="banquan2">
<img src="img/slogan2016.png" alt="" class="slogan">
</div>
</div>
<!-- 版權結束 -->
</div>
<!-- 中間部分結束 -->
</body>
<script src="js/index.js"></script>
</html>CSS:
index.css
@font-face {
font-family: 'iconfont'; /* project id 561408 */
src: url('https://at.alicdn.com/t/font_561408_cxshq254b4lyds4i.eot');
src: url('https://at.alicdn.com/t/font_561408_cxshq254b4lyds4i.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_561408_cxshq254b4lyds4i.woff') format('woff'),
url('https://at.alicdn.com/t/font_561408_cxshq254b4lyds4i.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_561408_cxshq254b4lyds4i.svg#iconfont') format('svg');
}
.nav_bottom2:hover
{
box-shadow: 0 10px 20px 2px #dacccc;
}
.star_item,.big_pic_1,.reping_bottom_1,.dapei_bottom1,.shipin_bt1{
transition: all .5s linear;
}
/*.star_item:hover,.big_pic_1:hover,.reping_bottom_1:hover,.dapei_bottom1:hover,.shipin_bt1:hover*/
/*{*/
/*box-shadow: 0 10px 20px 5px #ad9c9c;*/
/*transform: translateY(-10px);*/
/*overflow: hidden;*/
/*}*/
.aaa:hover
{
box-shadow: 0 10px 20px 5px #ad9c9c;
transform: translateY(-5px);
transition: all .3s linear;
}
.sousuo
{
width: 240px;
height: 45px;
float: left;
border:1px solid #e0e0e0;
border-right: none;
outline: none; /* 外邊框隱藏 */
}
.search_button
{
width: 51px;
height: 47px;
line-height: 47px;
text-align:center;
font-size: 24px;
font-family: 'iconfont';
background-color: #fff;
border:1px solid #e0e0e0;
outline: none;
}
.search_button:hover
{
background-color: #ff6700;
color: #fff;
cursor: pointer;
}
.input_search
{
width: 51px;
height: 48px;
float:left;
/* border-top: 1px solid #A9A9A9;
border-right: 1px solid #A9A9A9;
border-bottom: 1px solid #A9A9A9; */
font-size: 24px;
line-height: 48px;
text-align:center;
font-family: 'iconfont';
}
.head
{
width: 100%;
/* 100%意思是父元素多大他就多大 */
height: 40px;
background-color: #333333;
}
.head_main
{
width: 1226px;
height: 40px;
margin: 0 auto; /* 0 是上下距離 auto元素快速水平居中 */
}
.head_wenzi
{
color: #b0b0b0;
line-height: 40px;
font-size: 12px;
float: left
}
.head_line
{
width: 1px;
height: 12px;
background-color: #3b3733;
float: left;
margin: 14px 7px 0;
}
.head_left
{
float: left;
}
.head_right
{
float: right;
}
.head_car
{
width: 120px;
height: 40px;
background-color: #454545;
float:left;
/* 因爲右邊的盒子沒設置大小所以car只能左浮動 */
margin-left: 25px;
text-align: center;
}
.head_car1
{
font-family: 'iconfont';
color: #b0b0b0;
line-height: 40px;
}
.quanbu
{
font-family: 'iconfont';
color: #b0b0b0;
line-height: 58px;
}
.head_car2
{
font-size: 12px;
color: #b0b0b0;
}
.nav_wenzi .nav_wenzi_bottom{
transition: all 1s;
width: 100%;
height: 0px;
background-color: #ffffff;
z-index: 200;
position: absolute;
top: 140px;
left: 0;
overflow: hidden;
}
.nav
{
width: 1226px;
height: 100px;
margin: 0 auto;
/*position: relative;*/
}
.nav_logo
{
width: 55px;
height: 55px;
margin-top: 22px;
background-color: #ff6700;
float: left;
/* 只要是一排的都要加浮動 */
}
.nav_wenzi
{
float: left;
margin-left: 189px;
transition: all 1s;
margin-top: 40px;
}
.nav_wenzi li
{
/*line-height: 100px;*/
font-size: 15px;
float: left;
padding: 0 10px;
cursor:pointer;
color: #313131;
transition: all 1s;
}
.search
{
width: 296px;
height: 50px;
float: right;
margin-top: 25px;
/* border: 1px solid #e0e0e0; */
}
.nav_bottom
{
width: 1226px;
height: 209px;
background-color:#ffffff;
margin: 0 auto;
}
.nav_bottom1
{
width: 234px;
height: 170px;
float: left;
background-color: #5f5750;
margin-top: 14px;
}
.nav_bottom2
{
width: 316px;
height: 170px;
margin: 14px 0 0 14px;
background-color: black;
float: left;
}
.nav_bottom2_tu
{
width: 316px;
height: 170px;
}
.nav_bottom1_wz
{
width: 78px;
height: 85px;
font-size: 30px;
float: left;
/* margin: 2px 0 0 2px; */
background-color:#5f5750;
}
.nav_bt_wz
{
font-size: 12px;
margin-top: 8px;
float: left;
margin-left: 16px;
color: #cfcdcb;
}
.star
{
width: 1226px;
height: 398px;
margin: 0 auto;
}
.star_top
{
width:100%;
height: 58px;
background-color: #ffffff;
}
.star_top h1
{
color: #333333;
font-size: 21px;
line-height: 58px;
float: left;
font-weight: 400;
}
.star_btn
{
width: 69px;
height: 22px;
background-color:#ffffff;
float: right;
margin-top: 17px;
border: 1px solid #e0e0e0;
}
.star_tj
{
padding-top: 20px;
background-color:#f5f5f5;
}
.star_btn_x
{
width: 34px;
height: 22px;
text-align: center;
line-height: 22px;
float: left;
cursor: pointer;
color: #333;
}
.star_btn1
{
border-right: 1px solid #e0e0e0;
}
.star_btn_d
{
width: 34px;
height: 22px;
text-align: center;
line-height: 22px;
float: right;
cursor: pointer;
color: #333;
}
.star_bottom
{
width: 1226px;
height: 340px;
background-color: #fff;
}
.buy_inner
{
width: 3000px;
height: 340px;
transition: all 1s;
float: left;
}
.buy_long
{
width: 978px;
height: 340px;
float: left;
overflow-x: hidden;
}
.buy_time
{
width: 234px;
height: 340px;
background-color: red;
float: left;
margin-right: 14px;
z-index: 999;
}
.buy_time img
{
width: 234px;
height: 340px;
}
.star_item
{
width: 234px;
height: 300px;
background-color: #fafafa;
border-top: 1px solid #ffac13;
padding-top: 39px;
float: left;
margin-right: 14px;
}
.star_item img
{
width: 160px;
height: 166px;
margin: 0 auto;
display: block;
}
.star_item h1
{
text-align: center;
font-size: 14px;
color: #212121;
font-weight: 400;
margin-top: 22px;
}
.star_item h2
{
text-align: center;
font-size: 12px;
color: #b0b0b0;
font-weight: normal;
margin-top: 3px;
}
.star_item h3
{
text-align: center;
font-size: 14px;
color: #ff6700;
font-weight: normal;
margin-top: 12px;
}
.star_item1
{
margin-right: 0;
border-top-color: green;
}
.star_item2
{
border-top-color: red;
}
.star_item3
{
border-top-color: black;
}
.star_item4
{
border-top-color: blue;
}
.content
{
width: 100%;
background-color: #f5f5f5;
margin-top: 40px;
padding-top: 60px;
}
.zhineng
{
width: 1226px;
height: 672px;
background-color: red;
margin: 0 auto;
}
.zhineng_top
{
width: 1226px;
height:58px;
background-color:#f5f5f5;
}
.zhineng_top h1
{
color: #424242;
font-size: 20px;
font-weight: 400;
line-height: 58px;
float: left;
}
.zhineng_more
{
float: right;
color: #424242;
}
.zhineng_more h1
{
color: #424242;
font-size: 15px;
font-weight: 400;
line-height: 58px;
float: left;
}
.btn
{
margin-top: 17px;
margin-left: 8px;
float: right;
}
.big_pic
{
width: 992px;
height: 614px;
background-color:#f5f5f5;
float: right;
}
.big_pic_1
{
width: 234px;
height: 300px;
background-color:#ffffff;
float: left;
margin-left: 14px;
position: relative;
overflow: hidden;
position: relative;
}
.pic_right
{
float: right;
}
.pic_top
{
margin-top: 14px;
}
.pic_1_tu
{
width: 150px;
height: 150px;
margin: 34px auto 20px;
display: block;
}
.big_pic_1 a
{
font-size: 12px;
text-align: center;
margin-top: 20px;
display: block;
}
.big_pic_1 p
{
font-size: 12px;
text-align: center;
color: #b0b0b0;
}
.big_pic_1 h1
{
font-size: 14px;
text-align: center;
margin-top: 10px;
color: #ff6700;
}
.big_pic_1 span
{
text-decoration: line-through;
color: #b0b0b0;
}
.ys1
{
color: #ff6734;
}
.ys2
{
color: #b0b0b0;
}
.dapei
{
width: 1226px;
height: 672px;
background-color: red;
margin: 0 auto;
}
.dapei_top
{
width: 1226px;
height:58px;
background-color:#f5f5f5;
margin-top: 30px;
}
.dapei_top h1
{
font-size: 20px;
line-height: 58px;
color: #424242;
font-weight: 400;
float: left
}
.renmen_wenzi
{
float: left;
margin: 20px 0 0 20px;
}
.xiahua
{
border-bottom: 2px solid #ff6700;
}
.remenright{
margin-left: 910px;
}
.peijianright{
margin-left: 950px;
}
.zhoubianright{
margin-left: 900px;
}
.bordr
{
border-bottom: 1px solid black;
}
.dapei_bottom
{
width: 1226px;
height: 614px;
background-color:#f5f5f5;
margin: 0 auto;
}
.tujian
{
width: 1226px;
height: 300px;
margin: 0 auto;
}
.bk_tj
{
width: 1226px;
margin: 0 auto;
height: 378px;
background-color: blue;
}
.bk_rp
{
width: 1226px;
margin: 0 auto;
height: 494px;
background-color: blue;
}
.bk_rn
{
width: 1226px;
margin: 0 auto;
height: 494px;
background-color: blue;
}
.dapei_bottom1
{
width: 234px;
height: 300px;
background-color:#fff;
float: left;
position: relative;
overflow: hidden;
}
.dapei_bottom_left
{
margin-left: 14px;
}
.dapei_bottom_top
{
margin-top: 14px;
}
.size
{
width: 234px;
height: 300px;
}
.dapei_bottom1 a
{
font-size: 12px;
text-align: center;
margin-top: 20px;
display: block;
}
.dapei_bottom1 p
{
font-size: 12px;
text-align: center;
color:#ff6700;
}
.dapei_bottom1 h1
{
font-size: 14px;
text-align: center;
margin-top: 10px;
color: #b0b0b0;
}
.dapei_bottom1 span
{
text-decoration: line-through;
color: #b0b0b0;
}
.peijian
{
width: 1226px;
height: 672px;
background-color: blue;
margin: 0 auto;
/* overflow: hidden; */
}
.reping_bottom
{
width: 1226px;
height: 416px;
background-color: #f5f5f5;
margin: 0 auto;
}
.reping_bottom_1
{
width: 296px;
height: 415px;
float: left;
background-color: #ffffff;
}
.reping_size
{
width: 296px;
height: 220px;
}
.reping_bottom_wz
{
margin: 34px 28px 30px;
}
.reping_bottom_1 h2
{
margin-left: 30px;
font-size: 12px;
color: #b0b0b0;
}
.reping_bottom_1 h3
{
margin-left: 30px;
font-size: 12px;
color: #333333;
float: left;
}
.rp_line
{
width: 2px;
height: 15px;
margin:6px 8px 0;
float: left;
background-color: #f0e7e0;
}
.reping_bottom_wz_h4
{
color: #ff6700;
}
.reping_left
{
margin-left: 14px;
}
.neirong_1
{
margin-top: 50px;
margin-bottom: 37px;
text-align: center;
font-size: 16px;
font-weight: 400;
color: #ffac13;
}
.neirong_2
{
font-size: 20px;
font-weight: 400;
line-height: 1.25;
text-align: center;
color: #333;
}
.neirong_3
{
font-size: 12px;
font-weight: 400;
text-align: center;
margin-top: 10px;
}
.neirong_4
{
font-size: 10px;
font-weight: 400;
text-align: center;
margin-top: 20px;
}
.neirong_tu
{
display: block;
margin:18px auto 0;
}
.hl
{
width: 193px;
height: 36px;
margin: 0 auto;
}
.reping_bottom_top_1
{
border-top: 1px solid yellow;
overflow: hidden;
margin-right: 14px;
position: relative;
}
/*.reping_bottom .reping_bottom_top_1:hover{*/
/*opacity: 1;*/
/*}*/
.reping_bottom_top_qu{
margin-right: 0;
}
.reping_bottom_top_2
{
border-top: 1px solid green;
}
.reping_bottom_top_3
{
border-top: 1px solid red;
}
.reping_bottom_top_4
{
border-top: 1px solid blue;
}
.color2
{
color: green;
}
.color3
{
color: red;
}
.color4
{
color: blue;
}
.shipin
{
width: 1226px;
height: 403px;
background-color: #f5f5f5;
margin: 0 auto;
}
.shipin_top
{
width: 1226px;
height: 58px;
line-height: 58px;
font-size: 25px;
}
.shipin_top_right
{
color: #424242;
font-size: 15px;
font-weight: 400;
line-height: 58px;
float: left;
}
.shipin_top_right h1
{
font-size: 12px;
}
.shipin_bottom
{
width: 1226px;
height: 285px;
background-color: #f5f5f5;
}
.shipin_bt1
{
width: 296px;
height: 285px;
background-color:#ffffff;
float: left;
position: relative;
}
.shipin_loc
{
position: absolute;
top: 146px;
left: 20px;
font-size: 30px;
font-family: 'iconfont';
color: #b0b0b0;
}
.shipin_left
{
margin-left: 14px;
}
.shipin_tu
{
width: 296px;
height: 180px;
margin: 0 0 28px 0;
}
.shipin_tutop
{
width: 296px;
height: 180px;
margin: 0 0 28px 0;
}
.shipin_bt1 h1
{
text-align: center;
font-size: 14px;
margin: 0 0 6px 0;
}
.shipin_bt1 h2
{
text-align: center;
font-size: 12px;
color: #b0b0b0;
}
.weibu
{
width: 100%;
height: 272px;
background-color: #fff;
}
.weibu_top
{
width: 1226px;
height: 79px;
margin: 0 auto;
/* background-color: red; */
border-bottom: 1px solid #e0e0e0;
}
.weibu_top1
{
width: 244px;
height: 79px;
/* background-color: red; */
/* margin: 27px auto 0; */
text-align: center;
line-height: 79px;
float: left;
}
.weibu_top1_line
{
width: 1px;
height: 25px;
background-color: #e0e0e0;
float: left;
margin-top: 27px;
}
.weibu_bottom
{
width:1226px;
height: 193px;
margin: 0 auto;
background-color: red;
}
.weibu_bottom1
{
width: 974px;
height: 100%;
background-color:#ffffff;
float: left;
}
.weibu_bottom2
{
width: 252px;
height: 100%;
background-color:#ffffff;
float: right;
}
.weibu_wenzi
{
width: 162px;
height: 100%;
float: left;
background-color:#ffffff;
}
.weibu_wenzi h1
{
margin-top: 42px;
font-size: 12px;
}
.weibu_wenzi h2
{
font-size: 11px;
margin-top: 32px;
}
.weibu_wenzi h3
{
font-size: 11px;
margin-top: 17px;
}
.weibu_wenzi2
{
width: 252px;
height: 112px;
background-color:#ffffff;
margin-top: 40px;
border-left: 1px solid #e0e0e0;
}
.weibu_wenzi2 h1
{
font-size: 22px;
color: #ff7521;
text-align: center;
}
.weibu_wenzi2 h2
{
font-size: 12px;
margin-top: 9px;
text-align: center;
}
.weibu_wenzi a
{
color: #616161;
}
.weibu_wenzi2 h3
{
font-size: 12px;
margin-top: 5px;
color: #616161;
text-align: center;
}
.weibu_block
{
width: 125px;
height: 28px;
background-color:#ffffff;
margin: 0 auto;
margin-top: 11px;
border: 1px solid #ff6700;
line-height: 28px;
}
.wenzi_size
{
font-size: 12px;
float: right;
margin-right: 5px;
color: #ff7521;
}
.tu_size
{
font-family: 'iconfont';
color: #ff6700;
line-height: 28px;
float: left;
}
.banquan
{
width: 100%;
height: 165px;
background-color:#fafafa;
float:left;
}
.banquan1
{
width: 1226px;
height: 62px;
margin: 30px auto 0;
/* background-color: #ffffff; */
}
.bq_logo
{
width: 58px;
height: 62px;
margin-right:10px;
float: left;
}
.bq_right
{
width: 780px;
height: 62px;
background-color:#fafafa;
float: left;
}
.head_wenzi1
{
color: #757575;
line-height: 26px;
font-size: 11px;
float: left
}
.head_line1
{
width: 1px;
height: 8px;
background-color: #757575;
float: left;
margin: 8px 7px 0;
}
.bq_right_wenzi
{
font-size: 10px;
float: left;
color: #b0b0b0;
}
.bq_right_2
{
width: 368px;
height: 62px;
/* background-color: blue; */
float: right;
}
.bqtu
{
width: 82px;
height: 100%;
margin-right: 9px;
/* background-color: green; */
float: left;
}
.bqtu_size
{
width: 82px;
cursor: pointer;
}
.bq_r
{
margin-right: 0;
}
.banquan2
{
width: 1226px;
height: 48px;
margin: 0 auto;
background-color: #fafafa;
}
.slogan
{
display: block;
margin: 0 auto;
padding: 30px;
}
#banner
{
width: 1226px;
height: 460px;
margin: 0 auto;
position:relative;
}
.banner_nav_tan{
width: 800px;
height: 458px;
background-color: #FFFFFF;
position: absolute;
top: 0;
left: 234px;
z-index: 10;
display: none;
border: 1px solid #5c5c5c;
}
.banner_nav_tan_tu1{
width: 240px;
height: 76px;
float: left;
margin-bottom: 20px;
line-height: 76px;
}
.banner_nav_tan_tu2{
width: 300px;
height: 76px;
float: left;
margin-bottom: 20px;
line-height: 76px;
}
.banner_nav_tan_tu2 img{
width: 50px;
height: 50px;
margin-top: 10px;
margin-left: 20px;
float: left;
}
.banner_nav_tan_tu2 p{
color: black;
font-size: 20px;
float: left;
margin-left: 10px;
}
.banner_nav_tan_tu1 img{
width: 50px;
height: 50px;
margin-top: 10px;
margin-left: 20px;
float: left;
}
.banner_nav_tan_tu1 p{
color: black;
font-size: 20px;
float: left;
margin-left: 10px;
}
.banner_img
{
width: 1226px;
height: 460px;
background-color: pink;
position: relative;
}
.banner_img img
{
width: 1226px;
height: 460px;
position: absolute;
top: 0;
left: 0;
}
.banner_nav
{
width: 234px;
height: 420px;
background-color:rgba(0, 0, 0, 0.6);
position: absolute;
left: 0;
top: 0;
padding: 20px 0;
z-index: 100;
/* opacity: 0.6; */
}
.banner_nav li
{
width: 174px;
height: 42px;
/* background-color: blue; */
line-height: 42px;
font-size: 14px;
color: #fff;
padding:0 30px;
}
.banner_jiantou
{
float: right;
}
.pagers
{
width:200px;
height: 18px;
position: absolute;
right: 30px;
bottom: 20px;
z-index: 20;
}
.pagers li
{
width: 12px;
height: 12px;
border-radius: 50%;
background-color:#fff;
float: left;
margin-left:10px;
border: 2px solid #ccc;
cursor: pointer;
transition: all 1s;
}
.pagers li:hover
{
background-color: red;
}
.pagers li.active2
{
background-color: red;
}
.banner_yuan_item a
{
font-size: 10px;
font-family: 'iconfont';
color: #b0b0b0;
color: #807570;
}
.banner_btn
{
width: 41px;
height: 69px;
/* background-color: yellow; */
line-height: 69px;
font-size: 50px;
text-align: center;
color: #D1ABAC;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
z-index: 998;
}
.banner_lbtn
{
left: 234px;
user-select: none;
z-index: 50;
}
.banner_rbtn
{
right: 0;
user-select: none;
}
.head_wenzi:hover
{
color: #fff;
}
.head_car:hover
{
background-color: #fff;
cursor: pointer;
}
.head_car:hover span
{
color: #ff6700;
}
.nav_wenzi span:hover
{
color: #ff6700;
}
.banner_yuan_item a:hover
{
color: #fff;
}
.banner_btn:hover
{
background-color: #731617;
cursor: pointer;
color: #fff;
}
.banner_nav li:hover
{
background-color: #ff6700;
cursor: pointer;
}
.star_btn_x:hover
{
color: #ff6700;
}
.renmen_wenzi span:hover
{
color: #ff6700;
cursor: pointer;
}
.zhineng_more h1:hover
{
color: #ff6700;
cursor: pointer;
}
.zhineng_more span:hover
{
color: #ff6700;
cursor: pointer;
}
.shipin_loc:hover
{
color:#ff6700;
cursor: pointer;
}
.weibu_top1:hover .weibu_span
{
color:#ff6700;
cursor: pointer;
}
.big_pic_1 a
{
color: #333333;
}
.dapei_bottom1 a
{
color: #333333;
}
.reping_bottom_wz a
{
color: #333333;
}
.zhineng_tan
{
width: 100%;
height: 80px;
background-color: #ff6700;
position: absolute;
left: 0;
bottom: -80px;
transition: all 1s linear;
/* 底部過渡 */
opacity: 0;
line-height: 80px;
text-align: center;
color: #fff;
}
.big_pic_1:hover .zhineng_tan
{
bottom: 0;
opacity: 1;
}
.dapei_tan
{
width: 100%;
height: 80px;
background-color: #ff6700;
position: absolute;
left: 0;
bottom: -80px;
transition: all 1s linear;
/* 底部過渡 */
opacity: 0;
line-height: 80px;
text-align: center;
color: #fff;
}
.nav_bt
{
font-family: 'iconfont';
color: #b0b0b0;
float: left;
margin-top: 13px;
margin-left: 30px;
margin-bottom: 6px;
}
.dapei_bottom1:hover .dapei_tan
{
bottom: 0;
opacity: 1;
}
.shipin_bt1:hover .shipin_loc
{
color: #ff6700;
}
.weibu_block:hover
{
background-color: #ff6700;
}
.weibu_block:hover .wenzi_size
{
color: #fff;
}
.weibu_block:hover:hover .tu_size
{
color: #fff;
}
.nav_bottom1_wz:hover .nav_bt
{
color: #fff;
cursor: pointer;
}
.nav_bottom1_wz:hover .nav_bt_wz
{
color: #fff;
cursor: pointer;
}
.big_pic_1tu
{
width: 64px;
height: 20px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
font-size: 12px;
line-height: 20px;
text-align: center;
color: #fff;
}
.big_pic_2tu
{
background-color: green;
}
.nr_page
{
width: 296px;
height: 30px;
/* background-color: red; */
float: left;
}
.nr_page_famliy
{
font-family: 'iconfont';
}
.nr_page1
{
width: 10px;
height: 10px;
margin-left: 115px;
line-height: 30px;
color: #ff6700;
}
.nt_page2
{
width: 10px;
height: 10px;
margin: 0 2px;
color: #b0b0b0;
cursor: pointer;
}
.nt_page2:hover
{
color: #ff6700;
}
.zhineng_more:hover .zhineng_more_together
{
color: #ff6700;
}
.imgbox
{
width: 1226px;
height: 460px;
position: relative;
}
.imgbox li
{
width: 1226px;
height: 460px;
position: absolute;
top: 0;
left: 0;
transition: all 1s;
opacity: 0.6;
}
.imgbox .active
{
z-index: 9;
opacity: 1;
}
.star_btn_d:hover {
color: #ff6700;
}
.disable
{
color:#ccc;
}
.star_right
{
margin-right: 0;
}
/**************************/
.qiehuan_left
{
width: 234px;
height: 614px;
float: left;
}
.qiehuan_right
{
width: 978px;
height: 614px;
margin-left: 14px;
float: left;
position: relative;
}
.goodlist
{
width: 978px;
height: 614px;
position: absolute;
}
.qiehuan_right .active1
{
z-index: 99;
}
.dapei .active
{
border-bottom: 2px solid #ff6700;
}
.neirongbao{
width: 296px;
height: 415px;
background-color: #ffffff;
float: left;
}
.neirongbig{
width: 1000px;
height: 415px;
background-color: #ffffff;
transition: all 1s;
}
/*.reping_bottom_shang{*/
/*width: 30px;*/
/*height: 60px;*/
/*background-color: #676767;*/
/*position: relative;*/
/*margin-top: 100px;*/
/*}*/
.reping_bottom_1_left{
position: absolute;
width: 30px;
height: 60px;
font-size: 30px;
top: 150px;
line-height: 60px;
z-index: -3;
cursor: pointer;
/*opacity: 0;*/
}
.reping_bottom_1_right{
position: absolute;
width: 30px;
height: 60px;
font-size: 30px;
line-height: 60px;
top: 150px;
left: 265px;
z-index: -1;
cursor: pointer;
}
.reping_bottom_1_right:hover{
background-color: #5e5e5e;
}
.reping_bottom_1_dianbig{
width: 100px;
height: 15px;
/*background-color: yellow;*/
position: absolute;
left: 100px;
top: 390px;
}
.reping_bottom_1_dianbig_1{
display: inline-block;
width: 13px;
height: 13px;
border-radius: 50%;
background-color: #747474;
margin-right: 15px;
}
.reping_bottom_1_dianbig_1_bian{
background-color: yellow;
}
.reping_bottom_1:hover .reping_bottom_1_left,.reping_bottom_1:hover .reping_bottom_1_right{
z-index:3;
background-color: #cac6cc;
}
.reping_bottom .reping_bottom_1 .reping_bottom_1_left:hover{
background-color: #5e5e5e;
}
.reping_bottom .reping_bottom_1 .reping_bottom_1_right:hover{
background-color: #5e5e5e;
}
.nav_wenzi_bottom_kuang{
width: 1226px;
height: 200px;
/*background-color: yellow;*/
margin: 0 auto;
}
.nav_wenzi_bottom_kuang_tu{
width: 200px;
height: 200px;
/*background-color: #c1ff58;*/
float: left;
border-right: 1px solid #c4c4c4;
}
.nav_wenzi_bottom_kuang_tu_1{
width: 60px;
height: 20px;
border: 2px solid red;
margin: 0 auto;
text-align: center;
color: red;
font-size: 15px;
}
.nav_wenzi_bottom_kuang_tu_1 span{
display: inline-block;
}
.nav_wenzi_bottom_kuang_tu_img{
width: 160px;
height: 110px;
margin: 0 auto;
margin-top: 20px;
}
.nav_wenzi_bottom_kuang_tu_img img{
width: 160px;
height: 110px;
}
.nav_wenzi_bottom_kuang_tu_zi{
width: 160px;
height: 20px;
/*background-color: #2aabd2;*/
margin: 0 auto;
margin-top: 10px;
text-align: center;
line-height: 20px;
}public.css
*
{
margin: 0;
/* body-8 */
padding: 0;
text-decoration: none;
/* 文本修飾 無 */
font-style: normal;
list-style: none;
}
index.js
{
let imgs = document.querySelectorAll(".imgbox li");
let pagers = document.querySelectorAll(".pagers li");
let banner = document.querySelector("#banner");
let banner_lbtn = document.querySelector(".banner_lbtn");
let banner_rbtn = document.querySelector(".banner_rbtn");
pagers.forEach(function (ele, index) {
ele.onclick = function () {
for (let i = 0; i < imgs.length; i++) {
imgs[i].classList.remove("active");
pagers[i].classList.remove("active2");
}
imgs[index].classList.add("active");
this.classList.add("active2");
n = index;
}
})
let t = setInterval(move, 3000);
let n = 0;
function move() {
n++;
if (n === imgs.length) {
n = 0;
}
if (n < 0) {
n = imgs.length - 1;
}
for (let i = 0; i < imgs.length; i++) {
imgs[i].classList.remove("active");
pagers[i].classList.remove("active2");
}
imgs[n].classList.add("active");
pagers[n].classList.add("active2");
}
banner.onmouseenter = function () {
// alert(1);
clearInterval(t);
}
banner.onmouseleave = function () {
t = setInterval(move, 3000);
}
let flag = true;
banner_rbtn.onclick = function () {
if (flag) {
flag = false;
move();
}
}
banner_lbtn.onclick = function () {
if (flag) {
flag = false;
n -= 2;
move();
}
}
imgs.forEach(function (ele, index) {
ele.addEventListener("transitionend", function () {
flag = true;
})
})
}
//閃購效果
{
const prev = document.querySelector(".star_btn_x");
const next = document.querySelector(".star_btn_d");
const inner = document.querySelector(".buy_inner");
// console.log(next);
let n = 0;
next.onclick = function () {
n++;
prev.classList.remove("disable");
if (n === 2) {
this.classList.add("disable");
}
if (n === 3) {
n = 2;
return;
}
inner.style.marginLeft = -992 * n + "px";
}
prev.onclick = function () {
n--;
next.classList.remove("disable");
if (n === 0) {
this.classList.add("disable");
}
if (n === -1) {
n = 0;
return;
}
inner.style.marginLeft = -992 * n + "px";
}
}
//content
{
function content(parent) {
const types = parent.querySelectorAll(".dapei span");
const goods = parent.querySelectorAll(".goodlist");
// console.log(goods);
// console.log(types);
types.forEach(function (ele, index) {
ele.onmouseenter = function () {
for (let i = 0; i < types.length; i++) {
types[i].classList.remove("active");
goods[i].classList.remove("active1");
}
this.classList.add("active");
goods[index].classList.add("active1");
}
})
}
contentList = document.querySelectorAll(".dapei");
contentList.forEach(function (ele) {
content(ele);
});
}
//內容部分
{
function wheel(parent) {
const prev = parent.querySelector(".reping_bottom_1_left");
const next = parent.querySelector(".reping_bottom_1_right");
const inner = parent.querySelector(".neirongbig")
var pagers = parent.querySelectorAll(".reping_bottom_1_dianbig_1");
let contents=parent.querySelectorAll(".neirongbao");
let n = 0;
next.onclick = function () {
n++;
if(n===contents.length){
n=contents.length-1;
return;
}
inner.style.marginLeft = -296 * n + "px";
pagers[n].classList.add("reping_bottom_1_dianbig_1_bian");
pagers[n - 1].classList.remove("reping_bottom_1_dianbig_1_bian");
obj = pagers[n];
}
prev.onclick = function () {
n--;
if(n<0){
n=0;
return;
}
inner.style.marginLeft = -296 * n + "px";
pagers[n].classList.add("reping_bottom_1_dianbig_1_bian");
pagers[n + 1].classList.remove("reping_bottom_1_dianbig_1_bian");
obj = pagers[n];
}
let obj = pagers[0];
pagers.forEach(function (ele, index) {
ele.onclick = function () {
obj.classList.remove("reping_bottom_1_dianbig_1_bian");
this.classList.add("reping_bottom_1_dianbig_1_bian");
obj = this;
inner.style.marginLeft = index * -296 + "px";
n=index;
}
}
)
}
contentList = document.querySelectorAll(".reping_bottom_top_1 ");
contentList.forEach(function (ele) {
wheel(ele);
});
}
{
let labels=document.querySelectorAll(".banner_nav li");
let menus=document.querySelectorAll(".banner_nav_tan");
let obj=menus[0];
labels.forEach(function (ele,index) {
ele.onmouseenter=function () {
obj.style.display="none";
menus[index].style.display="block";
obj=menus[index];
}
ele.onmouseleave=function () {
menus[index].style.display="none";
}
})
}
{
let labels=document.querySelectorAll(".nav_wenzi li");
let menus=document.querySelectorAll(".nav_wenzi_bottom");
let obj=menus[0];
labels.forEach(function (ele,index) {
ele.onmouseenter=function () {
menus[index].style.borderTop="1px solid #afafaf";
menus[index].style.height="230px";
obj=menus[index];
}
ele.onmouseleave=function () {
menus[index].style.height="0px";
menus[index].style.borderTop="";
}
})
}圖片：
下載地址：https://download.csdn.net/download/weixin_41937552/13948693