项目一：《小米官网》

一、项目介绍

“小米旗舰商城”。二十一世纪是网络休闲生活的时代，在这互联网时代, 网络销售已经变成了现在较大的-一个营销模式。如今信息网络的发展可以说是一日千里，透过网络的运用，可以提供很丰富的商品资料给使用者参考,网络充裕的资讯方便了客户通过信息进行对商品的选择和购买、在销售自己品牌产品的同时，也是对自己产品的推销和品牌的提升。

二、代码

index.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米</title><!-- 引入 css 文件 --><link rel="stylesheet" href="css/index.css"><!-- 引入 js 文件 --><script type="text/javascript" src="js/animate.js"></script><script type="text/javascript" src="js/index.js"></script>
</head><body><div class="div"><!-- 上 --><div class="upper"><!-- 顶部导航栏 --><div class="top"><div class="w"><div class="top-left l"><ul><li><a href="javascript:;">小米官网</a><span>|</span></li><li><a href="javascript:;">小米商城</a><span>|</span></li><li><a href="javascript:;">MIUI</a><span>|</span></li><li><a href="javascript:;">IoT</a><span>|</span></li><li><a href="javascript:;">云服务</a><span>|</span></li><li><a href="javascript:;">天星数科</a><span>|</span></li><li><a href="javascript:;">有品</a><span>|</span></li><li><a href="javascript:;">小爱开放平台</a><span>|</span></li><li><a href="javascript:;">企业团购</a><span>|</span></li><li><a href="javascript:;">资质证照</a><span>|</span></li><li><a href="javascript:;">协议规则</a><span>|</span></li><li class="download"><a href="javascript:;">下载app</a><span>|</span><div class="triangle"></div><div class="xiaomi"><img src="data:images/images/xiaomi-android.png" alt=""><p>小米商城APP</p></div></li><li><a href="javascript:;">Select Location</a></li></ul></div><div class="top-right r"><ul><li><a href="login.html?denglu">登录</a><span>|</span></li><li><a href="login.html?zhuce">注册</a><span>|</span></li><li><a href="javascript:;">消息通知</a></li><!-- 购物车 --><li class="shopcar"><img src="data:images/navgation/5.png" alt=""><a>购物车（0）</a><div class="in-car"><p>购物车中还没有商品，赶紧选购吧！</p></div></li></ul></div></div></div><!-- 侧边栏 --><div class="sidebar"><div class="side-list"><img src="data:images/navgation/1.png" alt=""><p>手机APP</p></div><div class="scan"><img src="data:images/images/xiaomi-android.png" alt=""><p>扫码领取新人百元礼包</p></div><div class="side-list"><img src="data:images/navgation/2.png" alt=""><p>个人中心</p></div><div class="side-list"><img src="data:images/navgation/3.png" alt=""><p>售后服务</p></div><div class="side-list"><img src="data:images/navgation/4.png" alt=""><p>人工客服</p></div><div class="side-list"><img src="data:images/navgation/5.png" alt=""><p>购物车</p></div><div class="side-list backtop"><img src="data:images/navgation/6.png" alt=""><p>回顶部</p></div></div><!-- 头部 --><div class="head w"><!-- 头部导航 --><div class="head-nav"><!-- logo --><div class="logo"><img src="data:images/This_is_tow_Mi.png" alt=""></div><!-- 导航 --><div class="head-nav-nav"><ul class="ul-list"><li><a href="javascript:;">Xiaomi手机</a></li><li><a href="javascript:;">Redmi手机</a></li><li><a href="javascript:;">电视</a></li><li><a href="javascript:;">笔记本</a></li><li><a href="javascript:;">平板</a></li><li><a href="javascript:;">家电</a></li><li><a href="javascript:;">路由器</a></li><li><a href="javascript:;">服务中心</a></li><li><a href="javascript:;">社区</a></li></ul><div class="hn-cont hidden"><ul class="cont-items"><li><img src="data:images/images/Mi_images/Mi10.webp" alt=""><p>Xiaomi MIX Fold 2</p><span>8999元起</span></li><li><img src="data:images/images/Mi_images/Mi_10pro.jpg" alt=""><p>Xiaomi MIX Fold 2</p><span>8999元起</span></li><li><img src="data:images/images/Mi_images/Mi_cc9e.png" alt=""><p>Xiaomi MIX Fold 2</p><span>8999元起</span></li><li><img src="data:images/images/Mi_images/Mi_cc9定制.png" alt=""><p>Xiaomi MIX Fold 2</p><span>8999元起</span></li><li><img src="data:images/images/Mi_images/Micc9.png" alt=""><p>Xiaomi MIX Fold 2</p><span>8999元起</span></li><li><img src="data:images/images/Mi_images/Mix Aloha.webp" alt=""><p>Xiaomi MIX Fold 2</p><span>8999元起</span></li></ul><ul class="cont-items"><li><img src="data:images/images/RedMi_红米/RedMi__8A.webp" alt=""><p>Redmi K50 至尊版</p><span>8999元起</span></li><li><img src="data:images/images/RedMi_红米/RedMi_K30.webp" alt=""><p>Redmi K50 至尊版</p><span>8999元起</span></li><li><img src="data:images/images/RedMi_红米/RedMi_Note8.webp" alt=""><p>Redmi K50 至尊版</p><span>8999元起</span></li><li><img src="data:images/images/RedMi_红米/RedMiK30.webp" alt=""><p>Redmi K50 至尊版</p><span>8999元起</span></li><li><img src="data:images/images/RedMi_红米/RedMiK30_5G.webp" alt=""><p>Redmi K50 至尊版</p><span>8999元起</span></li><li><img src="data:images/images/RedMi_红米/RedMiK30_Pro聚焦版.webp" alt=""><p>Redmi K50 至尊版</p><span>8999元起</span></li></ul><ul class="cont-items"><li><img src="data:images/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt=""><p>Redmi智能电视X55 2022</p><span>8999元起</span></li><li><img src="data:images/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt=""><p>Redmi智能电视X55 2022</p><span>8999元起</span></li><li><img src="data:images/images/RedMi-tv/小米全面屏电视E55A.jpg" alt=""><p>Redmi智能电视X55 2022</p><span>8999元起</span></li><li><img src="data:images/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt=""><p>Redmi智能电视X55 2022</p><span>8999元起</span></li><li><img src="data:images/images/RedMi-tv/小米电视4A32英寸.png" alt=""><p>Redmi智能电视X55 2022</p><span>8999元起</span></li><li><img src="data:images/images/RedMi-tv/小米电视4A55英寸.jpg" alt=""><p>Redmi智能电视X55 2022</p><span>8999元起</span></li></ul><ul class="cont-items"><li><img src="data:images/images/computer/RedmiBook 13.webp" alt=""><p>Xiaomi Book Pro 14 锐龙版</p><span>8999元起</span></li><li><img src="data:images/images/computer/RedmiBook 14.webp" alt=""><p>Xiaomi Book Pro 14 锐龙版</p><span>8999元起</span></li><li><img src="data:images/images/computer/小米笔记本 15.6.png" alt=""><p>Xiaomi Book Pro 14 锐龙版</p><span>8999元起</span></li><li><img src="data:images/images/computer/小米笔记本Air 12.5.png" alt=""><p>Xiaomi Book Pro 14 锐龙版</p><span>8999元起</span></li><li><img src="data:images/images/computer/小米笔记本Pro 15.png" alt=""><p>Xiaomi Book Pro 14 锐龙版</p><span>8999元起</span></li><li><img src="data:images/images/computer/游戏本2019款.webp" alt=""><p>Xiaomi Book Pro 14 锐龙版</p><span>8999元起</span></li></ul><ul class="cont-items"><li><img src="data:images/img/paidul7.png" alt=""><p>小米平板5 Pro 12.4</p><span>8999元起</span></li><li><img src="data:images/img/paidul7.png" alt=""><p>小米平板5 Pro 12.4</p><span>8999元起</span></li><li><img src="data:images/img/paidul7.png" alt=""><p>小米平板5 Pro 12.4</p><span>8999元起</span></li><li><img src="data:images/img/paidul7.png" alt=""><p>小米平板5 Pro 12.4</p><span>8999元起</span></li></ul><ul class="cont-items"><li><img src="data:images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt=""><p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p><span>8999元起</span></li><li><img src="data:images/images/home appliances/米家互联网洗烘一体机10kg.png" alt=""><p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p><span>8999元起</span></li><li><img src="data:images/images/home appliances/米家扫地机器人.jpg" alt=""><p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p><span>8999元起</span></li></ul><ul class="cont-items"><li><img src="data:images/images/Router/Redmi路由器AC2100.webp" alt=""><p>Redmi 电竞路由器 AX5400</p><span>8999元起</span></li><li><img src="data:images/images/Router/小米AIoT路由器AX3600.webp" alt=""><p>Redmi 电竞路由器 AX5400</p><span>8999元起</span></li><li><img src="data:images/images/Router/小米路由器 4C.jpg" alt=""><p>Redmi 电竞路由器 AX5400</p><span>8999元起</span></li><li><img src="data:images/images/Router/小米路由器 Mesh.jpg" alt=""><p>Redmi 电竞路由器 AX5400</p><span>8999元起</span></li><li><img src="data:images/images/Router/小米路由器4A 千兆版.jpg" alt=""><p>Redmi 电竞路由器 AX5400</p><span>8999元起</span></li><li><img src="data:images/images/Router/小米路由器AC2100.webp" alt=""><p>Redmi 电竞路由器 AX5400</p><span>8999元起</span></li></ul></div></div><!-- 搜索框 --><div class="search"><input type="text" value="红米"><span></span></div></div><!-- 头部内容 --><div class="head-content"><!-- 左侧导航模块 --><div class="left-nav"><ul><li class="out"><a href="javascript:;">手机</a><span></span><div class="items"><ul><li><img src="data:images/img/list/list1/ul1_1.png" alt=""><p>Xiaomi MIX Fold 2</p></li><li><img src="data:images/img/list/list1/ul1_2.png" alt=""><p>Redmi K50 至尊版</p></li><li><img src="data:images/img/list/list1/ul3_1.png" alt=""><p>Xiaomi 12 S Ultra</p></li><li><img src="data:images/img/list/list1/ul4_1.png" alt=""><p>Xiaomi 12 S Pro</p></li><li><img src="data:images/img/list/list1/ul2_1.png" alt=""><p>Xiaomi 12 S</p></li><li><img src="data:images/img/list/list1/ul2_2.png" alt=""><p>Xiaomi 12 Pro 天玑版</p></li><li><img src="data:images/img/list/list1/ul2_3.png" alt=""><p>Note 11 T Pro +</p></li><li><img src="data:images/img/list/list1/ul2_4.png" alt=""><p>Note 11 T Pro</p></li><li><img src="data:images/img/list/list1/ul2_5.png" alt=""><p>Note 11 SE</p></li><li><img src="data:images/img/list/list1/ul2_6.png" alt=""><p>Xiaomi Civi 1 S</p></li><li><img src="data:images/img/list/list1/ul3_2.png" alt=""><p>黑鲨5 Pro</p></li><li><img src="data:images/img/list/list1/ul3_3.png" alt=""><p>黑鲨5</p></li><li><img src="data:images/img/list/list1/ul4_1.png" alt=""><p>Redmi 10 A</p></li><li><img src="data:images/img/list/list1/ul4_2.png" alt=""><p>Redmi K50 Pro</p></li><li><img src="data:images/img/list/list1/ul4_1.png" alt=""><p>Redmi K50</p></li><li><img src="data:images/img/list/list1/ul4_3.png" alt=""><p>Redmi K40S</p></li><li><img src="data:images/img/list/list1/ul4_1.png" alt=""><p>Redmi K50 电竞版</p></li><li><img src="data:images/img/list/list1/ul4_4.png" alt=""><p>Xiaomi 12 Pro</p></li><li><img src="data:images/img/list/list1/ul4_1.png" alt=""><p>Xiaomi 12</p></li><li><img src="data:images/img/list/list1/ul4_5.png" alt=""><p>Xiaomi 12 X</p></li><li><img src="data:images/img/list/list1/ul4_1.png" alt=""><p>Xiaomi 11 青春活力版</p></li><li><img src="data:images/img/list/list1/ul4_6.png" alt=""><p>Note 11 Pro 系列</p></li><li><img src="data:images/img/list/list1/ul3_5.png" alt=""><p>Note 11 4 G</p></li><li><img src="data:images/img/list/list1/ul3_6.png" alt=""><p>Note 11 5 G</p></li></ul></div></li><li class="out"><a href="javascript:;">电视</a><span></span><div class="items"><ul><li><img src="data:images/img/list/list2/ul1_1.png" alt=""><p>小米拍拍4K高清投屏器</p></li><li><img src="data:images/img/list/list2/ul1_2.png" alt=""><p>小米电视6 55” OLED</p></li><li><img src="data:images/img/list/list2/ul3_1.png" alt=""><p>Redmi X55 2022款</p></li><li><img src="data:images/img/list/list2/ul4_1.png" alt=""><p>小米电视6 65” OLED</p></li><li><img src="data:images/img/list/list2/ul2_1.png" alt=""><p>小米电视 大师 77” OLED</p></li><li><img src="data:images/img/list/list2/ul2_2.png" alt=""><p>小米电视6 至尊版 55英寸</p></li><li><img src="data:images/img/list/list2/ul2_3.png" alt=""><p>小米电视6 至尊版 65英寸</p></li><li><img src="data:images/img/list/list2/ul2_4.png" alt=""><p>小米电视6 至尊版 75英寸</p></li><li><img src="data:images/img/list/list2/ul2_5.png" alt=""><p>小米电视 ES43 2022款</p></li><li><img src="data:images/img/list/list2/ul2_6.png" alt=""><p>小米电视 ES55 2022款</p></li><li><img src="data:images/img/list/list2/ul3_2.png" alt=""><p>小米电视 ES65 2022款</p></li><li><img src="data:images/img/list/list2/ul3_3.png" alt=""><p>小米电视 ES75 2022款</p></li><li><img src="data:images/img/list/list2/ul4_1.png" alt=""><p>金属全面屏电视</p></li><li><img src="data:images/img/list/list2/ul4_2.png" alt=""><p>小米全面屏电视</p></li><li><img src="data:images/img/list/list2/ul4_1.png" alt=""><p>米家激光投影仪</p></li><li><img src="data:images/img/list/list2/ul4_3.png" alt=""><p>Redmi 智能电视 X55</p></li><li><img src="data:images/img/list/list2/ul4_1.png" alt=""><p>激光投影电视</p></li><li><img src="data:images/img/list/list2/ul4_4.png" alt=""><p>大师电视 65英寸 OLED</p></li><li><img src="data:images/img/list/list2/ul4_1.png" alt=""><p>小米电视4A 60英寸</p></li><li><img src="data:images/img/list/list2/ul4_5.png" alt=""><p>Redmi 智能电视 MAX 98"</p></li><li><img src="data:images/img/list/list2/ul4_1.png" alt=""><p>Xiaomi 11 青春活力版</p></li><li><img src="data:images/img/list/list2/ul4_6.png" alt=""><p>小米电视5 75英寸</p></li><li><img src="data:images/img/list/list2/ul3_5.png" alt=""><p>小米电视4A 70英寸</p></li><li><img src="data:images/img/list/list2/ul3_6.png" alt=""><p>小米电视4S 75 英寸</p></li></ul></div></li><li class="out"><a href="javascript:;">笔记本 平板</a><span></span><div class="items"><ul><li><img src="data:images/img/list/list3/ul1_1.png" alt=""><p>小米平板5 Pro 12.4</p></li><li><img src="data:images/img/list/list3/ul1_2.png" alt=""><p>Redmi G 游戏本 2022</p></li><li><img src="data:images/img/list/list3/ul3_1.png" alt=""><p>RedmiBook Pro14 2022</p></li><li><img src="data:images/img/list/list3/ul4_1.png" alt=""><p>RedmiBook Pro15 2022</p></li><li><img src="data:images/img/list/list3/ul2_1.png" alt=""><p>RedmiBook Pro 14 增强版</p></li><li><img src="data:images/img/list/list3/ul2_2.png" alt=""><p>小米笔记本 Pro 14 锐龙版</p></li><li><img src="data:images/img/list/list3/ul2_3.png" alt=""><p>RedmiBook Pro 15 增强版</p></li><li><img src="data:images/img/list/list3/ul2_4.png" alt=""><p>小米笔记本 Pro X 14</p></li><li><img src="data:images/img/list/list3/ul2_5.png" alt=""><p>Redmi G 2021 Intel版</p></li><li><img src="data:images/img/list/list3/ul2_6.png" alt=""><p>Redmi G 2021 AMD版</p></li><li><img src="data:images/img/list/list3/ul3_2.png" alt=""><p>小米平板5</p></li><li><img src="data:images/img/list/list3/ul3_3.png" alt=""><p>小米平板5 Pro</p></li><li><img src="data:images/img/list/list3/ul4_1.png" alt=""><p>小米平板5 Pro 5G</p></li><li><img src="data:images/img/list/list3/ul2_2.png" alt=""><p>小米笔记本 Pro 14 增强版</p></li><li><img src="data:images/img/list/list3/ul1_1.png" alt=""><p>小米笔记本 Pro 15 增强版</p></li><li><img src="data:images/img/list/list3/ul1_3.png" alt=""><p>小米笔记本 Pro X 15</p></li><li><img src="data:images/img/list/list3/ul3_1.png" alt=""><p>RedmiBook Pro 14 锐龙版</p></li><li><img src="data:images/img/list/list3/ul2_4.png" alt=""><p>RedmiBook Pro 15 锐龙版</p></li><li><img src="data:images/img/list/list3/ul3_1.png" alt=""><p>小米笔记本 Pro</p></li><li><img src="data:images/img/list/list3/ul3_5.png" alt=""><p>小米笔记本Pro 15</p></li><li><img src="data:images/img/list/list3/ul4_1.png" alt=""><p>小米笔记本Pro 14</p></li><li><img src="data:images/img/list/list3/ul4_2.png" alt=""><p>RedmiBook Air 13</p></li><li><img src="data:images/img/list/list3/ul4_3.png" alt=""><p>键鼠套装</p></li><li><img src="data:images/img/list/list3/ul4_4.png" alt=""><p>鼠标</p></li></ul></div></li><li class="out"><a href="javascript:;">出行 穿戴</a><span></span><div class="items"><ul><li><img src="data:images/img/list/list4/ul1_1.png" alt=""><p>Xiaomi Watch S1 Pro</p></li><li><img src="data:images/img/list/list4/ul1_2.png" alt=""><p>小米手环7 Pro</p></li><li><img src="data:images/img/list/list4/ul1_3.png" alt=""><p>小米手环7 NFC版</p></li><li><img src="data:images/img/list/list4/ul1_4.png" alt=""><p>小米手环7</p></li><li><img src="data:images/img/list/list4/ul1_5.png" alt=""><p>Xiaomi Watch S1</p></li><li><img src="data:images/img/list/list4/ul1_6.png" alt=""><p>Xiaomi Watch Color 2</p></li><li><img src="data:images/img/list/list4/ul2_1.png" alt=""><p>Redmi 手表 2</p></li><li><img src="data:images/img/list/list4/ul2_2.png" alt=""><p>小米手环6 NFC版</p></li><li><img src="data:images/img/list/list4/ul2_3.png" alt=""><p>平衡车</p></li><li><img src="data:images/img/list/list4/ul2_4.png" alt=""><p>自行车</p></li><li><img src="data:images/img/list/list4/ul2_5.png" alt=""><p>滑板车</p></li><li><img src="data:images/img/list/list4/ul2_6.png" alt=""><p>车载充电器</p></li><li><img src="data:images/img/list/list4/ul3_1.png" alt=""><p>智能记录仪</p></li><li><img src="data:images/img/list/list4/ul3_2.png" alt=""><p>充气宝</p></li><li><img src="data:images/img/list/list4/ul3_3.png" alt=""><p>石英表</p></li></ul></div></li><li class="out"><a href="javascript:;">耳机 音箱</a><span></span><div class="items"><ul><li><img src="data:images/img/list/list5/ul1_1.png" alt=""><p>Xiaomi Buds 4 Pro</p></li><li><img src="data:images/img/list/list5/ul1_2.png" alt=""><p>Redmi Buds 4 Pro</p></li><li><img src="data:images/img/list/list5/ul1_3.png" alt=""><p>Redmi Buds 4</p></li><li><img src="data:images/img/list/list5/ul1_4.png" alt=""><p>Xiaomi 真无线降噪耳机 3 Pro</p></li><li><img src="data:images/img/list/list5/ul1_5.png" alt=""><p>Xiaomi 真无线降噪耳机 3</p></li><li><img src="data:images/img/list/list5/ul1_6.png" alt=""><p>Redmi Buds 3</p></li><li><img src="data:images/img/list/list5/ul1_1.png" alt=""><p>Air2 se</p></li><li><img src="data:images/img/list/list5/ul1_2.png" alt=""><p>Redmi Buds 3 青春版</p></li><li><img src="data:images/img/list/list5/ul1_3.png" alt=""><p>小米小爱音箱</p></li><li><img src="data:images/img/list/list5/ul1_4.png" alt=""><p>小爱触屏音箱Pro 8</p></li><li><img src="data:images/img/list/list5/ul1_5.png" alt=""><p>Xiaomi Sound</p></li><li><img src="data:images/img/list/list5/ul1_6.png" alt=""><p>Redmi小爱触屏音箱 8</p></li><li><img src="data:images/img/list/list5/ul1_1.png" alt=""><p>小爱音箱 Pro</p></li><li><img src="data:images/img/list/list5/ul1_2.png" alt=""><p>小米小爱触屏音箱</p></li><li><img src="data:images/img/list/list5/ul1_3.png" alt=""><p>Redmi音箱</p></li><li><img src="data:images/img/list/list5/ul1_4.png" alt=""><p>小米小爱音箱 Play</p></li><li><img src="data:images/img/list/list5/ul1_5.png" alt=""><p>线控耳机</p></li><li><img src="data:images/img/list/list5/ul2_4.png" alt=""><p>蓝牙耳机</p></li><li><img src="data:images/img/list/list5/ul2_1.png" alt=""><p>蓝牙音箱</p></li><li><img src="data:images/img/list/list5/ul2_2.png" alt=""><p>小米AI音箱</p></li><li><img src="data:images/img/list/list5/ul2_3.png" alt=""><p>小米小爱音箱HD</p></li></ul></div></li><li class="out"><a href="javascript:;">家电</a><span></span><div class="items"><ul><li><img src="data:images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt=""><p>壁挂空调</p></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><p>立式空调</p></li><li><img src="data:images/images/home appliances/米家互联网洗烘一体机10kg.png" alt=""><p>冰箱</p></li><li><img src="data:images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt=""><p>滚筒洗衣机</p></li><li><img src="data:images/images/home appliances/米家互联网空调（一级能效）.png" alt=""><p>波轮洗衣机</p></li><li><img src="data:images/images/home appliances/米家扫地机器人.jpg" alt=""><p>净水器</p></li><li><img src="data:images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt=""><p>微蒸烤</p></li><li><img src="data:images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt=""><p>烟灶</p></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><p>洗碗机</p></li><li><img src="data:images/images/home appliances/米家互联网洗烘一体机10kg.png" alt=""><p>扫地机器人</p></li><li><img src="data:images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt=""><p>吸尘器</p></li><li><img src="data:images/images/home appliances/米家互联网空调（一级能效）.png" alt=""><p>空气净化器</p></li><li><img src="data:images/images/home appliances/米家扫地机器人.jpg" alt=""><p>电饭煲</p></li><li><img src="data:images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt=""><p>电磁炉</p></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><p>水壶</p></li><li><img src="data:images/images/home appliances/米家互联网洗烘一体机10kg.png" alt=""><p>落地风扇</p></li><li><img src="data:images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt=""><p>投影仪</p></li><li><img src="data:images/images/home appliances/米家互联网空调（一级能效）.png" alt=""><p>灯具</p></li><li><img src="data:images/images/home appliances/米家扫地机器人.jpg" alt=""><p>插线板</p></li><li><img src="data:images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt=""><p>新风机</p></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><p>电暖器</p></li><li><img src="data:images/images/home appliances/米家互联网洗烘一体机10kg.png" alt=""><p>料理机</p></li></ul></div></li><li class="out"><a href="javascript:;">智能 路由器</a><span></span><div class="items"><ul><li><img src="data:images/images/Router/Redmi路由器AC2100.webp" alt=""><p>CyberDog</p></li><li><img src="data:images/images/Router/小米AIoT路由器AX3600.webp" alt=""><p>MIJIA K歌麦克风</p></li><li><img src="data:images/images/Router/小米路由器 4C.jpg" alt=""><p>打印机</p></li><li><img src="data:images/images/Router/小米路由器 Mesh.jpg" alt=""><p>喷墨打印机</p></li><li><img src="data:images/images/Router/小米路由器4A 千兆版.jpg" alt=""><p>喷墨打印机墨水</p></li><li><img src="data:images/images/Router/小米路由器AC2100.webp" alt=""><p>小米路由器</p></li><li><img src="data:images/images/Router/小米路由器4A 千兆版.jpg" alt=""><p>智能家庭</p></li><li><img src="data:images/images/Router/小米路由器 Mesh.jpg" alt=""><p>对讲机</p></li><li><img src="data:images/images/Router/小米路由器 4C.jpg" alt=""><p>摄像机</p></li><li><img src="data:images/images/Router/小米AIoT路由器AX3600.webp" alt=""><p>智能门锁</p></li><li><img src="data:images/images/Router/Redmi路由器AC2100.webp" alt=""><p>视频门铃</p></li><li><img src="data:images/images/Router/小米路由器 4C.jpg" alt=""><p>小爱老师</p></li><li><img src="data:images/images/Router/小米路由器4A 千兆版.jpg" alt=""><p>Redmi路由器</p></li><li><img src="data:images/images/Router/小米路由器AC2100.webp" alt=""><p>小爱音箱</p></li></ul></div></li><li class="out"><a href="javascript:;">电源 配件</a><span></span><div class="items"><ul><li><img src="data:images/images/第六部分images/小米9ARE U OK保护壳.webp" alt=""><p>移动电源</p></li><li><img src="data:images/images/第六部分images/小米9ARE U OK保护壳.webp" alt=""><p>数据线</p></li><li><img src="data:images/images/第六部分images/小米cc9定制钢化膜.webp" alt=""><p>充电器</p></li><li><img src="data:images/images/第六部分images/小米USB充电器30W快充版.webp" alt=""><p>电池</p></li><li><img src="data:images/images/第六部分images/小米USB充电器36W快充版(2...).jpg" alt=""><p>自拍杆</p></li><li><img src="data:images/images/第六部分images/小米二合一数据线100cm.jpg" alt=""><p>手机壳</p></li><li><img src="data:images/images/第六部分images/小米无线充电宝青春版.webp" alt=""><p>手机贴膜</p></li><li><img src="data:images/images/第六部分images/小米车载充电器快充版(37W).webp" alt=""><p>无线充电器</p></li><li><img src="data:images/images/第六部分images/米家LED随身灯.jpg" alt=""><p>平板配件</p></li><li><img src="data:images/images/第六部分images/小米二合一数据线100cm.jpg" alt=""><p>黑鲨配件</p></li><li><img src="data:images/images/第六部分images/小米9ARE U OK保护壳.webp" alt=""><p>其他配件</p></li></ul></div></li><li class="out"><a href="javascript:;">健康 儿童</a><span></span><div class="items"><ul><li><img src="data:images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt=""><p>米家跑步机</p></li><li><img src="data:images/images/第八部分images/title.jpg" alt=""><p>洗手机</p></li><li><img src="data:images/images/第八部分images/小米手表Color 充电座.jpg" alt=""><p>剃须刀</p></li><li><img src="data:images/images/第八部分images/小米手表Color 雅典黑.jpg" alt=""><p>修剪器</p></li><li><img src="data:images/images/第八部分images/小米手表标准版.jpg" alt=""><p>牙刷</p></li><li><img src="data:images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt=""><p>吹风机</p></li><li><img src="data:images/images/第八部分images/米家石英经典版 白色.jpg" alt=""><p>体重秤</p></li><li><img src="data:images/images/第八部分images/米家石英经典版 黑色.jpg" alt=""><p>体脂秤</p></li><li><img src="data:images/images/第八部分images/title.jpg" alt=""><p>早教启智</p></li><li><img src="data:images/images/第八部分images/小米手表Color 雅典黑.jpg" alt=""><p>益智积木</p></li><li><img src="data:images/images/第八部分images/小米手表Color 充电座.jpg" alt=""><p>儿童手表</p></li><li><img src="data:images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt=""><p>儿童滑板车</p></li><li><img src="data:images/images/第八部分images/小米手表标准版.jpg" alt=""><p>婴儿推车</p></li><li><img src="data:images/images/第八部分images/小米手表Color 充电座.jpg" alt=""><p>理发器</p></li><li><img src="data:images/images/第八部分images/小米手表标准版.jpg" alt=""><p>走步机</p></li><li><img src="data:images/images/第八部分images/title.jpg" alt=""><p>智能遥控车</p></li></ul></div></li><li class="out"><a href="javascript:;">生活 箱包</a><span></span><div class="items"><ul><li><img src="data:images/images/第七部分images/小米商务旅多功能双肩包.webp" alt=""><p>小背包</p></li><li><img src="data:images/images/第七部分images/3卷装抽绳式垃圾袋.webp" alt=""><p>双肩包</p></li><li><img src="data:images/images/第七部分images/自动折叠伞.jpg" alt=""><p>胸包</p></li><li><img src="data:images/images/第七部分images/90分框体旅行箱.webp" alt=""><p>旅行箱</p></li><li><img src="data:images/images/第七部分images/小米巨能写中性笔.webp" alt=""><p>运动鞋</p></li><li><img src="data:images/images/第七部分images/最生活毛巾-青春系列.jpg" alt=""><p>眼镜</p></li><li><img src="data:images/images/第七部分images/米家飞行眼镜.webp" alt=""><p>床垫</p></li><li><img src="data:images/images/第七部分images/米家驱蚊器基础.版webp.webp" alt=""><p>枕头</p></li><li><img src="data:images/images/第七部分images/自动折叠伞.jpg" alt=""><p>螺丝刀</p></li><li><img src="data:images/images/第七部分images/小米商务旅多功能双肩包.webp" alt=""><p>保温杯</p></li><li><img src="data:images/images/第七部分images/3卷装抽绳式垃圾袋.webp" alt=""><p>伞</p></li><li><img src="data:images/images/第七部分images/最生活毛巾-青春系列.jpg" alt=""><p>驱蚊器</p></li><li><img src="data:images/images/第七部分images/自动折叠伞.jpg" alt=""><p>毛巾/浴巾</p></li><li><img src="data:images/images/第七部分images/米家保温杯hover附图.jpg" alt=""><p>米兔</p></li><li><img src="data:images/images/第七部分images/米家背包hover附图.jpg" alt=""><p>笔</p></li></ul></div></li></ul></div><!-- 右侧轮播图 --><div class="carousel"><a href="javascript:;" class="arrow-l"><span></span></a><a href="javascript:;" class="arrow-r"><span></span></a><ul><li><a href="javascript:;"><img src="data:images/小米red.webp" alt=""></a></li><li><a href="javascript:;"><img src="data:images/小米Reami.jpg" alt=""></a></li><li><a href="javascript:;"><img src="data:images/XaioMibackground.webp" alt=""></a></li><li><a href="javascript:;"><img src="data:images/XaioMi10background.jpg" alt=""></a></li></ul><ol class="circle"></ol></div></div><!-- 头部结束部分 --><div class="introduce"><!-- 左侧盒子 --><div class="left-item"><table><tbody><tr><td><img src="data:images/images/twolevelimages/小米秒杀png.png" alt=""><p>保障服务</p></td><td><img src="data:images/images/twolevelimages/企业团购.png" alt=""><p>企业团购</p></td><td><img src="data:images/images/twolevelimages/F码通道.png" alt=""><p>F码通道</p></td></tr><tr><td><img src="data:images/images/twolevelimages/米粉卡.png" alt=""><p>米粉卡</p></td><td><img src="data:images/images/twolevelimages/以旧换新.png" alt=""><p>以旧换新</p></td><td><img src="data:images/images/twolevelimages/话费充值.png" alt=""><p>话费充值</p></td></tr></tbody></table></div><!-- 右侧图片 --><div class="right-item"><ul><li><img src="data:images/images/twolevelimages/RedK30(5G)Box.jpg" alt=""></li><li><img src="data:images/images/twolevelimages/RedNote8Box.jpg" alt=""></li><li><img src="data:images/images/twolevelimages/小米手环4(Box).jpg" alt=""></li></ul></div></div></div></div><!-- 中 --><div class="in"><div class="w"><!-- 内容部分 --><div class="list"><!-- 头部图片 --><div class="top-box"><a href="javascript:;"><img src="data:images/images/Top1images/RedMiK30show.webp" alt=""></a></div><div class="list-items"><!-- text area--><div class="items-text"><div class="text-l"><h2>手机</h2></div><div class="text-r"><p>查看更多</p><span></span></div></div><!-- img area--><div class="items-img"><div class="img-l"><a href="javascript:;"><img src="data:images/images/小米Alpha/XiaoMIMIxAlpha.webp" alt=""></a></div><div class="img-r"><ul><li><img src="data:images/images/小米Alpha/CC9定制.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/Mi10.webp" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/Redmi8.webp" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/小米10Pro.webp" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/小米9.JPG" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/黑鲨Pro.png" alt=""><h5>黑鲨Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li></ul></div></div></div><div class="list-items"><!-- text area--><div class="items-text"><div class="text-l"><h2>智能穿戴</h2></div><div class="text-r"><ul><li class="now" id="li1"><a href="javascript:;">热门</a></li><li id="li1"><a href="javascript:;">穿戴</a></li></ul></div></div><!-- img area--><div class="items-img"><div class="img-l"><img src="data:images/images/小米Alpha/wear.webp" alt=""></div><div class="img-r"><ul class="block" id="ul1"><li><img src="data:images/img/smartwearul1.png" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/img/smartwearul2.png" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/img/smartwearul3.png" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/img/smartwearul4.png" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/img/smartwearul5.png" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/img/smartwearul6.png" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/img/smartwearul7.png" alt=""><h5>黑鲨Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>热门</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul1"><li><img src="data:images/img/smartwearul7.png" alt=""><h5>黑鲨Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>穿戴</p></div><div class="rt"><span></span></div></li></ul></div></div></div><div class="list-items"><!-- text area--><div class="items-text"><div class="text-l"><h2>笔记本 | 平板</h2></div><div class="text-r"><ul><li class="now"><a href="javascript:;">热门</a></li></ul></div></div><!-- img area--><div class="items-img"><div class="img-l"><img src="data:images/images/小米Alpha/computer.webp" alt=""></div><div class="img-r"><ul><li><img src="data:images/images/computer/RedmiBook 13.webp" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/computer/RedmiBook 14.webp" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/computer/小米笔记本 15.6.png" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/computer/小米笔记本 15.6.png" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/computer/小米笔记本Air 12.5.png" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/computer/小米笔记本Pro 15.png" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/computer/游戏本2019款.webp" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>热门</p></div><div class="rt"><span></span></div></li></ul></div></div></div><div class="list-items"><!-- text area--><div class="items-text"><div class="text-l"><h2>家电</h2></div><div class="text-r"><ul><li class="now" id="li2"><a href="javascript:;">热门</a></li><li id="li2"><a href="javascript:;">电视影音</a></li></ul></div></div><!-- img area--><div class="items-img"><div class="img-l"><ul><li><img src="data:images/images/bodyhomeimages/jdtop1.webp" alt=""></li><li><img src="data:images/images/bodyhomeimages/jdtop2.webp" alt=""></li></ul></div><div class="img-r"><ul class="block" id="ul2"><li><img src="data:images/images/小米Alpha/CC9定制.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/Mi10.webp" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/Redmi8.webp" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/小米10Pro.webp" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/小米9.JPG" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h4>米家全自动波轮洗衣机8kg</h4><i>399元</i></div><div class="rt"><img src="data:images/images/Top1images/蓝牙音箱.jpg" alt=""></div></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>热门</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul2"><li><img src="data:images/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/RedMi-tv/小米全面屏电视E55A.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/RedMi-tv/小米电视4A32英寸.png" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/RedMi-tv/小米电视4A55英寸.jpg" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>热门</p></div><div class="rt"><span></span></div></li></ul></div></div></div><div class="list-items"><!-- text area--><div class="items-text"><div class="text-l"><h2>生活电器</h2></div><div class="text-r"><ul><li class="now" id="li3"><a href="javascript:;">扫地机</a></li><li id="li3"><a href="javascript:;">空净</a></li><li id="li3"><a href="javascript:;">清洁</a></li><li id="li3"><a href="javascript:;">风扇</a></li></ul></div></div><!-- img area--><div class="items-img"><div class="img-l"><ul><li><img src="data:images/images/bodyhomeimages/top1head.webp" alt=""></li><li><img src="data:images/images/bodyhomeimages/top2head.webp" alt=""></li></ul></div><div class="img-r"><ul class="block" id="ul3"><li><img src="data:images/images/bodyhomeimages/小米扫地机.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/米家扫地机器人.jpg" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/bodyhomeimages/智能拖地机.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/bodyhomeimages/小米扫地机.jpg" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/bodyhomeimages/智能拖地机.jpg" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/米家扫地机器人.jpg" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/bodyhomeimages/小米扫地机.jpg" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h4>米家全自动波轮洗衣机8kg</h4><i>399元</i></div><div class="rt"><img src="data:images/images/Top1images/蓝牙音箱.jpg" alt=""></div></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>扫地机</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul3"><li><img src="data:images/images/bodyhomeimages/Redmi全自动波轮洗衣机1A.webp" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/bodyhomeimages/米家空调.jpg" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/bodyhomeimages/米家空调1.jpg" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/bodyhomeimages/米家互联网空调C1（一级能效）.webp" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h4>米家全自动波轮洗衣机8kg</h4><i>399元</i></div><div class="rt"><img src="data:images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt=""></div></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>空净</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul3"><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/小米10Pro.webp" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/小米9.JPG" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h4>米家全自动波轮洗衣机8kg</h4><i>399元</i></div><div class="rt"><img src="data:images/images/Top1images/蓝牙音箱.jpg" alt=""></div></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>清洁</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul3"><li><img src="data:images/images/bodyhomeimages/小爱同学.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/Mi10.webp" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/Redmi8.webp" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/小米10Pro.webp" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/小米9.JPG" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h4>米家全自动波轮洗衣机8kg</h4><i>399元</i></div><div class="rt"><img src="data:images/images/Top1images/蓝牙音箱.jpg" alt=""></div></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>风扇</p></div><div class="rt"><span></span></div></li></ul></div></div></div><div class="top-box"><a href="javascript:;"><img src="data:images/images/ate/titlebody.webp" alt=""></a></div><div class="list-items"><!-- text area--><div class="items-text"><div class="text-l"><h2>厨房电器</h2></div><div class="text-r"><ul><li class="now" id="li"><a href="javascript:;">净水器</a></li><li id="li"><a href="javascript:;">烟灶</a></li><li id="li"><a href="javascript:;">电饭煲</a></li><li id="li"><a href="javascript:;">微蒸烤</a></li></ul></div></div><!-- img area--><div class="items-img"><div class="img-l"><ul><li><img src="data:images/img/kc_big1.png" alt=""></li><li><img src="data:images/img/kc_big2.png" alt=""></li></ul></div><div class="img-r"><ul class="block" id="ul"><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>净水器</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>净水器</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>净水器</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/bodyhomeimages/米家净水器.jpg" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/home appliances/小米净水器.jpg" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>净水器</p></div><div class="rt"><span></span></div></li></ul></div></div></div><div class="list-items"><!-- text area--><div class="items-text"><div class="text-l"><h2>智能家居</h2></div><div class="text-r"><ul><li class="now" id="li"><a href="javascript:;">小爱音箱</a></li><li id="li"><a href="javascript:;">门锁</a></li><li id="li"><a href="javascript:;">路由器</a></li><li id="li"><a href="javascript:;">智能设备</a></li></ul></div></div><!-- img area--><div class="items-img"><div class="img-l"><ul><li><img src="data:images/images/bodyhomeimages/top1head.webp" alt=""></li><li><img src="data:images/images/bodyhomeimages/top2head.webp" alt=""></li></ul></div><div class="img-r"><ul class="block" id="ul"><li><img src="data:images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/Redmi小爱音箱 Play.webp" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/小米小爱老师.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/intelligent hardware/小米小爱触屏音箱.jpg" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/小米米家智能摄像机云台版.jpg" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/小米米家智能门锁.jpg" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li class="more"><div class="lt"><h4>米家全自动波轮洗衣机8kg</h4><i>399元</i></div><div class="rt"><img src="data:images/images/Top1images/蓝牙音箱.jpg" alt=""></div></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>小爱音箱</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/images/intelligent hardware/小米米家智能门锁.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/小米米家智能门锁.jpg" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/小米米家智能门锁.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/intelligent hardware/小米米家智能门锁.jpg" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/小米米家智能门锁.jpg" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/小米米家智能门锁.jpg" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>门锁</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/images/Router/Redmi路由器AC2100.webp" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/Router/Redmi路由器AC2100.webp" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/Router/Redmi路由器AC2100.webp" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/Router/Redmi路由器AC2100.webp" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/Router/Redmi路由器AC2100.webp" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/Router/Redmi路由器AC2100.webp" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/Router/Redmi路由器AC2100.webp" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li class="more"><div class="lt"><h4>米家全自动波轮洗衣机8kg</h4><i>399元</i></div><div class="rt"><img src="data:images/images/Top1images/蓝牙音箱.jpg" alt=""></div></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>路由器</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/Redmi小爱音箱 Play.webp" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/小米小爱老师.jpg" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/intelligent hardware/小米小爱触屏音箱.jpg" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/小米米家智能摄像机云台版.jpg" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/intelligent hardware/小米米家智能门锁.jpg" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li class="more"><div class="lt"><h4>米家全自动波轮洗衣机8kg</h4><i>399元</i></div><div class="rt"><img src="data:images/images/Top1images/蓝牙音箱.jpg" alt=""></div></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>小爱音箱</p></div><div class="rt"><span></span></div></li></ul></div></div></div><div class="list-items"><!-- text area--><div class="items-text"><div class="text-l"><h2>运动出行</h2></div><div class="text-r"><ul><li class="now" id="li"><a href="javascript:;">平衡车/滑板车</a></li><li id="li"><a href="javascript:;">运动健身</a></li><li id="li"><a href="javascript:;">箱包配饰</a></li><li id="li"><a href="javascript:;">出行工具</a></li></ul></div></div><!-- img area--><div class="items-img"><div class="img-l"><ul><li><img src="data:images/img/sp_big1.png" alt=""></li><li><img src="data:images/img/sp_big2.png" alt=""></li></ul></div><div class="img-r"><ul class="block" id="ul"><li><img src="data:images/images/bodyfour zhinneg/九号平衡车Plus.png" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/bodyfour zhinneg/九号平衡车Plus.png" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/bodyfour zhinneg/九号平衡车Plus.png" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/bodyfour zhinneg/九号平衡车Plus.png" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/bodyfour zhinneg/九号平衡车Plus.png" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/bodyfour zhinneg/九号平衡车Plus.png" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/bodyfour zhinneg/九号平衡车Plus.png" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h4>米家全自动波轮洗衣机8kg</h4><i>399元</i></div><div class="rt"><img src="data:images/images/Top1images/蓝牙音箱.jpg" alt=""></div></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>平衡车/滑板车</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/img/smartwearul7.png" alt=""><h5>黑鲨Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>运动健身</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/img/smartwearul7.png" alt=""><h5>黑鲨Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>箱包配饰</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/img/smartwearul7.png" alt=""><h5>黑鲨Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>出行工具</p></div><div class="rt"><span></span></div></li></ul></div></div></div><div class="top-box"><a href="javascript:;"><img src="data:images/images/第六部分images/titleimages.webp" alt=""></a></div><div class="list-items"><!-- text area--><div class="items-text"><div class="text-l"><h2>日用百货</h2></div><div class="text-r"><ul><li class="now" id="li"><a href="javascript:;">个护健康</a></li><li id="li"><a href="javascript:;">电源/线材</a></li><li id="li"><a href="javascript:;">儿童用品</a></li><li id="li"><a href="javascript:;">家居床品</a></li></ul></div></div><!-- img area--><div class="items-img"><div class="img-l"><ul><li><img src="data:images/img/du_big1.png" alt=""></li><li><img src="data:images/img/du_big2.png" alt=""></li></ul></div><div class="img-r"><ul class="block" id="ul"><li><img src="data:images/images/小米Alpha/CC9定制.jpg" alt=""><h5>CC9定制</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/Mi10.webp" alt=""><h5>Mi10</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/Redmi8.webp" alt=""><h5>Redmi8</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt=""><h5>RedMiK30_Pro聚焦版</h5><p>骁龙8+ 旗舰处理器 | 徕卡影像</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt=""><h5>RedmiK30Pro变焦版</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li><img src="data:images/images/小米Alpha/小米10Pro.webp" alt=""><h5>小米10Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li><img src="data:images/images/小米Alpha/小米9.JPG" alt=""><h5>小米9</h5><p>天玑8100｜真旗舰芯</p><span>2999元起</span></li><li class="more"><div class="lt"><h4>米家全自动波轮洗衣机8kg</h4><i>399元</i></div><div class="rt"><img src="data:images/images/Top1images/蓝牙音箱.jpg" alt=""></div></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>个护健康</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/img/smartwearul7.png" alt=""><h5>黑鲨Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>电源/线材</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/img/smartwearul7.png" alt=""><h5>黑鲨Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>儿童用品</p></div><div class="rt"><span></span></div></li></ul><ul class="none" id="ul"><li><img src="data:images/img/smartwearul7.png" alt=""><h5>黑鲨Pro</h5><p>天玑8100｜真旗舰芯</p><span>2999元起<i>3999元</i></span></li><li class="more"><div class="lt"><h3>浏览更多</h3><p>家居床品</p></div><div class="rt"><span></span></div></li></ul></div></div></div><div class="list-items"><!-- text area--><div class="items-text"><div class="text-l"><h2>视频</h2></div><div class="text-r"><p>查看全部</p><span></span></div></div><!-- vidio area--><div class="items-vidio"><ul><li><video src="data:images/images/Top2Mp4/小米10_8k手机.mp4" controls="controls" muted></video><p>2021年春季新品发布会第一场</p></li><li><video src="data:images/images/Top2Mp4/小米10_8k手机.mp4" controls="controls" muted></video><p>2021年春季新品发布会第一场</p></li><li><video src="data:images/images/Top2Mp4/小米10_8k手机.mp4" controls="controls" muted></video><p>2021年春季新品发布会第一场</p></li><li><video src="data:images/images/Top2Mp4/小米10_8k手机.mp4" controls="controls" muted></video><p>2021年春季新品发布会第一场</p></li></ul></div></div></div><!-- 底部模块 --></div></div><!-- 下 --><div class="lower"><!-- 服务模块 --><div class="server w"><div class="uhalf"><ul><li><span class="repair">预约维修服务</span></li><li><span class="return">7天无理由退货</span></li><li><span class="exchange">15天免费换货</span></li><li><span class="ship">满69元包邮</span></li><li><span class="sales">1100余家售后网点</span></li></ul></div><div class="lhalf"><div class="ltnav"><ul><li><h4>选购指南</h4></li><li><a href="javascript:;">手机</a></li><li><a href="javascript:;">电视</a></li><li><a href="javascript:;">笔记本</a></li><li><a href="javascript:;">平板</a></li><li><a href="javascript:;">穿戴</a></li><li><a href="javascript:;">耳机</a></li><li><a href="javascript:;">家电</a></li><li><a href="javascript:;">路由器</a></li><li><a href="javascript:;">音箱</a></li><li><a href="javascript:;">配件</a></li></ul><ul><li><h4>服务中心</h4></li><li><a href="javascript:;">申请售后</a></li><li><a href="javascript:;">售后政策</a></li><li><a href="javascript:;">维修服务价格</a></li><li><a href="javascript:;">订单查询</a></li><li><a href="javascript:;">以旧换新</a></li><li><a href="javascript:;">保障服务</a></li><li><a href="javascript:;">防伪查询</a></li><li><a href="javascript:;">F码通道</a></li></ul><ul><li><h4>线下门店</h4></li><li><a href="javascript:;">小米之家</a></li><li><a href="javascript:;">服务网点</a></li><li><a href="javascript:;">授权体验店/专区</a></li></ul><ul><li><h4>关于小米</h4></li><li><a href="javascript:;">了解小米</a></li><li><a href="javascript:;">加入小米</a></li><li><a href="javascript:;">投资者关系</a></li><li><a href="javascript:;">环境，社会及管治</a></li><li><a href="javascript:;">廉洁举报</a></li></ul><ul><li><h4>关注我们</h4></li><li><a href="javascript:;">新浪微博</a></li><li><a href="javascript:;">官方微信</a></li><li><a href="javascript:;">联系我们</a></li><li><a href="javascript:;">公益基金会</a></li></ul></div><div class="rtbut"><h3>400-100-5678</h3><p>8:00-18:00（仅收市话费）</p><button>人工客服</button></div></div></div><!-- footer模块 --><div class="footer"><div class="w"><!-- 左侧logo --><div class="footer-left l"><div class="logo"><img src="data:images/This_is_tow_Mi.png" alt=""></div></div><!-- 右侧内容 --><div class="footer-right l"><div class="footer-content"><ul><li><a href="javascript:;">小米商城</a><span>|</span></li><li><a href="javascript:;">MIUI</a><span>|</span></li><li><a href="javascript:;">米家</a><span>|</span></li><li><a href="javascript:;">米聊</a><span>|</span></li><li><a href="javascript:;">多看</a><span>|</span></li><li><a href="javascript:;">游戏</a><span>|</span></li><li><a href="javascript:;">政企服务</a><span>|</span></li><li><a href="javascript:;">小米天猫店</a><span>|</span></li><li><a href="javascript:;">小米集团隐私政策</a><span>|</span></li><li><a href="javascript:;">小米公司儿童信息保护规则</a><span>|</span></li><li><a href="javascript:;">小米商城隐私政策</a><span>|</span></li><li><a href="javascript:;">小米商城用户协议</a><span>|</span></li><li><a href="javascript:;">问题反馈</a><span>|</span></li><li><a href="javascript:;">Select Location</a></li></ul><ul><li><a href="javascript:;">北京互联网法院法律服务工作站</a><span>|</span></li><li><a href="javascript:;">中国消费者协会</a><span>|</span></li><li><a href="javascript:;">北京市消费者协会</a></li></ul><ul><li><span>&copy; mi.com</span></li><li><span>京ICP证110507号</span></li><li><span>京ICP备10046444号</span></li><li><span>京公网安备11010802020134号</span></li><li><span>京网文[2020]0276-042号</span></li></ul><ul><li><span>（京）网械平台备字（2018）第00005号</span></li><li><span>互联网药品信息服务资格证(京)-非经营性-2014-0090</span></li><li><span>营业执照</span></li><li><span>医疗器械质量公告</span></li></ul><ul><li><span>增值电信业务许可证</span></li><li><span>网络食品经营备案</span></li><li><span>京食药网食备202010048</span></li><li><span>食品经营许可证</span></li></ul><ul><li><span>违法和不良信息举报电话：171-5104-4404</span></li><li><span>知识产权侵权投诉</span></li><li><span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span></li></ul><ul><li><img src="data:images/foot.png" alt=""></li></ul><!-- 底部文字 --><div class="root"><p>让全球每个人都能享受科技带来的美好生活</p></div></div></div></div></div></div></div>
</body></html>

