小米商場佈局練習
小米商城佈局練習
小米商城還是很適合剛學HTML css的同學們，主要是一些簡單的佈局和樣式的設定。
HTML部分程式碼
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>小米商城官網</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="iconfont/iconfont.css">
<script src="jQuery/jquery-3.5.1.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="app">
<div class="topOutbox">
<!-- 頂部外層盒子開始 -->
<div class="topInbox1">
<!-- 頂部第一內層盒子開始 -->
<div class="topInbox1-centent">
<div class="topIn1-nav">
<ul>
<li><a href="" class="topA">小米商城</a></li>
<span>|</span>
<li><a href="" class="topA">MIUI</a></li>
<span>|</span>
<li><a href="" class="topA">IoT</a></li>
<span>|</span>
<li><a href="" class="topA">雲服務</a></li>
<span>|</span>
<li><a href="" class="topA">金融</a></li>
<span>|</span>
<li><a href="" class="topA">有品</a></li>
<span>|</span>
<li><a href="" class="topA">小愛開放平臺</a></li>
<span>|</span>
<li><a href="" class="topA">企業團購</a></li>
<span>|</span>
<li><a href="" class="topA">資質證照</a></li>
<span>|</span>
<li><a href="" class="topA">協議規則</a></li>
<span>|</span>
<li class="k">
<a href="" class="topA">下載app</a>
<div class="k1">
<img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米商城" width="90" height="90">
</div>
</li>
<span>|</span>
<li><a href="" class="topA">Select Location</a></li>
</ul>
</div>
<div class="topIn1-nav2">
<a href="" class="topA">登入</a>
<span>|</span>
<a href="" class="topA">註冊</a>
<span>|</span>
<a href="" class="topA">訊息通知</a>
</div>
<div class="topIn1-nav3">
<a href=""><i class="iconfont"></i>購物車</a>
</div>
</div>
</div>
<div class="topInbox2">
<!-- 頂部一第二內層盒子開始 -->
<div class="topInbox2-centent">
<div class="topIn2-logo">
<div class="logo">
<i class="iconfont"></i>
</div>
</div>
<div class="topIn2-img">
<img src=" https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b06819007feedbea62aedaa3089633d2.gif" width="165px" height="55px">
</div>
<div class="topIn2-nav">
<ul>
<li>小米手機</li>
<li>Redmi 紅米</li>
<li>電視</li>
<li>筆記本</li>
<li>家電</li>
<li>路由器</li>
<li>智慧硬體</li>
<li><a href="">服務</a></li>
<li><a href="">社群</a></li>
</ul>
</div>
<div class="topIn2-input">
<input type="text" name=""><button><i class="iconfont"></i></button>
</div>
</div>
</div>
</div>
<div class="trunBox">
<!-- 輪播和圖示盒子 -->
<div class="trunBo">
<!-- 輪播盒子 -->
<a href=""><img id="img1" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7a29cd93c20f527ba24b52a1741c31b7.jpg" alt="輪播圖" width="1226px" height="460px"></a>
<div class="left-btn">
<i class="iconfont"></i>
</div>
<div class="right-btn">
<i class="iconfont"></i>
</div>
<ul class="yuandian">
<li data-num="0" class="item"></li>
<li data-num="1" class="item"></li>
<li data-num="2" class="item"></li>
<li data-num="3" class="item"></li>
<li data-num="4" class="item"></li>
</ul>
<div class="left-nav">
<ul>
<li class="drow">
<a href="javascript:;">手機 電話卡<i class="iconfont"></i></a>
<div class="leftNavcentent1">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=40&h=40&f=webp&q=90">小米10 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/461bf013d08a7a91423cafcbc5ff9339.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 Pro 變焦版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f774ef8332f2204a7c8fbf1b92f29e8a.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X 5G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1db88cd66ff1a6a3e75116988b7f3e12.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi 9A</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4a7a4f24061860901f724b6ba6d75fd9.png?thumb=1&w=40&h=40&f=webp&q=90">小米10</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/92b463f8e502e5d26ac488a252a05b58.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/afa28e7477639537f556eb46e3ca5f43.jpeg?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X 4G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/47057d897ee2c05c9215e059e1308dc6.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 8</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cc563c76a7383d8030d1c23f31c60cb9.png?thumb=1&w=40&h=40&f=webp&q=90">小米10 青春版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7a98170e97ca5df8f5ad2470a8a2d01e.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 5G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cba27e53367b74271a38a4515a692816.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi Note 8 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 8A</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f382e29367ad5852fc1adfdae1332d5c.png?thumb=1&w=40&h=40&f=webp&q=90">騰訊黑鯊遊戲手機</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b2b8b609aab05d9ad184bbe5c8e8be28.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 4G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b4534b9fd22f478314f3cbbf286b7338.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi Note 8</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/85d746207b997873ddfcdca0da025f78.jpg?thumb=1&w=40&h=40">Redmi 7A</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8ade0163e9fdbd92a4b7d7ee3aeab905.jpg?thumb=1&w=40&h=40">小米雲服務</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/84e19ece0125992449a6276e2ba333e9.png?thumb=1&w=40&h=40">手機上門維修</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4d8753c35974699754af66388fc03a16.jpg?thumb=1&w=40&h=40&f=webp&q=90">中國電信</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1a2ed8c7ac2ab7ebfd1554a7a1ac25a6.jpg?thumb=1&w=40&h=40">米粉卡 日租卡</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0803dc7125ffa3447b04b1ae60f57a2b.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 尊享紀念版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/22419dee5ddfa9f4a91782231d07e189.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cadc8b00dbe3b5615bd6ab657715baf.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 9</a>
</div>
</li>
<li class="drow1">
<a href="">電視 盒子<i class="iconfont"></i></a>
<div class="leftNavcentent2">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/37576cef378ef2805c20b9ab2a9d6d3d.png?thumb=1&w=40&h=40&f=webp&q=90">小米透明電視</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8264eb9b900ead63eea69f6fc1e413a.png?thumb=1&w=40&h=40&f=webp&q=90">小米電視5 65英寸</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/18c9d79b3d6c6635c55ba1bb371182af.jpg?thumb=1&w=40&h=40&f=webp&q=90">全面屏電視Pro 65英寸</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37ce1615e1e8fcbbda2b3f37c09ec676.png?thumb=1&w=40&h=40">小米電視4A 55英寸</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7da49e7ada2229c963c9c7353a58d49b.png?thumb=1&w=40&h=40&f=webp&q=90">小米電視 大師 65英寸OLED</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d707cdac2a19703b57e65212f32fd25b.png?thumb=1&w=40&h=40&f=webp&q=90">小米電視5 75英寸</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a3aff2c5e8207dafd8fc3bfad5a2e21.jpg?thumb=1&w=40&h=40&f=webp&q=90">全面屏電視Pro 55英寸</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/11e4d06f29877044ddce0f9fdd2e26d5.png?thumb=1&w=40&h=40">小米電視4A 58英寸</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/070b329c18c1ab167df2a42564a67813.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 智慧電視 X65</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/942d4f28d406f3946f0ce551c125c641.png?thumb=1&w=40&h=40&f=webp&q=90">小米電視5 Pro 55英寸</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5732e8f317eb86bfcb174fbb49d00c4a.jpg?thumb=1&w=40&h=40">小米壁畫電視 65英寸</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ca8058c9c776447265b99420ff04e544.png?thumb=1&w=40&h=40">小米電視4A 65英寸</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/070b329c18c1ab167df2a42564a67813.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 智慧電視 X55</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d096389e19ba6b79b324b7d0acfab7ca.png?thumb=1&w=40&h=40&f=webp&q=90">小米電視5 Pro 65英寸</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8aeae36f5d088f22c84b8953bd0d08b4.jpg?thumb=1&w=40&h=40">小米全面屏電視</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/cb83515483547404cd26a962bada5d5b.png?thumb=1&w=40&h=40">小米電視4C 32英寸</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9d649ec3d7d14da7090e396d56b7cc92.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi 智慧電視 MAX 98"</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/da1680fb62238cb5b01998d80fc34e25.png?thumb=1&w=40&h=40&f=webp&q=90">小米電視5 Pro 75英寸</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/820cba6c44f7263c5fe773a7ffaf85b9.png?thumb=1&w=40&h=40">小米電視4A 32英寸</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/af572c503ed2a81ab71e2810617860c5.jpg?thumb=1&w=40&h=40">小米電視4C 40英寸</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90">小米電視5 55英寸</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4c6f98e59f3e78eb5d959bbcff081562.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi 紅米電視 70英寸</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2f15dd9779865b48bfa8c8e915ac75ac.png?thumb=1&w=40&h=40">小米電視4A 50英寸</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7bef124bc015669bdacf76d5d4b02a7e.png?thumb=1&w=40&h=40">小米電視4C 43英寸</a>
</div>
</li>
<li class="drow2">
<a href="">筆記本 顯示器<i class="iconfont"></i></a>
<div class="leftNavcentent3">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aee86bcd8bf491eb78ae234d2e188a66.jpg?thumb=1&w=40&h=40&f=webp&q=90">RedmiBook 13</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b32e4db4b53b0c56c6040f094e96d945.png?thumb=1&w=40&h=40&f=webp&q=90">顯示器</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4f45cdc4f94f1f1651095dedb154c2e4.png?thumb=1&w=40&h=40&f=webp&q=90">小米筆記本 15.6"</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0eb7e33b11443f6927e2035eca7c3d9e.png?thumb=1&w=40&h=40&f=webp&q=90">鍵鼠套裝</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1f95bb7c9206951e3d870cb5581b8329.png?thumb=1&w=40&h=40">小米筆記本 13.3"</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c61933e7ac89c61bc727c275391e82e0.png?thumb=1&w=40&h=40">滑鼠</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/eaab0db21859e0e58cae1fb807907905.jpg?thumb=1&w=40&h=40">小米筆記本 12.5"</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e18c5807226399f5b24b340241fe8cc1.png?thumb=1&w=40&h=40&f=webp&q=90">轉接器</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a3c149225946312f2b4bbe1263f65450.png?thumb=1&w=40&h=40">RedmiBook 14</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/32bfcdebff3058de7bc0b2855d05c240.jpg?thumb=1&w=40&h=40">平板配件</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a66c24ee8ae2efea3ae92ec455a27352.jpg?thumb=1&w=40&h=40">小米遊戲本</a>
</div>
</li>
<li class="drow3">
<a href="">家電 插線板<i class="iconfont"></i></a>
<div class="leftNavcentent4">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/abeb200aaaee68d4635c6235d3ffb3f3.jpg?thumb=1&w=40&h=40&f=webp&q=90">冰箱</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f7dcbb8c268574041ce0b4b98e591cf1.jpg?thumb=1&w=40&h=40&f=webp&q=90">微波爐</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d93e6a98403262a506c9e9b22293cdae.jpg?thumb=1&w=40&h=40">電磁爐</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d1c8cfb055709db380c6de981a4c894b.jpg?thumb=1&w=40&h=40">插線板</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/96de94415b860f3de95b2d6294f0d0fd.png?thumb=1&w=40&h=40">立式空調</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f7f39b7ac49227fc59c3f2b2105d25d6.jpg?thumb=1&w=40&h=40&f=webp&q=90">電烤箱</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/39c8ccbebd08687bc6780373b7ef2a95.jpg?thumb=1&w=40&h=40">電水壺</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1cc417a7cae8c4ff8b0041fa29003717.jpg?thumb=1&w=40&h=40">新風機</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/630b9e523bb2e1387ce6c7be1edaca18.png?thumb=1&w=40&h=40">壁掛空調</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/603beb09930e32addd1b362bf43c7ac2.jpg?thumb=1&w=40&h=40">掃地機器人</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9ffcebcacca008ed2d92a692f7312ef6.jpg?thumb=1&w=40&h=40">濾水壺</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/6aa1871d84aaae98cd676f5e2cf5c2f2.jpg?thumb=1&w=40&h=40">電暖器</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/18723c3561252ce76c9a1b1eebc4c01c.png?thumb=1&w=40&h=40">滾筒洗衣機</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/26deda5474eb7eb7e5b34547c58b9893.jpg?thumb=1&w=40&h=40">吸塵器</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3a3e4238b70ef8db89ae77f8a3762fc8.png?thumb=1&w=40&h=40">落地風扇</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ba8d2a2d383f612575d323ce159bdce3.jpg?thumb=1&w=40&h=40">電壓力鍋</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d3bace6e62cecb7901e306b05502535f.jpg?thumb=1&w=40&h=40">Redmi全自動波輪洗衣機</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e997ed31cd5199ec0a24eeb48a37b1e7.jpg?thumb=1&w=40&h=40">空氣淨化器</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c12fd1da9fed662842d6f5c57d7737c9.png?thumb=1&w=40&h=40">投影儀</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/0bf0ba35dc3ad57115c59f0ebde0fd1d.jpg?thumb=1&w=40&h=40">料理機</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/12f4b26ced3716d07bfcc6beba751188.jpg?thumb=1&w=40&h=40">淨水器</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/390e15818dd103b2f96f4ac742d47379.jpg?thumb=1&w=40&h=40">電飯煲</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c0a6b523433a492dbf32035b2983d98e.jpg?thumb=1&w=40&h=40">燈具</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b7de8a5bc64975df73f5fde5507fc8d1.jpg?thumb=1&w=40&h=40">電煮壺</a>
</div>
</li>
<li class="drow4">
<a href="">出行 穿戴<i class="iconfont"></i></a>
<div class="leftNavcentent5">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8e8c85f251ed8b5cd54651c4be13bc68.png?thumb=1&w=40&h=40&f=webp&q=90">手環5NFC</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4e9da27ebbeeb38078910c97173c4671.jpg?thumb=1&w=40&h=40">滑板車</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/efd04d4a90822e7e2f04a365083f2607.jpg?thumb=1&w=40&h=40">無線車充</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/18f75b53afbe8ce2e858cb5622d60613.png?thumb=1&w=40&h=40&f=webp&q=90">手環5</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/749c779fd3789ba94033da8aaa547dcd.png?thumb=1&w=40&h=40&f=webp&q=90">自行車</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8b398bad185dddb5397f2c0d9a3f6271.jpg?thumb=1&w=40&h=40">充氣寶</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3cc76c2ce836255c1b2e3e1cf477cfef.png?thumb=1&w=40&h=40&f=webp&q=90">小米手錶</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/787c807176455f9ae40146af11e98b1e.jpg?thumb=1&w=40&h=40&f=webp&q=90">車載充電器</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f941386e72f745b02e8921b6c8055cd6.jpg?thumb=1&w=40&h=40&f=webp&q=90">石英錶</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4dd7eeff34b478acd2cf3eec99b78c96.png?thumb=1&w=40&h=40">手環手錶</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8ac5b263aac2ffa1894fb7b215c3ce87.jpg?thumb=1&w=40&h=40">平衡車配件</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fece041c17bdebaab5f3a9313c7c0f8c.jpg?thumb=1&w=40&h=40">VR</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/971c8c01a246c7ac69a4c9be9e77e832.jpg?thumb=1&w=40&h=40">智慧後視鏡</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/50180b158690a40f9cbc684c7646d297.jpg?thumb=1&w=40&h=40">平衡車</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e2748064a9ac9969e53851479d55f1a9.jpg?thumb=1&w=40&h=40">智慧記錄儀</a>
</div>
</li>
<li class="drow5">
<a href="">智慧 路由器<i class="iconfont"></i></a>
<div class="leftNavcentent6">
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5ef6c2d63df78e140afab6ac3c088fac.jpg?thumb=1&w=40&h=40">印表機</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40">攝像機</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3d5963e212402fa5ebd2e71dd10c426c.jpg?thumb=1&w=40&h=40">小愛音響</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b1c8b0308b1591ab93b7fe0937a52427.png?thumb=1&w=40&h=40&f=webp&q=90">噴墨印表機</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/81d89cfdb72d0445ed4ef19942d9dedb.jpg?thumb=1&w=40&h=40">照相機</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7646993f6c382fb32ebd9bfda8ba6158.png?thumb=1&w=40&h=40&f=webp&q=90">雲服務空間年卡</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a18e471294cf49b6937ae90fac6d583.png?thumb=1&w=40&h=40&f=webp&q=90">噴墨印表機墨水</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4fb7885d49255b93f7245aa53501294c.jpg?thumb=1&w=40&h=40">智慧門鎖</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7646993f6c382fb32ebd9bfda8ba6158.png?thumb=1&w=40&h=40&f=webp&q=90">雲服務空間月卡</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4670a965ac5f0dd32689e06c27cea78f.png?thumb=1&w=40&h=40&f=webp&q=90">小米路由器</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/feaab5bd13257dbe8f30b80b6a4472be.jpg?thumb=1&w=40&h=40">視訊門鈴</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/14107363b5dc77b18e9983bda999931d.jpg?thumb=1&w=40&h=40">智慧家庭</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/90b75c1046e486c19f14effd9b45f488.png?thumb=1&w=40&h=40">小愛老師</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/21fedf7ba9019bce59cbc4856f907076.jpg?thumb=1&w=40&h=40">對講機</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/51eacc66512a31713808a60b5695ae28.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi路由器</a>
</div>
</li>
<li class="drow6">
<a href="">電源 配件<i class="iconfont"></i></a>
<div class="leftNavcentent7">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8c55361386a46857f962e5142baeefcf.png?thumb=1&w=40&h=40&f=webp&q=90">移動電源</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5c6e60e48edf17219724faad95963b93.jpg?thumb=1&w=40&h=40">手機殼</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/45dd7a2c4fc3d17d5d261ed3eed7cd15.jpg?thumb=1&w=40&h=40">資料線</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e9e248c899fd895c9267f494ea1aaebf.jpg?thumb=1&w=40&h=40">手機貼膜</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/397d8119508e8e3c895fc30ece88e799.jpg?thumb=1&w=40&h=40">車充</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/27074367aa02371a3c3c417c41195346.png?thumb=1&w=40&h=40&f=webp&q=90">無線充電器</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/864bcd18999a7b0fe22365f7ea7909e0.png?thumb=1&w=40&h=40&f=webp&q=90">充電器</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/6ce8ff4bc1e6ded2d40c53b2aa83b98c.jpg?thumb=1&w=40&h=40">平板配件</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/10ec831749f1c657fc0a494feab15ed4.jpg?thumb=1&w=40&h=40">電池</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9c3ead590f49767a4f562b7285215f5e.jpg?thumb=1&w=40&h=40">黑鯊配件</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2725e04c955dc060ac142fabbf809c1e.jpg?thumb=1&w=40&h=40">自拍杆/a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/57d9989807dbc15c1a82bc49acc1f06f.jpg?thumb=1&w=40&h=40">其他配件</a>
</div>
</li>
<li class="drow">
<a href="">健康 兒童<i class="iconfont"></i></a>
<div class="leftNavcentent1">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=40&h=40&f=webp&q=90">小米10 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/461bf013d08a7a91423cafcbc5ff9339.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 Pro 變焦版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f774ef8332f2204a7c8fbf1b92f29e8a.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X 5G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1db88cd66ff1a6a3e75116988b7f3e12.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi 9A</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4a7a4f24061860901f724b6ba6d75fd9.png?thumb=1&w=40&h=40&f=webp&q=90">小米10</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/92b463f8e502e5d26ac488a252a05b58.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/afa28e7477639537f556eb46e3ca5f43.jpeg?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X 4G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/47057d897ee2c05c9215e059e1308dc6.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 8</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cc563c76a7383d8030d1c23f31c60cb9.png?thumb=1&w=40&h=40&f=webp&q=90">小米10 青春版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7a98170e97ca5df8f5ad2470a8a2d01e.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 5G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cba27e53367b74271a38a4515a692816.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi Note 8 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 8A</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f382e29367ad5852fc1adfdae1332d5c.png?thumb=1&w=40&h=40&f=webp&q=90">騰訊黑鯊遊戲手機</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b2b8b609aab05d9ad184bbe5c8e8be28.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 4G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b4534b9fd22f478314f3cbbf286b7338.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi Note 8</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/85d746207b997873ddfcdca0da025f78.jpg?thumb=1&w=40&h=40">Redmi 7A</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8ade0163e9fdbd92a4b7d7ee3aeab905.jpg?thumb=1&w=40&h=40">小米雲服務</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/84e19ece0125992449a6276e2ba333e9.png?thumb=1&w=40&h=40">手機上門維修</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4d8753c35974699754af66388fc03a16.jpg?thumb=1&w=40&h=40&f=webp&q=90">中國電信</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1a2ed8c7ac2ab7ebfd1554a7a1ac25a6.jpg?thumb=1&w=40&h=40">米粉卡 日租卡</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0803dc7125ffa3447b04b1ae60f57a2b.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 尊享紀念版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/22419dee5ddfa9f4a91782231d07e189.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cadc8b00dbe3b5615bd6ab657715baf.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 9</a>
</div>
</li>
<li class="drow">
<a href="">耳機 音響<i class="iconfont"></i></a>
<div class="leftNavcentent1">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=40&h=40&f=webp&q=90">小米10 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/461bf013d08a7a91423cafcbc5ff9339.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 Pro 變焦版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f774ef8332f2204a7c8fbf1b92f29e8a.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X 5G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1db88cd66ff1a6a3e75116988b7f3e12.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi 9A</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4a7a4f24061860901f724b6ba6d75fd9.png?thumb=1&w=40&h=40&f=webp&q=90">小米10</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/92b463f8e502e5d26ac488a252a05b58.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/afa28e7477639537f556eb46e3ca5f43.jpeg?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X 4G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/47057d897ee2c05c9215e059e1308dc6.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 8</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cc563c76a7383d8030d1c23f31c60cb9.png?thumb=1&w=40&h=40&f=webp&q=90">小米10 青春版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7a98170e97ca5df8f5ad2470a8a2d01e.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 5G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cba27e53367b74271a38a4515a692816.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi Note 8 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 8A</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f382e29367ad5852fc1adfdae1332d5c.png?thumb=1&w=40&h=40&f=webp&q=90">騰訊黑鯊遊戲手機</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b2b8b609aab05d9ad184bbe5c8e8be28.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 4G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b4534b9fd22f478314f3cbbf286b7338.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi Note 8</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/85d746207b997873ddfcdca0da025f78.jpg?thumb=1&w=40&h=40">Redmi 7A</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8ade0163e9fdbd92a4b7d7ee3aeab905.jpg?thumb=1&w=40&h=40">小米雲服務</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/84e19ece0125992449a6276e2ba333e9.png?thumb=1&w=40&h=40">手機上門維修</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4d8753c35974699754af66388fc03a16.jpg?thumb=1&w=40&h=40&f=webp&q=90">中國電信</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1a2ed8c7ac2ab7ebfd1554a7a1ac25a6.jpg?thumb=1&w=40&h=40">米粉卡 日租卡</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0803dc7125ffa3447b04b1ae60f57a2b.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 尊享紀念版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/22419dee5ddfa9f4a91782231d07e189.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cadc8b00dbe3b5615bd6ab657715baf.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 9</a>
</div>
</li>
<li class="drow">
<a href="">生活 箱包<i class="iconfont"></i></a>
<div class="leftNavcentent1">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=40&h=40&f=webp&q=90">小米10 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/461bf013d08a7a91423cafcbc5ff9339.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 Pro 變焦版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f774ef8332f2204a7c8fbf1b92f29e8a.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X 5G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1db88cd66ff1a6a3e75116988b7f3e12.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi 9A</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4a7a4f24061860901f724b6ba6d75fd9.png?thumb=1&w=40&h=40&f=webp&q=90">小米10</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/92b463f8e502e5d26ac488a252a05b58.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/afa28e7477639537f556eb46e3ca5f43.jpeg?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X 4G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/47057d897ee2c05c9215e059e1308dc6.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 8</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cc563c76a7383d8030d1c23f31c60cb9.png?thumb=1&w=40&h=40&f=webp&q=90">小米10 青春版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7a98170e97ca5df8f5ad2470a8a2d01e.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 5G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cba27e53367b74271a38a4515a692816.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi Note 8 Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 8A</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f382e29367ad5852fc1adfdae1332d5c.png?thumb=1&w=40&h=40&f=webp&q=90">騰訊黑鯊遊戲手機</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b2b8b609aab05d9ad184bbe5c8e8be28.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 4G</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b4534b9fd22f478314f3cbbf286b7338.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi Note 8</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/85d746207b997873ddfcdca0da025f78.jpg?thumb=1&w=40&h=40">Redmi 7A</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8ade0163e9fdbd92a4b7d7ee3aeab905.jpg?thumb=1&w=40&h=40">小米雲服務</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/84e19ece0125992449a6276e2ba333e9.png?thumb=1&w=40&h=40">手機上門維修</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4d8753c35974699754af66388fc03a16.jpg?thumb=1&w=40&h=40&f=webp&q=90">中國電信</a>
<a href=""><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1a2ed8c7ac2ab7ebfd1554a7a1ac25a6.jpg?thumb=1&w=40&h=40">米粉卡 日租卡</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0803dc7125ffa3447b04b1ae60f57a2b.jpg?thumb=1&w=40&h=40&f=webp&q=90">Redmi K30 尊享紀念版</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/22419dee5ddfa9f4a91782231d07e189.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 10X Pro</a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cadc8b00dbe3b5615bd6ab657715baf.png?thumb=1&w=40&h=40&f=webp&q=90">Redmi 9</a>
</div>
</li>
</ul>
</div>
</div>
<div class="potobo">
<!-- 圖示盒子 -->
<div class="tubiao w">
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/49cf18a37fd279e4c9cd0eedb7cec5c6.png" alt="智慧生活">
<div>智慧生活</div>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png" alt="企業團購">
<div>企業團購</div>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png" alt="F碼團購">
<div>F碼團購</div>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png" alt="米粉卡">
<div>米粉卡</div>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png" alt="以舊換新">
<div>以舊換新</div>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png" alt="話費充值">
<div>話費充值</div>
</a>
</div>
<div class="poto w">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg" alt="" width="316px" height="170px">
</div>
<div class="poto w">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg" alt="" width="316px" height="170px">
</div>
<div class="poto w">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg" alt="" width="316px" height="170px">
</div>
</div>
</div>
<div class="mainBox">
<div class="mainCentent">
<div class="miaosha">
<div class="miaoShaheard">
<h1>小米秒殺</h1>
<div class="miaoBtn">
<button class="hengBtnl"><</button><button class="hengBtnr">></button>
</div>
</div>
<div class="daoji">
<div class="shijian">10:00 場</div>
<img src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ%0AbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp%0Abj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6%0AeD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1%0AMTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo%0AdHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw%0AdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv%0AIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS%0AZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD%0AcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5j%0AZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1%0AbWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1N%0AOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIy%0AQzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFF%0AOEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94Onht%0AcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pE%0AcHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHf%0AS48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuY%0AjRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQN%0AJbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzIL%0AijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7%0AKnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1L%0AbN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNc%0AxDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7V%0AkBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgU%0AKc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2E%0AcnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ%0A7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII=" alt="">
<div class="daoyu">距離結束還有</div>
<div class="biao">
<div class="hour e">00</div><div class="r">:</div><div class="minute e">00</div><div class="r">:</div><div class="second e">00</div>
</div>
</div>
<div class="hengtrun">
<ul class="hengul">
<li>
<a href="">
<div class="hengCentent">
<div class="hengimg">
<img width="160" height="160" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg">
</div>
<p class="n1">Redmi路由器AC2100 白色</p>
<p class="n2">全民升級2000兆</p>
<p class="n3">
16.9元
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="hengCentent">
<div class="hengimg">
<img width="160" height="160" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg">
</div>
<p class="n1">Redmi路由器AC2100 白色2</p>
<p class="n2">全民升級2000兆</p>
<p class="n3">
16.9元
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="hengCentent">
<div class="hengimg">
<img width="160" height="160" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg">
</div>
<p class="n1">Redmi路由器AC2100 白色3</p>
<p class="n2">全民升級2000兆</p>
<p class="n3">
16.9元
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="hengCentent">
<div class="hengimg">
<img width="160" height="160" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg">
</div>
<p class="n1">Redmi路由器AC2100 白色4</p>
<p class="n2">全民升級2000兆</p>
<p class="n3">
16.9元
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="hengCentent">
<div class="hengimg">
<img width="160" height="160" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg">
</div>
<p class="n1">Redmi路由器AC2100 白色5</p>
<p class="n2">全民升級2000兆</p>
<p class="n3">
16.9元
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="hengCentent">
<div class="hengimg">
<img width="160" height="160" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg">
</div>
<p class="n1">Redmi路由器AC2100 白色6</p>
<p class="n2">全民升級2000兆</p>
<p class="n3">
16.9元
</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="fenge">
<a href=""> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c907ad4004b32609a589bdada203443.jpg" alt="" width="1226px" height="120px"></a>
</div>
<div class="shouji">
<div class="shoujiheard">
<h1>手機</h1>
<span class="chakan"><a href="">檢視全部<i class="iconfont"></i></a></span>
</div>
<div class="shoujiCentent">
<div class="shouji-left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg " alt="" width="234px" height="614px">
</div>
<div class="shouji-nav">
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
</div>
</div>
</div>
<div class="fenge">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg" alt="" width="1226px" height="120px"></a>
</div>
<div class="jiadian">
<div class="jiadianheard">
<h1>家電</h1>
<div class="jiaNav">
<a href="">熱門</a>
<a href="">電視影音</a>
</div>
</div>
<div class="jiadianCentent">
<div class="jiadian-left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f256b81e4233333692eece77ed06ebc2.jpg " alt="" width="234px" height="300px">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f256b81e4233333692eece77ed06ebc2.jpg " alt="" width="234px" height="300px">
</div>
<div class="jiadian-nav">
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<div class="jiadian-mini">
<a href="" class="jiadian-a">
<p class="a3">
<span class="a">Air 13.3" 2019款</span><span class="a2"> 5699元起</span>
</p>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg" alt="" width="80px" height="80px">
</a>
<a href="" class="jiadian-b">
<p class="a3">
<span class="a5">瀏覽更多</span><span class="a6"> 熱門</span>
</p>
<i class="iconfont"></i>
</a>
</div>
</div>
</div>
</div>
<div class="fenge">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/59e8fc8ba9718c266882719fb4bbcedd.jpg" alt="" width="1226px" height="120px"></a>
</div>
<div class="jiadian">
<div class="jiadianheard">
<h1>家電</h1>
<div class="jiaNav">
<a href="">熱門</a>
<a href="">安防</a>
<a href="">出行</a>
</div>
</div>
<div class="jiadianCentent">
<div class="jiadian-left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f256b81e4233333692eece77ed06ebc2.jpg " alt="" width="234px" height="300px">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f256b81e4233333692eece77ed06ebc2.jpg " alt="" width="234px" height="300px">
</div>
<div class="jiadian-nav">
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<div class="jiadian-mini">
<a href="" class="jiadian-a">
<p class="a3">
<span class="a">Air 13.3" 2019款</span><span class="a2"> 5699元起</span>
</p>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg" alt="" width="80px" height="80px">
</a>
<a href="" class="jiadian-b">
<p class="a3">
<span class="a5">瀏覽更多</span><span class="a6"> 熱門</span>
</p>
<i class="iconfont"></i>
</a>
</div>
</div>
</div>
</div>
<div class="fenge">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9abff2b05dd6aae9ffdf51d32745ae36.jpg" alt="" width="1226px" height="120px"></a>
</div>
<div class="jiadian">
<div class="jiadianheard">
<h1>家電</h1>
<div class="jiaNav">
<a href="">熱門</a>
<a href="">安防</a>
<a href="">出行</a>
</div>
</div>
<div class="jiadianCentent">
<div class="jiadian-left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f256b81e4233333692eece77ed06ebc2.jpg " alt="" width="234px" height="300px">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f256b81e4233333692eece77ed06ebc2.jpg " alt="" width="234px" height="300px">
</div>
<div class="jiadian-nav">
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<div class="jiadian-mini">
<a href="" class="jiadian-a">
<p class="a3">
<span class="a">Air 13.3" 2019款</span><span class="a2"> 5699元起</span>
</p>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg" alt="" width="80px" height="80px">
</a>
<a href="" class="jiadian-b">
<p class="a3">
<span class="a5">瀏覽更多</span><span class="a6"> 熱門</span>
</p>
<i class="iconfont"></i>
</a>
</div>
</div>
</div>
</div>
<div class="fenge">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1615d1842fe85914a545297836a44271.jpg" alt="" width="1226px" height="120px"></a>
</div>
<div class="jiadian">
<div class="jiadianheard">
<h1>家電</h1>
<div class="jiaNav">
<a href="">熱門</a>
<a href="">安防</a>
<a href="">出行</a>
</div>
</div>
<div class="jiadianCentent">
<div class="jiadian-left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f256b81e4233333692eece77ed06ebc2.jpg " alt="" width="234px" height="300px">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f256b81e4233333692eece77ed06ebc2.jpg " alt="" width="234px" height="300px">
</div>
<div class="jiadian-nav">
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<div class="jiadian-mini">
<a href="" class="jiadian-a">
<p class="a3">
<span class="a">Air 13.3" 2019款</span><span class="a2"> 5699元起</span>
</p>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg" alt="" width="80px" height="80px">
</a>
<a href="" class="jiadian-b">
<p class="a3">
<span class="a5">瀏覽更多</span><span class="a6"> 熱門</span>
</p>
<i class="iconfont"></i>
</a>
</div>
</div>
</div>
</div>
<div class="fenge">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ddec858a9371b4d7833181941520bf8b.jpg" alt="" width="1226px" height="120px"></a>
</div>
<div class="jiadian">
<div class="jiadianheard">
<h1>家電</h1>
<div class="jiaNav">
<a href="">熱門</a>
<a href="">安防</a>
<a href="">出行</a>
</div>
</div>
<div class="jiadianCentent">
<div class="jiadian-left">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f256b81e4233333692eece77ed06ebc2.jpg " alt="" width="234px" height="300px">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f256b81e4233333692eece77ed06ebc2.jpg " alt="" width="234px" height="300px">
</div>
<div class="jiadian-nav">
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg" alt="" width="160px" height="160px">
<p class="a">小米10 至尊版</p>
<p class="a1">120X 變焦/120W秒充/120Hz螢幕</p>
<p class="a2"> 5299元起</p>
</a>
<div class="jiadian-mini">
<a href="" class="jiadian-a">
<p class="a3">
<span class="a">Air 13.3" 2019款</span><span class="a2"> 5699元起</span>
</p>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg" alt="" width="80px" height="80px">
</a>
<a href="" class="jiadian-b">
<p class="a3">
<span class="a5">瀏覽更多</span><span class="a6"> 熱門</span>
</p>
<i class="iconfont"></i>
</a>
</div>
</div>
</div>
</div>
<div class="fenge">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88e35cffc82cd98cd53172460067af17.jpg" alt="" width="1226px" height="120px"></a>
</div>
<div class="shiping">
<div class="shoujiheard">
<h1>手機</h1>
<span class="chakan"><a href="">檢視全部<i class="iconfont"></i></a></span>
</div>
<div class="shiCentent">
<a href="" class="shi-img">
<div class="shiBox">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/101b19aca4bb489bcef0f503e44ec866.jpg" alt="" width="295px" height="180px" title="播放視訊">
<div class="icon"><i class="iconfont"></i></div>
</div>
<div class="shi-text">
<p class="a">Redmi 10X系列釋出會</p>
<p class="a1"> Redmi 10X系列釋出會</p>
</div>
</a>
<a href="" class="shi-img z">
<div class="shiBox">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/101b19aca4bb489bcef0f503e44ec866.jpg" alt="" width="295px" height="180px" title="播放視訊">
<div class="icon"><i class="iconfont"></i></div>
</div>
<div class="shi-text">
<p class="a">Redmi 10X系列釋出會</p>
<p class="a1"> Redmi 10X系列釋出會</p>
</div>
</a>
<a href="" class="shi-img z">
<div class="shiBox">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/101b19aca4bb489bcef0f503e44ec866.jpg" alt="" width="295px" height="180px" title="播放視訊">
<div class="icon"><i class="iconfont"></i></div>
</div>
<div class="shi-text">
<p class="a">Redmi 10X系列釋出會</p>
<p class="a1"> Redmi 10X系列釋出會</p>
</div>
</a>
<a href="" class="shi-img z">
<div class="shiBox">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/101b19aca4bb489bcef0f503e44ec866.jpg" alt="" width="295px" height="180px" title="播放視訊">
<div class="icon"><i class="iconfont"></i></div>
</div>
<div class="shi-text">
<p class="a">Redmi 10X系列釋出會</p>
<p class="a1"> Redmi 10X系列釋出會</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="mainBotton">
<div class="mainBcentent">
<div class="bottonBox1">
<div class="botton-nav">
<ul>
<li>
<a href=""><i class="iconfont"></i>預約維修服務</a>
</li>
<li class="v">
<a href=""><i class="iconfont"></i>預約維修服務</a>
</li>
<li class="v">
<a href=""><i class="iconfont"></i>預約維修服務</a>
</li>
<li class="v">
<a href=""><i class="iconfont"></i>預約維修服務</a>
</li>
<li class="v">
<a href=""><i class="iconfont"></i>預約維修服務</a>
</li>
</ul>
</div>
<div class="botton-table">
<div class="tableBox n">
<table>
<tr class="b">
<th>幫助中心</th>
<th>服務支援</th>
<th>線下門店</th>
<th>關於小米</th>
<th>關注我們</th>
<th>特色服務</th>
</tr>
<tr>
<td><a href="">賬戶管理</a></td>
<td><a href="">售後政策</a></td>
<td><a href="">小米之家</a></td>
<td><a href="">瞭解小米</a></td>
<td><a href="">新浪微博</a></td>
<td><a href="">F 碼通道</a></td>
</tr>
<tr>
<td><a href="">購物指南</a></td>
<td><a href="">自助服務</a></td>
<td><a href="">服務網點</a></td>
<td><a href="">加入小米</a></td>
<td><a href="">官方微信</a></td>
<td><a href="">禮物碼</a></td>
</tr>
<tr>
<td><a href="">訂單操作</a></td>
<td><a href="">相關下載</a></td>
<td><a href="">授權體驗店</a></td>
<td><a href="">投資者關係</a></td>
<td><a href="">聯絡我們</a></td>
<td><a href="">防偽查詢</a></td>
</tr>
<tr>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href="">企業社會責任</a></td>
<td><a href="">公益基金會</a></td>
<td><a href=""></a></td>
</tr>
<tr>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href="">廉潔舉報</a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</tr>
</table>
</div>
<div class="table-nav n">
<p class="b1">400-100-5678</p>
<p class="b2">8:00-18:00（僅收市話費）</p>
<div class="b3">
<p>人工客服</p>
</div>
<p class="b4">關注小米：<a href=""><i class="iconfont"></i></a><a href=""><i class="iconfont"></i></a></p>
</div>
</div>
</div>
<div class="bottonBox2">
<div class="bottNav">
<ul>
<li><a href="">小米商城</a></li>
<span>|</span>
<li><a href="">MIUI</a></li>
<span>|</span>
<li><a href="">米家</a></li>
<span>|</span>
<li><a href="">米聊</a></li>
<span>|</span>
<li><a href="">多看</a></li>
<span>|</span>
<li><a href="">遊戲</a></li>
<span>|</span>
<li><a href="">政企服務</a></li>
<span>|</span>
<li><a href="">小米天貓店</a></li>
<span>|</span>
<li><a href="">小米集團隱私政策</a></li>
<span>|</span>
<li><a href="">小米公司兒童資訊保護規則</a></li>
<span>|</span>
<li><a href="">小米商城隱私政策</a></li>
<span>|</span>
<li><a href="">小米商城使用者協議</a></li>
<span>|</span>
<li><a href="">問題反饋</a></li>
<span>|</span>
<li><a href="">Select Location</a></li>
</ul>
</div>
<div class="dibu">
<span>©</span><a href="">mi.com</a><span>京ICP證110507號</span><a href="">京ICP備10046444號</a><a href="">京公網安備11010802020134號</a><a href="">京網文[2020]0276-042號</a>
</div>
<div class="dibu">
<a href="">（京）網械平臺備字（2018）第00005號</a><a href="">網際網路藥品資訊服務資格證 (京)-非經營性-2014-0090</a><a href="">營業執照</a><a href="">醫療器械質量公告</a>
</div>
<div class="dibu">
<a href="">增值電信業務許可證</a><span>網路食品經營備案 京食藥網食備201810017 </span><a href="">食品經營許可證</a>
</div>
<div class="dibu">
<span>違法和不良資訊舉報電話：171-5104-4404</span><a href="">智慧財產權侵權投訴</a><span>本網站所列資料，除特殊說明，所有資料均出自我司實驗室測試</span>
</div>
<div class="dibu-logo">
<a href=""><img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt=""></a>
<a href=""> <img src="https://s01.mifile.cn/i/v-logo-2.png" alt=""></a>
<a href=""><img src="https://s01.mifile.cn/i/v-logo-1.png" alt=""></a>
<a href=""> <img src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<script>
var img1 = document.querySelector('#img1');
var imgArr = [
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7a29cd93c20f527ba24b52a1741c31b7.jpg',
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ea58a3ce3c7499fdc67f30ed956b0ca.jpg',
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6eecc57f60b6b55b779f7908cfce230c.jpg',
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fe253b0048a5517abca36a605acacba3.jpg',
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9a8a020cf3058f05e8db9483d7a0e45.jpg'
];
var index = 0;
var d;
dingshi();
function dingshi(){
d=setInterval(function() {
index++;
if(index >= imgArr.length){
index = 0;
};
img1.src = imgArr[index];
},5000)
};
var leftbtn = document.querySelector('.left-btn');
leftbtn.onclick = function() {
clearInterval(d);
index--;
if(index < 0){
index = imgArr.length - 1;
}
img1.src = imgArr[index];
dingshi();
};
var rightbtn = document.querySelector('.right-btn');
rightbtn.onclick = function() {
clearInterval(d);
index++;
if(index > imgArr.length - 1){
index = 0;
}
img1.src = imgArr[index];
dingshi();
};
var lis =document.getElementsByClassName('item');
for(var i =0;i < imgArr.length;i++) {
lis[i].onclick = function() {
index = this.getAttribute('data-num');
img1.src = imgArr[index];
}
};
var hengbtnl = document.querySelector('.hengBtnl');
var hengul = document.querySelector('hengul');
$('.k').mouseenter(function(){
$('.k1').stop().slideDown();
});
$('.k').mouseleave(function(){
$('.k1').stop().slideUp();
});
$('.drow').mouseenter(function(){
$('.leftNavcentent1').show();
});
$('.drow').mouseleave(function(){
$('.leftNavcentent1').hide();
});
$('.drow1').mouseenter(function(){
$('.leftNavcentent2').show();
});
$('.drow1').mouseleave(function(){
$('.leftNavcentent2').hide();
});
$('.drow2').mouseenter(function(){
$('.leftNavcentent3').show();
});
$('.drow2').mouseleave(function(){
$('.leftNavcentent3').hide();
});
$('.drow3').mouseenter(function(){
$('.leftNavcentent4').show();
});
$('.drow3').mouseleave(function(){
$('.leftNavcentent4').hide();
});
$('.drow4').mouseenter(function(){
$('.leftNavcentent5').show();
});
$('.drow4').mouseleave(function(){
$('.leftNavcentent5').hide();
});
$('.drow5').mouseenter(function(){
$('.leftNavcentent6').show();
});
$('.drow5').mouseleave(function(){
$('.leftNavcentent6').hide();
});
$('.drow6').mouseenter(function(){
$('.leftNavcentent7').show();
});
$('.drow6').mouseleave(function(){
$('.leftNavcentent7').hide();
});
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2020-8-14 20:00:00'); //返回使用者輸入時間總的毫秒數
countDown();
setInterval(countDown,1000);
function countDown(){
var nowTime = +new Date; //返回當前時間總的毫秒數
var times = (inputTime - nowTime) / 1000; //times是剩餘時間總毫秒數
var h = parseInt(times / 60 / 60 % 24); //時
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60); //分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s =parseInt(times % 60); //秒
s = s <10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
</body>
</html>
css部分程式碼
.topOutbox{
width: 1349px;
height: 140px;
/* background-color: aqua; */
}
.topInbox1{
width: 1349px;
height: 40px;
background-color: rgb(51, 51, 51);
}
.topInbox1-centent{
width: 1226px;
height: 40px;
margin: 0 auto;
}
.topIn1-nav{
width: 707px;
height: 40px;
line-height: 40px;
}
.k1{
width: 90px;
height: 90px;
padding: 18px 17px 12px 17px;
position: absolute;
top: 22px;
left: 585px;
display: none;
}
.topIn1-nav ul li,span{
float: left;
}
.topIn1-nav ul li a{
font-size: 12px;
color: #b0b0b0;
}
.topIn1-nav ul span{
font-size: 12px;
color: #424242;
margin: 0 7px;
}
.topIn1-nav2{
width: 142px;
height: 40px;
line-height: 40px;
}
.topIn1-nav2 a{
font-size: 12px;
color: #b0b0b0;
float: left;
}
.topIn1-nav2 span{
float: left;
font-size: 12px;
color: #424242;
margin: 0 7px;
}
.topIn1-nav3 a{
font-size: 12px;
color: #b0b0b0;
}
.topIn1-nav3{
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
background-color: rgb(66, 66, 66);
}
.topInbox1-centent div{
float: left;
}
.topIn1-nav2{
margin-left: 230px;
}
.topIn1-nav3{
margin-left: 27px;
}
.topA:hover{
color: #ffffff;
}
.topIn1-nav3:hover{
background-color: #ffffff;
}
.topIn1-nav3:hover a{
color: #ff6700;
}
.topInbox2{
widows: 1349px;
height: 100px;
}
.topInbox2-centent{
width: 1226px;
height: 100px;
margin: 0 auto;
/* background-color: beige; */
}
.topIn2-logo{
width: 55px;
height: 77.5px;
padding-top: 22.5px;
}
.logo{
width: 55px;
height: 55px;
background-color: #ff6700;
text-align: center;
line-height: 55px;
}
.logo .iconfont{
font-size: 40px;
color: #ffffff;
}
.topIn2-img{
width: 165px;
height: 100px;
line-height: 100px;
margin-left: 20px;
}
.topIn2-nav{
width: 620px;
height: 100px;
line-height: 100px;
}
.topIn2-nav ul li{
font-size: 16px;
color: rgb(51, 51, 51);
cursor: pointer;
float: left;
margin: 0 10px;
}
.topIn2-nav ul li a{
font-size: 16px;
color: rgb(51, 51, 51);
}
.topIn2-nav ul li:hover{
color: #ff6700;
}
.topIn2-nav ul li a:hover{
color: #ff6700;
}
.topIn2-input{
width: 292px;
height: 100px;
line-height: 100px;
margin-left: 74px;
}
.topIn2-input input{
width: 224px;
height: 48px;
padding: 0 10px;
border-width: 1px 0 1px 1px;
border-color: rgb(224, 224, 224);
border-style: solid;
}
.topIn2-input button{
width: 47px;
height: 50px;
padding: 0 6px;
border-width: 1px 1px 1px 1px;
border-color: rgb(224, 224, 224);
border-style: solid;
cursor: pointer;
background-color: rgb(255, 255, 255);
}
.topIn2-input button .iconfont{
font-size: 25px;
}
.topInbox2-centent div{
float: left;
}
.trunBox{
width: 1226px;
height: 645px;
margin: 0 auto;
/* background-color: aquamarine; */
margin-bottom: 26px;
}
.trunBo{
width: 1226px;
height: 460px;
position: relative;
margin-bottom: 15px;
}
.left-btn{
width: 41px;
height: 69px;
text-align: center;
line-height: 69px;
position: absolute;
left: 235px;
top: 195px;
cursor: pointer;
color: #cec6c6;
border-radius: 0 4px 4px 0;
}
.left-btn .iconfont{
font-size: 40px;
}
.left-btn:hover{
background-color: #6e6a6a;
color: #ffffff;
}
.right-btn{
width: 41px;
height: 69px;
text-align: center;
line-height: 69px;
position: absolute;
right: 0;
top: 195px;
cursor: pointer;
color: #cec6c6;
border-radius: 4px 0px 0px 4px;
}
.right-btn .iconfont{
font-size: 30px;
}
.right-btn:hover{
background-color: #6e6a6a;
color: #ffffff;
}
.yuandian li{
width: 6px;
height:6px;
border-radius: 100%;
background-color: #5f5d5d;
float: left;
margin-right: 5px;
border: 2px #b0b0b0 solid;
cursor: pointer;
}
.yuandian{
position: absolute;
bottom: 20px;
right: 40px;
}
.left-nav{
width: 235px;
height:420px ;
position: absolute;
top: 0;
left: 0;
background-color:rgba(105, 101, 101, 0.6);
padding: 20px 0;
}
.left-nav a{
display: block;
width: 205px;
height: 42px;
padding-left: 30px;
color: rgb(255, 255, 255);
font-size: 14px;
line-height: 42px;
position: relative;
}
.left-nav li:hover{
background-color: #ff6700;
}
.left-nav a .iconfont{
font-size: 14px;
position: absolute;
right: 20px;
}
.leftNavcentent1{
width: 991px;
height: 460px;
background-color:#ffffff;
position: absolute;
top: 0;
left: 235px;
display: none;
}
.leftNavcentent1 a{
display: block;
width: 227px;
height: 76px;
padding-left: 20px;
float: left;
line-height: 76px;
color: #333333;
}
.leftNavcentent1 a:hover{
color: #ff6700;
}
.leftNavcentent1 a img{
margin-right: 10px;
}
.leftNavcentent2{
width: 991px;
height: 460px;
background-color:#ffffff;
position: absolute;
top: 0;
left: 235px;
display: none;
}
.leftNavcentent2 a{
display: block;
width: 227px;
height: 76px;
padding-left: 20px;
float: left;
line-height: 76px;
color: #333333;
}
.leftNavcentent2 a:hover{
color: #ff6700;
}
.leftNavcentent2 a img{
margin-right: 10px;
}
.leftNavcentent3{
width: 495px;
height: 460px;
background-color:#ffffff;
position: absolute;
top: 0;
left: 235px;
display: none;
}
.leftNavcentent3 a{
display: block;
width: 227px;
height: 76px;
padding-left: 20px;
float: left;
line-height: 76px;
color: #333333;
}
.leftNavcentent3 a:hover{
color: #ff6700;
}
.leftNavcentent3 a img{
margin-right: 10px;
}
.leftNavcentent4{
width: 991px;
height: 460px;
background-color:#ffffff;
position: absolute;
top: 0;
left: 235px;
display: none;
}
.leftNavcentent4 a{
display: block;
width: 227px;
height: 76px;
padding-left: 20px;
float: left;
line-height: 76px;
color: #333333;
}
.leftNavcentent4 a:hover{
color: #ff6700;
}
.leftNavcentent4 a img{
margin-right: 10px;
}
.leftNavcentent5{
width: 741px;
height: 460px;
background-color:#ffffff;
position: absolute;
top: 0;
left: 235px;
display: none;
}
.leftNavcentent5 a{
display: block;
width: 227px;
height: 76px;
padding-left: 20px;
float: left;
line-height: 76px;
color: #333333;
}
.leftNavcentent5 a:hover{
color: #ff6700;
}
.leftNavcentent5 a img{
margin-right: 10px;
}
.leftNavcentent6{
width: 741px;
height: 460px;
background-color:#ffffff;
position: absolute;
top: 0;
left: 235px;
display: none;
}
.leftNavcentent6 a{
display: block;
width: 227px;
height: 76px;
padding-left: 20px;
float: left;
line-height: 76px;
color: #333333;
}
.leftNavcentent6 a:hover{
color: #ff6700;
}
.leftNavcentent6 a img{
margin-right: 10px;
}
.leftNavcentent7{
width: 495px;
height: 460px;
background-color:#ffffff;
position: absolute;
top: 0;
left: 235px;
display: none;
}
.leftNavcentent7 a{
display: block;
width: 227px;
height: 76px;
padding-left: 20px;
float: left;
line-height: 76px;
color: #333333;
}
.leftNavcentent7 a:hover{
color: #ff6700;
}
.leftNavcentent7 a img{
margin-right: 10px;
}
.potobo{
width: 1226px;
height: 170px;
}
.tubiao{
width: 227px;
height: 164px;
padding: 3px 3px;
background-color: rgb(95, 87, 80);
}
.tubiao a{
display: inline-block;
width: 73px;
height: 64px;
text-align: center;
padding-top: 18px;
}
.tubiao a:hover div{
color: #ffffff;
}
.tubiao a img{
width: 24px;
height: 24px;
}
.tubiao a div{
font-size: 12px;
color: #b0b0b0;
margin: 0 auto;
}
.potobo .w{
float: left;
}
.poto{
margin-left: 15px;
}
.mainBox{
width: 1349px;
height: 6019px;
}
.mainCentent{
width: 1226px;
height: 6000px;
/* background-color: cyan; */
margin: 0 auto;
}
.miaosha{
width: 1226px;
height: 398px;
position: relative;
}
.miaoShaheard{
width: 1226px;
height: 58px;
background-color: #ffffff;
line-height: 58px;
position: relative;
}
.miaoShaheard h1{
font-size: 22px;
color: #333333;
}
.miaoShaheard button{
width: 36px;
height: 24px;
font-size: 18px;
border: 1px #cec6c6 solid;
}
.miaoBtn{
position: absolute;
top:8px;
right: 20px;
}
.daoji{
width: 235px;
height: 299px;
border-top: 1px red solid;
background-color: rgb(241, 237, 237);
text-align: center;
padding-top: 40px;
}
.shijian{
font-size: 21px;
color: #ef3a3b;
}
.daoji img{
width: 34px;
height: 53px;
margin: 25px 0;
}
.daoyu{
color: rgba(0, 0, 0, 53);
font-size: 15px;
}
.biao{
width: 200px;
height: 46px;
padding-left: 35px;
margin-top: 30px;
}
.biao div{
float: left;
}
.e{
width: 46px;
height: 46px;
background-color: rgb(96, 87, 81);
text-align: center;
line-height: 46px;
font-size: 24px;
color: #ffffff;
}
.r{
width: 15px;
height: 46px;
font-size: 28px;
color: rgb(60,57, 51);
text-align: center;
line-height: 46px;
}
.hengtrun{
width: 970px;
height: 340px;
/* background-color: #ff6700; */
/* background-color: aqua; */
position: absolute;
top: 58px;
left: 256px;
overflow: hidden;
}
.hengtrun ul li a{
display: block;
width: 235px;
height: 300px;
background-color: #ffffff;
border-top: 1px #04ad29 solid;
padding-top: 39px;
}
.hengtrun ul li{
float: left;
margin-left: 6px;
}
.hengCentent{
width: 234px;
height: 263px;
/* background-color: #04ad29; */
text-align: center;
}
.hengimg{
width: 160px;
height:166px ;
padding: 0 37px 22px 37px;
}
.n1{
color: #212121;
font-size: 14px;
}
.n2{
color: #b0b0b0;
font-size: 14px;
margin: 10px 0;
}
.n3{
color: #ff6700;
font-size: 12px;
}
.hengul{
width: 2600px;
height: 263px;
position: absolute;
left: 0px;
}
.fenge{
margin: 20px auto;
}
.shouji{
width: 1226px;
height: 686px;
/* background-color: antiquewhite; */
}
.shoujiheard{
width: 1226px;
height: 58px;
background-color: #ffffff;
line-height: 58px;
position: relative;
}
.shoujiheard h1{
font-size: 22px;
color: #333333;
}
.chakan{
display: block;
width: 90px;
height: 58px;
line-height: 58px;
position: absolute;
top: 0px;
right: 0px;
}
.chakan a{
font-size: 16px;
color: #424242;
transition: 0.5s;
}
.chakan a .iconfont{
margin-left: 5px;
}
.chakan a:hover{
color: #ff6700;
}
.shoujiCentent{
width: 1226px;
height: 628px;
background-color: #ffffff;
/* position: relative; */
}
.shouji-left{
width: 234px;
height: 614px;
/* background-color: #ef3a3b; */
}
.shouji-nav{
width: 992px;
height: 628px;
/* position: absolute;
top: 0;
left: 235px; */
/* background-color: burlywood; */
}
.shoujiCentent div{
float: left;
}
.shouji-nav a{
display: block;
width: 234px;
height: 270px;
background-color: #ffffff;
text-align: center;
padding-top: 30px;
float: left;
margin-left: 14px;
margin-bottom: 14px;
transition: 0.5s;
}
.shouji-nav a:hover{
transform: translateY(-5px);
box-shadow:0px 0px 40px #B0B0B0;
}
.a{
font-size: 14px;
color: #333333;
}
.a1{
font-size: 12px;
color: #b0b0b0;
}
.a2{
font-size: 14px;
color: #ff6700;
}
.shouji-nav a p{
margin-top: 15px;
}
.jiadian{
width: 1226px;
height: 686px;
/* background-color: antiquewhite; */
}
.jiadianheard{
width: 1226px;
height: 58px;
background-color: #ffffff;
line-height: 58px;
position: relative;
}
.jiadianheard h1{
font-size: 22px;
color: #333333;
}
.jiaNav{
width: 140px;
height: 58px;
position: absolute;
top: 0;
right: 0px;
}
.jiaNav a{
color: #424242;
font-size: 16px;
margin-right: 8px;
}
.jiaNav a:hover{
color: #ff6700;
border-bottom: 3px #ff6700 solid;
}
.jiadianCentent{
width: 1226px;
height: 628px;
background-color: #ffffff;
/* position: relative; */
}
.jiadianCentent div{
float: left;
}
.jiadian-left{
width: 234px;
height: 628px;
}
.jiadian-left img{
display: block;
margin-top: 10px;
}
.jiadian-nav{
width: 992px;
height: 628px;
position: relative;
/* top: 0;
left: 235px; */
/* background-color: burlywood; */
}
.jiadian-nav a{
display: block;
width: 234px;
height: 270px;
background-color: #ffffff;
text-align: center;
padding-top: 30px;
float: left;
margin-left: 14px;
margin-bottom: 14px;
transition: 0.5s;
}
.jiadian-nav a:hover{
transform: translateY(-5px);
box-shadow:0px 0px 40px #B0B0B0;
}
.a{
font-size: 14px;
color: #333333;
}
.a1{
font-size: 12px;
color: #b0b0b0;
}
.a2{
font-size: 14px;
color: #ff6700;
}
.jiadian-nav a p{
margin-top: 15px;
}
.jiadian-mini{
display: block;
width: 234px;
height: 300px;
position: absolute;
right: 0;
top: 314px;
}
.jiadian-mini a{
width: 235px;
height: 100px;
display: block;
margin: 10px 0;
}
.jiadian-a{
position: relative;
}
.jiadian-mini img{
position: absolute;
top: 30px;
right: 20px;
}
.a3{
width: 110px;
height: 50px;
display: block;
padding-left: 10px;
}
.a3 span{
margin-top: 10px;
}
.jiadian-b{
position: relative;
}
.jiadian-b .iconfont{
position: absolute;
font-size: 50px;
color: #ff6700;
right: 30px;
top: 40px;
}
.a5{
font-size:22px;
color: #333333;
}
.a6{
font-size: 14px;
color: #b0b0b0;
}
.shiping{
width: 1226px;
height: 343px;
/* background-color: #ff6700; */
}
.shiCentent{
width: 1226px;
height:285px ;
}
.shi-img{
display: block;
width: 295px;
height: 285px;
transition: 0.5s;
}
.shiBox{
width: 295px;
height: 180px;
position: relative;
}
.icon{
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
top: 130px;
left: 10px;
}
.icon .iconfont{
font-size: 35px;
color: #ffffff;
}
.shi-text{
width: 295px;
height: 105px;
background-color: aliceblue;
text-align: center;
overflow: hidden;
}
.shi-text p{
margin-top: 25px;
}
.shiCentent .shi-img{
float: left;
}
.z{
margin-left: 15px;
}
.shi-img:hover{
transform: translateY(-3px);
box-shadow:0px 0px 40px #B0B0B0;
}
.shi-img:hover .iconfont{
color: #ff6700;
}
.mainBotton{
width: 1349px;
height: 525px;
}
.mainBcentent{
width: 1226px;
height: 525px;
margin:0 auto;
/* background-color: #b0b0b0; */
}
.bottonBox1{
width: 1226px;
height: 272px;
/* background-color: #b0b0b0; */
}
.botton-nav{
width: 1226px;
height: 52.5px;
border-bottom:1px rgb(242,242,242) solid;
padding-top: 27.5px;
background-color: #ffffff;
}
.botton-nav ul li{
float: left;
width: 244px;
height: 25px;
text-align: center;
}
.botton-nav ul li a{
font-size: 16px;
color: #333333;
transition: 0.5s;
}
.botton-nav ul li a:hover{
color: #ff6700;
}
.botton-nav ul li a .iconfont{
font-size: 20px;
}
.v{
border-left:1px #B0B0B0 solid ;
}
.tableBox table th{
width: 160px;
height: 38px;
font-size: 14px;
}
.tableBox table td{
width: 160px;
height: 30px;
}
.tableBox table td a{
font-size: 12px;
color: #757575;
}
.tableBox table td a:hover{
color: #ff6700;
}
.table-nav{
width: 190px;
height: 111px;
/* background-color: #b6e9fd; */
padding-left: 61px;
overflow: hidden;
border-left:1px #b0b0b0 solid;
}
.b3{
width: 120px;
height: 30px;
border: 1px #ff6700 solid;
line-height: 30px;
text-align: center;
margin: 5px 0;
}
.b1{
color: #ff6700;
font-size: 22px;
margin: 5px 0;
}
.b2{
color: #616161;
font-size: 12px;
}
.b3 p{
font-size: 12px;
color: #ff6700;
}
.b4{
font-size: 12px;
color: #424242;
}
.b4 .iconfont{
font-size: 20px;
color: #5f5d5d;
}
.b4 a:hover .iconfont{
color: #ff6700;
}
.botton-table .n{
float: left;
}
.bottonBox2{
width: 1226px;
height: 253px;
/* background-color:#cec6c6; */
}
.bottNav{
width: 1226px;
height: 22px;
padding: 14px 0;
}
.bottNav ul li{
float: left;
}
.bottNav ul li a{
color: #757575;
font-size: 14px;
}
.bottNav ul span{
margin: 0 7px;
}
.bottNav ul li a:hover{
color: #ff6700;
}
.dibu{
margin: 10px 0;
}
.dibu a{
font-size: 14px;
color: #757575;
}
.dibu a:hover{
color: #ff6700;
}
.dibu span{
font-size: 14px;
color: #333333;
}
.dibu-logo{
width: 1226px;
height:63px ;
}
新手練習，僅供參考。
相關文章
- 網頁佈局------小米商城官網網頁
- 商場佈局圖怎麼畫？什麼地圖可以商場導航定位？地圖
- flex佈局學習Flex
- 前端BFC佈局學習前端
- Android學習—— Android佈局Android
- CSS學習-Flex佈局複習CSSFlex
- css佈局-float佈局CSS
- CSS佈局 --- 居中佈局CSS
- 跨境 / 出海電商 App 榜單釋出，一窺中國電商的全球市場佈局APP
- 居中佈局、三欄佈局
- java：佈局方法（流佈局）Java
- qt 佈局---表單佈局QT
- Xamarin 學習筆記 - Layout（佈局）筆記
- Flutter學習之”相對佈局“Flutter
- kivy八種佈局方式學習
- CSS學習筆記：flex佈局CSS筆記Flex
- CSS佈局之三欄佈局CSS
- CSS佈局 --- 自適應佈局CSS
- CSS佈局 --- 等寬&等高佈局CSS
- CSS 佈局之水平居中佈局CSS
- 彈性佈局（伸縮佈局）
- 浮動佈局 和 flex佈局Flex
- Sigmaintell：三星/華為/小米等廠商加速佈局 2021年摺疊手機出貨量同增172%AIIntel
- CSS經典佈局——聖盃佈局與雙飛翼佈局CSS
- 實戰電商頁面1：靜態佈局
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- 網頁佈局------幾種佈局方式網頁
- dispaly的Grid佈局與Flex佈局Flex
- css佈局系列1——盒模型佈局CSS模型
- 快速學習掌握移動Web開釋出局總結（流式佈局+flex伸縮佈局+rem佈局+Boostrap框架 ）（更新中）WebFlexREM框架
- CSRF(Pikachu靶場練習)
- CSS 三欄佈局之聖盃佈局和雙飛翼佈局CSS
- 保安日記：前端學習第十三篇之移動端佈局rem佈局前端REM
- 聖盃佈局與雙飛翼佈局
- CSS 兩欄佈局和三欄佈局CSS
- 雙飛翼佈局和聖盃佈局
- flex彈性佈局 響應式佈局Flex
- 聖盃佈局和雙飛翼佈局