index.css:

@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?7kkyc2');src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7kkyc2') format('truetype'), url('../fonts/icomoon.woff?7kkyc2') format('woff'), url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;
}* {margin: 0;padding: 0;
}.div {width: 100%;height: 100%;/* background-color: #f5f5f5; */
}.w {width: 1226px;margin: 0 auto;/* overflow: hidden; */
}a {text-decoration: none;color: #333;
}ul li {list-style: none;float: left;cursor: pointer;
}.upper {width: 100%;height: 100%;background-color: #fff;
}.l {float: left;
}.r {float: right;
}i {font-style: normal;
}/* 顶部导航栏  */.top {position: relative;height: 40px;background: #333;
}.top ul li {height: 40px;line-height: 40px;
}.top ul li a {font-size: 12px;color: #b0b0b0;
}.top ul li:hover a {color: #fff;
}.top ul li span {color: #423c37;margin-right: 5px;
}.top .shopcar {display: flex;position: relative;background: #424242;margin: 0 0 0 25px;padding-right: 15px;align-items: center;
}.top .shopcar img {width: 20px;vertical-align: middle;margin: 0 5px 0 15px;
}.shopcar .in-car {position: absolute;top: 40px;right: 0;width: 316px;height: 0;background-color: #fff;text-align: center;line-height: 100px;font-size: 12px;color: #424242;box-shadow: 0px 10px 15px -5px #999;z-index: 1;transition: all .5s ease;overflow: hidden;
}.shopcar .incar-height {height: 100px;
}/* 二维码 */.top-left ul {position: relative;
}.top-left .xiaomi {position: absolute;top: 40px;left: -40px;width: 125px;height: 0;background-color: #fff;text-align: center;box-shadow: 0 5px 10px 0 #999;z-index: 1;transition: all .5s ease;overflow: hidden;
}.top-left .xm-height {height: 150px;
}.top-left .xiaomi img {width: 85px;height: 85px;margin: 20px 0 -10px;
}.top-left .xiaomi p {font-size: 13px;
}.download {position: relative;
}.top-left .download .triangle {display: none;position: absolute;bottom: -3px;left: 12px;width: 0;height: 0;border: 10px solid transparent;border-color: transparent transparent #fff transparent;
}/* 侧边栏  */.sidebar {position: fixed;bottom: 30px;right: 0;z-index: 99;
}.side-list {position: relative;display: flex;align-items: center;flex-direction: column;justify-content: space-evenly;width: 80px;height: 90px;border: 1px solid #f5f5f5;background-color: #fff;margin-bottom: -1px;
}.backtop {position: absolute;opacity: 0;margin-top: 15px;cursor: pointer;
}.side-list:hover p {transition: all .5s ease;
}.side-list:hover {transition: all .5s ease;
}.side-list img {width: 30px;
}.side-list p {color: #757575;font-size: 14px;
}.scan {display: none;position: absolute;top: 0;right: 95px;width: 130px;height: 192px;text-align: center;background-color: #fff;border: 1px solid #f5f5f5;transition: all .5s ease;z-index: 1;
}.scan:before {width: 0px;height: 0px;position: absolute;top: 45px;right: -16px;padding: 0;border: 8px solid transparent;border-color: transparent transparent transparent #fff;content: '';z-index: 2;
}.scan:after {width: 0px;height: 0px;position: absolute;top: 44px;right: -18px;padding: 0;border: 9px solid transparent;border-color: transparent transparent transparent #f5f5f5;content: '';z-index: 1;
}.scan img {width: 95px;margin-top: 20px;
}.scan p {width: 80px;margin: 15px auto;color: #757575;font-size: 14px;
}/* 头部 */.head {position: relative;
}.head-nav {display: flex;align-items: center;height: 100px;
}/* logo */.logo {display: flex;justify-content: space-around;align-items: center;width: 55px;height: 55px;background-color: #ff6a00;border-radius: 20px;
}/* 导航 */.head-nav-nav {display: flex;align-items: center;height: 100%;margin-left: 180px;
}.head-nav-nav .ul-list li {display: flex;align-items: center;height: 100px;
}.head-nav-nav .ul-list li a {padding: 0 10px;color: #333;
}.head-nav-nav .ul-list li:hover a {color: #ff6700;
}.head-nav-nav .hn-cont {position: absolute;top: 100px;left: -340px;width: 1901px;height: 0;background: #fff;border-top: 1px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;box-shadow: 0 5px 10px -5px #ddd;z-index: 5;overflow: hidden;transition: all .5s ease;
}.head-nav-nav .hidden {border: hidden;
}.head-nav-nav #shownow {display: block;
}.head-nav-nav #none {display: none;
}.hn-cont .cont-items {display: none;position: absolute;left: 340px;height: 230px;background: #fff;z-index: 5;transition: all .5s ease;
}.head-nav-nav .hnc-height {height: 230px;
}.hn-cont .cont-items li {display: block;float: left;width: 180px;margin: 0;padding: 35px 12px 0;text-align: center;font-size: 12px;line-height: 20px;
}.hn-cont .cont-items li:first-child::before {border: none;
}.hn-cont .cont-items li::before {content: '';position: absolute;top: 35px;height: 100px;margin-left: -38px;border-left: 1px solid #e0e0e0;
}.hn-cont .cont-items li img {width: 160px;height: 110px;margin-bottom: 10px;
}.hn-cont .cont-items li p {color: #333;
}.hn-cont .cont-items li span {color: #ff6700;
}/* 搜索框 */.search {display: flex;position: absolute;right: 0;
}.search input {width: 285px;height: 50px;outline: none;padding-left: 10px;color: #757575;border: 1px solid #e0e0e0;
}.search span {display: flex;justify-content: center;align-items: center;width: 50px;height: 50px;margin-left: -51px;border-left: 1px solid #e0e0e0;cursor: pointer;
}.search span::after {content: '\e920';font-family: 'icomoon';color: #616161;font-size: 18px;font-weight: 700;
}/* 左侧导航模块 */.left-nav {position: absolute;z-index: 2;
}.left-nav ul {width: 235px;background-color: rgba(0, 0, 0, .5);padding: 20px 0;
}.left-nav ul li {float: none;height: 42px;line-height: 42px;
}.bgc {background-color: #ff6700;
}.left-nav ul li a {font-size: 14px;padding-left: 30px;color: #fff;
}.left-nav ul li span::before {font-family: 'icomoon';content: '\e906';float: right;color: #fff;font-size: 20px;margin-right: 20px;
}.left-nav .items {display: none;position: absolute;top: 0;left: 235px;width: 990px;height: 458px;border: 1px solid #e0e0e0;
}.left-nav .items ul {display: flex;flex-wrap: wrap;flex-direction: column;width: 100%;height: 100%;padding: 0;position: absolute;top: 0;left: 0;background-color: #fff;box-shadow: 5px 5px 15px -5px #999;
}.left-nav .items ul li {display: flex;padding: 17px 20px;
}.left-nav .items ul li img {width: 40px;height: 40px;
}.left-nav .items ul li p {color: #333;font-size: 14px;padding-left: 10px;
}.left-nav .items ul li:hover p {color: #ff6700;
}.out:nth-child(4) .items,
.out:nth-child(7) .items,
.out:nth-child(9) .items,
.out:nth-child(10) .items {width: 742.5px;
}.out:nth-child(8) .items {width: 495px;
}/* 轮播图 */.carousel {position: relative;width: 100%;height: 460px;overflow: hidden;
}.carousel ul {/* 加定位才能使用动画函数 */position: absolute;top: 0;left: 0;width: 500%;
}.carousel ul li a img {width: 100%;height: 460px;
}.carousel ul li {position: absolute;top: 0;left: 0;opacity: 0;transition: all 1s ease;
}.carousel ul li:first-child {opacity: 1;
}.arrow-l,
.arrow-r {/* display: none; */position: absolute;top: 50%;width: 40px;height: 70px;line-height: 70px;text-align: center;font-size: 40px;color: #b6b6b6;z-index: 1;
}.arrow-l:hover,
.arrow-r:hover {background: rgba(0, 0, 0, .5);color: #fff;
}.arrow-r {border-bottom-left-radius: 2px;border-top-left-radius: 2px;right: 1px;
}.arrow-l {border-bottom-right-radius: 2px;border-top-right-radius: 2px;left: 235px;
}.arrow-l span::before {font-family: 'icomoon';content: '\e905';
}.arrow-r span::before {font-family: 'icomoon';content: '\e906';
}.circle {position: absolute;bottom: 30px;right: -65px;width: 180px;height: 15px;
}.circle li {width: 6px;height: 6px;background-color: rgba(0, 0, 0, .3);border: 2px solid #999;border-radius: 6px;display: inline-block;margin-left: 5px;cursor: pointer;
}.circle .selected,
.circle li:hover {background-color: #efefef;
}/* 头部结束部分 */.introduce {display: flex;margin: 15px 0 25px;
}.left-item {width: 235px;height: 170px;background-color: #5f5750;
}table {width: 100%;height: 100%;
}tbody {color: #ccc;text-align: center;font-size: 12px;
}tbody tr td img {width: 24px;height: 24px;
}tr>td {position: relative;
}td:before {content: "";position: absolute;top: 2px;left: 10px;width: 65px;height: 1px;background-color: #665e57;
}td:after {content: "";position: absolute;top: 10px;left: 3px;width: 1px;height: 70px;background-color: #665e57;
}td:hover {color: #fff;cursor: pointer;
}.right-item ul li img {width: 315px;height: 170px;
}.right-item ul li {margin-left: 15px;
}.right-item ul li img:hover {transition: all .4s ease;box-shadow: 0 5px 10px 5px #ddd;
}.items-img .img-r ul li:hover,
.items-img .img-l img:hover,
.items-vidio ul li:hover {position: relative;top: -1px;transition: all .4s ease;box-shadow: 0 5px 15px 5px #ddd;
}/* 中间部分 */.in {padding: 25px 0;background-color: #f5f5f5;
}.top-box a img {width: 100%;
}.list-items {margin: 20px 0;
}.list .list-items .items-text {display: flex;justify-content: space-between;align-items: center;
}.text-l h2 {color: #333;font-weight: 100;
}.text-r {display: flex;align-items: center;text-align: center;cursor: pointer;
}.text-r:hover p {color: #ff6700;transition: all .5s ease;
}.text-r:hover span {background-color: #ff6700;transition: all .5s ease;
}.text-r p {color: #424242;
}.text-r span::before {font-family: 'icomoon';content: '\e906';
}.text-r span {width: 20px;height: 20px;border-radius: 10px;margin-left: 10px;color: #fff;background-color: #b0b0b0;
}.text-r ul li {margin-left: 30px;padding: 4px 0;
}.now,
.hover {padding: 2px 0;border-bottom: 2px solid #ff6700;
}.now a,
.hover a {color: #ff6700;transition: all .5s ease;
}/* img area */.items-img,
.items-vidio {display: flex;margin: 20px 0;
}.img-l img {width: 234px;height: 614px;cursor: pointer;
}.img-l ul li img {width: 234px;height: 300px;margin-bottom: 10px;
}.img-r ul li {display: flex;width: 234px;height: 300px;margin-left: 14px;margin-bottom: 14px;font-size: 14px;text-align: center;background-color: #fff;align-items: center;justify-content: center;flex-direction: column;transition: all .3s linear;
}.img-r ul li img {width: 160px;height: 160px;
}.img-r ul li h5 {font-weight: normal;
}.img-r ul li p {font-size: 12px;margin: 15px;color: #b0b0b0;
}.more .lt i,
.img-r ul li span {color: #ff6700;
}.img-r ul li span i {text-decoration: line-through;margin-left: 10px;color: #b0b0b0;
}.img-r ul .more {display: flex;height: 143px;flex-direction: row;justify-content: space-around;
}.more .rt img {width: 80px;height: 80px;
}.more .lt {width: 85px;text-align: left;
}.more h3,
.more .lt h4 {font-weight: normal;margin-bottom: 5px;
}.img-r ul li.more p {margin: 0;
}.more h3 {font-size: 18px;
}.more span::after {content: '\e927';font-family: 'icomoon';font-size: 50px;
}.items-vidio ul li {width: 296px;height: 285px;margin-right: 14px;background-color: #fff;
}.items-vidio ul li:last-child {margin: 0;
}.items-vidio ul li video {width: 100%;height: 180px;
}.items-vidio ul li p {text-align: center;font-size: 14px;line-height: 70px;
}.img-r .block {display: block;width: 992px;
}.img-r .none {display: none;
}/* 底部模块 */.lower {background-color: #fff;
}.server {overflow: hidden;
}.uhalf {width: 100%;height: 25px;padding: 25px 0;margin-bottom: 30px;border-bottom: 1px solid #e0e0e0;
}.uhalf ul li {text-align: center;line-height: 25px;width: 19.8%;color: #616161;border-right: 1px solid #e0e0e0;
}.uhalf ul li:last-child {border: none;
}.uhalf ul li span::before {font-family: 'icomoon';margin-right: 5px;vertical-align: top;font-size: 24px;
}.uhalf .repair::before {content: '\e92e';
}.uhalf .return::before {content: '\e92d';
}.uhalf .exchange::before {content: '\e92a';
}.uhalf .ship::before {content: '\e912';
}.uhalf .sales::before {content: '\e914';
}.uhalf ul li span:hover {color: #ff6700;transition: all .5s ease;
}.lhalf .ltnav {float: left;width: 80%;
}.lhalf .rtbut {position: relative;float: right;width: 20%;text-align: center;
}.lhalf .ltnav ul {float: left;margin-bottom: 20px;
}.lhalf .ltnav ul li {float: none;margin: 0 0 10px 100px;
}.lhalf .ltnav ul li h4 {font-weight: normal;font-size: 14px;margin-bottom: 20px;color: #424242;
}.lhalf .ltnav ul li a {font-size: 12px;color: #757575;
}.lhalf .ltnav ul li a:hover {color: #ff6700;
}.rtbut h3 {font-weight: normal;color: #ff6700;font-size: 21px;
}.rtbut p {font-size: 12px;margin: 5px 0;color: #616161;
}.rtbut button {width: 120px;height: 30px;color: #ff6700;background-color: #fff;border: 1px solid #ff6700;
}.rtbut button::before {font-family: 'icomoon';content: '\e933';font-size: 15px;margin-right: 3px;
}.rtbut button:hover {color: #fff;background-color: #ff6700;transition: all .5s ease;
}.rtbut h3::before {content: '';position: absolute;left: -7px;display: inline-block;height: 85px;border-left: 1px solid #e0e0e0;
}/* footer模块 */.footer {background-color: #fafafa;margin: 15px 0 0;padding: 20px;overflow: hidden;
}.footer-left,
.footer-right {margin: 10px;
}.footer-content ul {overflow: hidden;margin-bottom: 5px;
}.footer-content ul li {font-size: 12px;
}.footer-content ul li a:hover,
.footer-content ul li span:hover {color: #ff6700;
}.footer-content ul li a {color: #757575;
}.footer-content ul li span {color: #b0b0b0;margin-right: 5px;
}.footer .root {text-align: center;font-size: 18px;color: #bfbfbf;margin-top: 40px;
}

index.js:

window.addEventListener('load', function() {// 轮播图var left = document.querySelector('.arrow-l');var right = document.querySelector('.arrow-r');var carousel = document.querySelector('.carousel');// hover时停止自动播放carousel.addEventListener('mouseenter', function() {// 清除定时器变量clearInterval(timer);timer = null;})carousel.addEventListener('mouseleave', function() {timer = setInterval(function() {// 手动调用点击事件right.click();}, 5000);})var num = 0;var cir = 0;// 动态生成小圆圈儿var ul = carousel.querySelector('ul');var lis = ul.querySelectorAll('li');var ol = carousel.querySelector('ol');for (var i = 0; i < lis.length; i++) {var li = document.createElement('li'); // 创建 li li.setAttribute('index', i); // 自定义索引号ol.appendChild(li); // 把 li 插入到 ol// 绑定点击事件li.addEventListener('click', function() {for (var i = 0; i < ol.children.length; i++) {lis[i].style.opacity = '0'; // 排他思想：全部图片设置为透明ol.children[i].className = '';}this.className = 'selected';// 点击小圆圈儿，图片渐变 var index = this.getAttribute('index'); // 获取索引号lis[index].style.opacity = '1'; // 留下需要显示的图片num = index;cir = index;})}ol.children[0].className = 'selected';// 克隆(复制内容且复制标签)第一张图片 li  放在 ul 的最后var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 按钮功能的实现// 节流阀 ???var flag = true;right.addEventListener('click', function() {if (flag) {flag = false;if (num == ul.children.length - 1) {num = 0;}num++;if (num == 4) {num = 0;}for (var i = 0; i < ol.children.length; i++) {lis[i].style.opacity = '0';}lis[num].style.opacity = '1';flag = true; // 打开节流阀// 小圆圈跟随图片变化cir++;if (cir == ol.children.length) {cir = 0;}// 调用函数cirChange();}});left.addEventListener('click', function() {if (flag) {flag = false;if (num == 0) {num = ul.children.length - 1;}num--;if (num == -1) {num = 4;}for (var i = 0; i < ol.children.length; i++) {lis[i].style.opacity = '0';}lis[num].style.opacity = '1';flag = true;cir--;cir = cir < 0 ? ol.children.length - 1 : cir;// 调用函数cirChange();}});// 封装函数 排他思想function cirChange() {// 先清除其余小圆圈的 selected 类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下当前的小圆圈的 selected 类名ol.children[cir].className = 'selected';}// 自动播放var timer = setInterval(function() {right.click();}, 5000);// 小米二维码var hv = document.querySelector('.download');var sj = document.querySelector('.triangle');var xm = document.querySelector('.xiaomi');hv.addEventListener('mouseenter', function() {sj.style.display = 'block';xm.classList.add('xm-height');});hv.addEventListener('mouseleave', function() {sj.style.display = 'none';xm.classList.remove('xm-height');})// 购物车var shopcar = document.querySelector('.shopcar');var incar = document.querySelector('.in-car');var carimg = shopcar.querySelector('img');var a = shopcar.querySelector('a');shopcar.addEventListener('mouseenter', function() {incar.classList.add('incar-height');carimg.src = 'images/navgation/55.png';a.style.color = '#ff6700';this.style.background = '#fff';});shopcar.addEventListener('mouseleave', function() {incar.classList.remove('incar-height');carimg.src = 'images/navgation/5.png';a.style.color = '#b0b0b0';this.style.background = '#424242';})// 头部导航var hnn = document.querySelector('.head-nav-nav');var hnn_lis = hnn.querySelector('.ul-list').querySelectorAll('li');var hnc = document.querySelector('.hn-cont');var contitems = hnc.querySelectorAll('.cont-items');for (var i = 0; i < hnn_lis.length - 2; i++) {hnn_lis[i].setAttribute('index', i);hnn_lis[i].addEventListener('mouseenter', function() {var index = this.getAttribute('index');for (var i = 0; i < contitems.length; i++) {contitems[i].id = 'none';hnc.classList.add('hidden');hnc.classList.remove('hnc-height');}contitems[index].id = 'shownow';hnc.classList.add('hnc-height');hnc.classList.remove('hidden');});hnn_lis[i].addEventListener('mouseleave', function() {hnc.classList.add('hidden');hnc.classList.remove('hnc-height');});hnc.addEventListener('mouseenter', function() {hnc.classList.add('hnc-height');hnc.classList.remove('hidden');});hnc.addEventListener('mouseleave', function() {hnc.classList.add('hidden');hnc.classList.remove('hnc-height');});}// 左侧导航var ln = document.querySelector('.left-nav');var outlis = ln.querySelectorAll('.out');var items = document.querySelectorAll('.items');for (var i = 0; i < outlis.length; i++) {outlis[i].setAttribute('num', i);outlis[i].addEventListener('mouseenter', function() {for (var i = 0; i < outlis.length; i++) {outlis[i].classList.remove('bgc');}this.classList.add('bgc');var num = this.getAttribute('num');for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}items[num].style.display = 'block';});outlis[i].addEventListener('mouseleave', function() {for (var i = 0; i < outlis.length; i++) {outlis[i].classList.remove('bgc');items[i].style.display = 'none';}});}// 侧边栏var sidebar = document.querySelector('.sidebar');var side = sidebar.querySelectorAll('.side-list');var scan = document.querySelector('.scan');var sideimg = sidebar.querySelectorAll('img');var sidep = sidebar.querySelectorAll('p');console.log(side);console.log(sidep);console.log(sideimg);side[0].addEventListener('mouseenter', function() {sideimg[0].src = 'images/navgation/h1.png';sidep[0].style.color = '#ff6700';scan.style.display = 'block';scan.addEventListener('mouseenter', function() {scan.style.display = 'block';});});side[0].addEventListener('mouseleave', function() {sideimg[0].src = 'images/navgation/1.png';sidep[0].style.color = '#757575';scan.style.display = 'none';scan.addEventListener('mouseleave', function() {scan.style.display = 'none';})});for (var j = 1; j < side.length; j++) {side[j].onmouseenter = function() {change(this);}side[j].onmouseleave = function() {changed(this);}function change(obj) {for (var i = 2; i < sidep.length; i++) {if (side[i - 1] == obj) {sideimg[i].src = 'images/navgation/h' + i + '.png';sidep[i].style.color = '#ff6700';} else {sideimg[i].src = 'images/navgation/' + i + '.png';sidep[i].style.color = '#757575';}}}function changed(obj) {for (var i = 2; i < sidep.length; i++) {if (side[i - 1] == obj) {sideimg[i].src = 'images/navgation/' + i + '.png';sidep[i].style.color = '#757575';}}}}// 返回顶部var roll = document.querySelector('.items-img');var backtop = document.querySelector('.backtop');var rollTop = roll.offsetTop;document.addEventListener('scroll', function() {if (window.pageYOffset >= rollTop) {backtop.style.opacity = 1;backtop.style.position = 'relative';} else {backtop.style.opacity = 0;backtop.style.position = 'absolute';}})// 返回顶部动画backtop.addEventListener('click', function() {// window.scroll(0, 0); // x,y 不需要写单位animate(window, 0);});// 动画函数function animate(obj, target, callback) {// 先清除之前的定时器，只保留当前的一个定时器clearInterval(obj.timer);obj.timer = setInterval(function() {var step = (target - window.pageYOffset) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset == target) {// 停止动画 即停止定时器clearInterval(obj.timer);// 回调函数callback && callback();}window.scroll(0, window.pageYOffset + step);}, 15);}// 内容部分的图片显隐var li1s = document.querySelectorAll('#li1');var ul1s = document.querySelectorAll('#ul1');var li2s = document.querySelectorAll('#li2');var ul2s = document.querySelectorAll('#ul2');var li3s = document.querySelectorAll('#li3');var ul3s = document.querySelectorAll('#ul3');for (var i = 0; i < li1s.length; i++) {li1s[i].onmouseover = function() {change(this);}function change(obj) {for (var i = 0; i < li1s.length; i++) {if (li1s[i] == obj) {li1s[i].classList.add('hover');ul1s[i].className = 'block';} else {li1s[i].className = ' ';ul1s[i].className = 'none';}}}}for (var i = 0; i < li2s.length; i++) {li2s[i].onmouseover = function() {change(this);}function change(obj) {for (var i = 0; i < li2s.length; i++) {if (li2s[i] == obj) {li2s[i].classList.add('hover');ul2s[i].className = 'block';} else {li2s[i].className = ' ';ul2s[i].className = 'none';}}}}for (var i = 0; i < li3s.length; i++) {li3s[i].onmouseover = function() {change(this);}function change(obj) {for (var i = 0; i < li3s.length; i++) {if (li3s[i] == obj) {li3s[i].classList.add('hover');ul3s[i].className = 'block';} else {li3s[i].className = ' ';ul3s[i].className = 'none';}}}}})

项目一：《小米官网》相关推荐

前端700行代码项目练习--小米官网（仅html、css实现）
目录一.效果展示二.准备工具 1.css重置样式 2.awesome图标字体 3.各图片 4.title网站图标三.代码一.效果展示二.准备工具 1.css重置样式请自行查找,CSDN上一 ...
仿照小米官网项目具体操作与细节
本项目已上传github 有需要的可以下载点这里前往下载小米官网项目具体操作 1.gulp的搭建一 , 打开node控制台命令行输入 cd 加文件夹路径进入当前文件夹命令行输入 cnpm ...
Web项目实战分享——小米官网
Web项目实战分享--小米官网大约每个学习过前端的学习者来说,都接触过web项目的实战,业内最真实的的,应该是自己独立编写一个网页项目,当然如果你是大佬的话,这只是小菜一碟,而如果你是小白或正在学习 ...
项目三《小米官网仿写》
文章目录前言一.下载APP 二.下拉菜单三. 小米侧边栏四.登录注册界面五.lation实现界面切换总结前言本次小米官网仿写复习了之前学到的知识点,运用HTML+CSS+JavaScr ...
小米官网项目制作——javascript知识分享上
目录前言一.整体架构二.弹出的盒子 1.定位盒子 2.弹出效果 3.其他细节三.下拉,展开的切换菜单 1.放置盒子 2.切换盒子 3.添加索引 4.侧边展开的盒子四.轮播图 1.本体的部件 ...
电商项目：仿小米官网纯HTML+css布局
前言时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
项目一：《小米官网》jQuery重构
小米官网项目的整体布局就不多说了,在项目一:<小米官网>中我就写过了,我就是直接复制粘贴的之前的 html 和 css,只是把JS部分用jQuery重新写了一遍,不想打字了,直接分享下我的 ...
CSS项目基础实战：实现小米官网+详细步骤分析+出错问题总结
1.有关项目的基本结构:|--html 文件与 CSS 文件单独设置分开.|--在html中引入:|--重置样式表|--网页基本样式表:所有网页所共有使用的部分:网页宽度.网页字体.颜色.设置最小宽度 ...
小米官网项目制作——javascript知识分享下
目录前言一.观察页面内容二.切换界面三.登录表单界面 1.选中的效果 2.错误提示 3.不选中的效果 4.密码框四.注册界面五.链接跳转总结前言之前我分享了关于小米官网主页的java ...

项目一：《小米官网》

一、项目介绍

二、代码

项目一：《小米官网》相关推荐

最新文章

热门文章