一、项目介绍
“小米旗舰商城”。二十一世纪是网络休闲生活的时代，在这互联网时代, 网络销售已经变成了现在较大的-一个营销模式。如今信息网络的发展可以说是一日千里，透过网络的运用，可以提供很丰富的商品资料给使用者参考,网络充裕的资讯方便了客户通过信息进行对商品的选择和购买、在销售自己品牌产品的同时，也是对自己产品的推销和品牌的提升。
二、代码
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="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="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="images/navgation/1.png" alt="">
<p>手机APP</p>
</div>
<div class="scan">
<img src="images/images/xiaomi-android.png" alt="">
<p>扫码领取新人百元礼包</p>
</div>
<div class="side-list">
<img src="images/navgation/2.png" alt="">
<p>个人中心</p>
</div>
<div class="side-list">
<img src="images/navgation/3.png" alt="">
<p>售后服务</p>
</div>
<div class="side-list">
<img src="images/navgation/4.png" alt="">
<p>人工客服</p>
</div>
<div class="side-list">
<img src="images/navgation/5.png" alt="">
<p>购物车</p>
</div>
<div class="side-list backtop">
<img src="images/navgation/6.png" alt="">
<p>回顶部</p>
</div>
</div>
<!-- 头部 -->
<div class="head w">
<!-- 头部导航 -->
<div class="head-nav">
<!-- logo -->
<div class="logo">
<img src="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="images/images/Mi_images/Mi10.webp" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Mi_images/Mi_10pro.jpg" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Mi_images/Mi_cc9e.png" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Mi_images/Mi_cc9定制.png" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Mi_images/Micc9.png" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
<li>
<img src="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="images/images/RedMi_红米/RedMi__8A.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi_红米/RedMi_K30.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi_红米/RedMi_Note8.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi_红米/RedMiK30.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi_红米/RedMiK30_5G.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi_红米/RedMiK30_Pro聚焦版.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米电视4A32英寸.png" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/images/computer/RedmiBook 13.webp" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/computer/RedmiBook 14.webp" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本 15.6.png" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本Air 12.5.png" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本Pro 15.png" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/computer/游戏本2019款.webp" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/img/paidul7.png" alt="">
<p>小米平板5 Pro 12.4</p>
<span>8999元起</span>
</li>
<li>
<img src="images/img/paidul7.png" alt="">
<p>小米平板5 Pro 12.4</p>
<span>8999元起</span>
</li>
<li>
<img src="images/img/paidul7.png" alt="">
<p>小米平板5 Pro 12.4</p>
<span>8999元起</span>
</li>
<li>
<img src="images/img/paidul7.png" alt="">
<p>小米平板5 Pro 12.4</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Router/小米AIoT路由器AX3600.webp" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Router/小米路由器 4C.jpg" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Router/小米路由器 Mesh.jpg" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
<li>
<img src="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="images/img/list/list1/ul1_1.png" alt="">
<p>Xiaomi MIX Fold 2</p>
</li>
<li><img src="images/img/list/list1/ul1_2.png" alt="">
<p>Redmi K50 至尊版</p>
</li>
<li><img src="images/img/list/list1/ul3_1.png" alt="">
<p>Xiaomi 12 S Ultra</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Xiaomi 12 S Pro</p>
</li>
<li><img src="images/img/list/list1/ul2_1.png" alt="">
<p>Xiaomi 12 S</p>
</li>
<li><img src="images/img/list/list1/ul2_2.png" alt="">
<p>Xiaomi 12 Pro 天玑版</p>
</li>
<li><img src="images/img/list/list1/ul2_3.png" alt="">
<p>Note 11 T Pro +</p>
</li>
<li><img src="images/img/list/list1/ul2_4.png" alt="">
<p>Note 11 T Pro</p>
</li>
<li><img src="images/img/list/list1/ul2_5.png" alt="">
<p>Note 11 SE</p>
</li>
<li><img src="images/img/list/list1/ul2_6.png" alt="">
<p>Xiaomi Civi 1 S</p>
</li>
<li><img src="images/img/list/list1/ul3_2.png" alt="">
<p>黑鲨5 Pro</p>
</li>
<li><img src="images/img/list/list1/ul3_3.png" alt="">
<p>黑鲨5</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Redmi 10 A</p>
</li>
<li><img src="images/img/list/list1/ul4_2.png" alt="">
<p>Redmi K50 Pro</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Redmi K50</p>
</li>
<li><img src="images/img/list/list1/ul4_3.png" alt="">
<p>Redmi K40S</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Redmi K50 电竞版</p>
</li>
<li><img src="images/img/list/list1/ul4_4.png" alt="">
<p>Xiaomi 12 Pro</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Xiaomi 12</p>
</li>
<li><img src="images/img/list/list1/ul4_5.png" alt="">
<p>Xiaomi 12 X</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Xiaomi 11 青春活力版</p>
</li>
<li><img src="images/img/list/list1/ul4_6.png" alt="">
<p>Note 11 Pro 系列</p>
</li>
<li><img src="images/img/list/list1/ul3_5.png" alt="">
<p>Note 11 4 G</p>
</li>
<li><img src="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="images/img/list/list2/ul1_1.png" alt="">
<p>小米拍拍4K高清投屏器</p>
</li>
<li><img src="images/img/list/list2/ul1_2.png" alt="">
<p>小米电视6 55” OLED</p>
</li>
<li><img src="images/img/list/list2/ul3_1.png" alt="">
<p>Redmi X55 2022款</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>小米电视6 65” OLED</p>
</li>
<li><img src="images/img/list/list2/ul2_1.png" alt="">
<p>小米电视 大师 77” OLED</p>
</li>
<li><img src="images/img/list/list2/ul2_2.png" alt="">
<p>小米电视6 至尊版 55英寸</p>
</li>
<li><img src="images/img/list/list2/ul2_3.png" alt="">
<p>小米电视6 至尊版 65英寸</p>
</li>
<li><img src="images/img/list/list2/ul2_4.png" alt="">
<p>小米电视6 至尊版 75英寸</p>
</li>
<li><img src="images/img/list/list2/ul2_5.png" alt="">
<p>小米电视 ES43 2022款</p>
</li>
<li><img src="images/img/list/list2/ul2_6.png" alt="">
<p>小米电视 ES55 2022款</p>
</li>
<li><img src="images/img/list/list2/ul3_2.png" alt="">
<p>小米电视 ES65 2022款</p>
</li>
<li><img src="images/img/list/list2/ul3_3.png" alt="">
<p>小米电视 ES75 2022款</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>金属全面屏电视</p>
</li>
<li><img src="images/img/list/list2/ul4_2.png" alt="">
<p>小米全面屏电视</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>米家激光投影仪</p>
</li>
<li><img src="images/img/list/list2/ul4_3.png" alt="">
<p>Redmi 智能电视 X55</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>激光投影电视</p>
</li>
<li><img src="images/img/list/list2/ul4_4.png" alt="">
<p>大师电视 65英寸 OLED</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>小米电视4A 60英寸</p>
</li>
<li><img src="images/img/list/list2/ul4_5.png" alt="">
<p>Redmi 智能电视 MAX 98"</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>Xiaomi 11 青春活力版</p>
</li>
<li><img src="images/img/list/list2/ul4_6.png" alt="">
<p>小米电视5 75英寸</p>
</li>
<li><img src="images/img/list/list2/ul3_5.png" alt="">
<p>小米电视4A 70英寸</p>
</li>
<li><img src="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="images/img/list/list3/ul1_1.png" alt="">
<p>小米平板5 Pro 12.4</p>
</li>
<li><img src="images/img/list/list3/ul1_2.png" alt="">
<p>Redmi G 游戏本 2022</p>
</li>
<li><img src="images/img/list/list3/ul3_1.png" alt="">
<p>RedmiBook Pro14 2022</p>
</li>
<li><img src="images/img/list/list3/ul4_1.png" alt="">
<p>RedmiBook Pro15 2022</p>
</li>
<li><img src="images/img/list/list3/ul2_1.png" alt="">
<p>RedmiBook Pro 14 增强版</p>
</li>
<li><img src="images/img/list/list3/ul2_2.png" alt="">
<p>小米笔记本 Pro 14 锐龙版</p>
</li>
<li><img src="images/img/list/list3/ul2_3.png" alt="">
<p>RedmiBook Pro 15 增强版</p>
</li>
<li><img src="images/img/list/list3/ul2_4.png" alt="">
<p>小米笔记本 Pro X 14</p>
</li>
<li><img src="images/img/list/list3/ul2_5.png" alt="">
<p>Redmi G 2021 Intel版</p>
</li>
<li><img src="images/img/list/list3/ul2_6.png" alt="">
<p>Redmi G 2021 AMD版</p>
</li>
<li><img src="images/img/list/list3/ul3_2.png" alt="">
<p>小米平板5</p>
</li>
<li><img src="images/img/list/list3/ul3_3.png" alt="">
<p>小米平板5 Pro</p>
</li>
<li><img src="images/img/list/list3/ul4_1.png" alt="">
<p>小米平板5 Pro 5G</p>
</li>
<li><img src="images/img/list/list3/ul2_2.png" alt="">
<p>小米笔记本 Pro 14 增强版</p>
</li>
<li><img src="images/img/list/list3/ul1_1.png" alt="">
<p>小米笔记本 Pro 15 增强版</p>
</li>
<li><img src="images/img/list/list3/ul1_3.png" alt="">
<p>小米笔记本 Pro X 15</p>
</li>
<li><img src="images/img/list/list3/ul3_1.png" alt="">
<p>RedmiBook Pro 14 锐龙版</p>
</li>
<li><img src="images/img/list/list3/ul2_4.png" alt="">
<p>RedmiBook Pro 15 锐龙版</p>
</li>
<li><img src="images/img/list/list3/ul3_1.png" alt="">
<p>小米笔记本 Pro</p>
</li>
<li><img src="images/img/list/list3/ul3_5.png" alt="">
<p>小米笔记本Pro 15</p>
</li>
<li><img src="images/img/list/list3/ul4_1.png" alt="">
<p>小米笔记本Pro 14</p>
</li>
<li><img src="images/img/list/list3/ul4_2.png" alt="">
<p>RedmiBook Air 13</p>
</li>
<li><img src="images/img/list/list3/ul4_3.png" alt="">
<p>键鼠套装</p>
</li>
<li><img src="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="images/img/list/list4/ul1_1.png" alt="">
<p>Xiaomi Watch S1 Pro</p>
</li>
<li><img src="images/img/list/list4/ul1_2.png" alt="">
<p>小米手环7 Pro</p>
</li>
<li><img src="images/img/list/list4/ul1_3.png" alt="">
<p>小米手环7 NFC版</p>
</li>
<li><img src="images/img/list/list4/ul1_4.png" alt="">
<p>小米手环7</p>
</li>
<li><img src="images/img/list/list4/ul1_5.png" alt="">
<p>Xiaomi Watch S1</p>
</li>
<li><img src="images/img/list/list4/ul1_6.png" alt="">
<p>Xiaomi Watch Color 2</p>
</li>
<li><img src="images/img/list/list4/ul2_1.png" alt="">
<p>Redmi 手表 2</p>
</li>
<li><img src="images/img/list/list4/ul2_2.png" alt="">
<p>小米手环6 NFC版</p>
</li>
<li><img src="images/img/list/list4/ul2_3.png" alt="">
<p>平衡车</p>
</li>
<li><img src="images/img/list/list4/ul2_4.png" alt="">
<p>自行车</p>
</li>
<li><img src="images/img/list/list4/ul2_5.png" alt="">
<p>滑板车</p>
</li>
<li><img src="images/img/list/list4/ul2_6.png" alt="">
<p>车载充电器</p>
</li>
<li><img src="images/img/list/list4/ul3_1.png" alt="">
<p>智能记录仪</p>
</li>
<li><img src="images/img/list/list4/ul3_2.png" alt="">
<p>充气宝</p>
</li>
<li><img src="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="images/img/list/list5/ul1_1.png" alt="">
<p>Xiaomi Buds 4 Pro</p>
</li>
<li><img src="images/img/list/list5/ul1_2.png" alt="">
<p>Redmi Buds 4 Pro</p>
</li>
<li><img src="images/img/list/list5/ul1_3.png" alt="">
<p>Redmi Buds 4</p>
</li>
<li><img src="images/img/list/list5/ul1_4.png" alt="">
<p>Xiaomi 真无线降噪耳机 3 Pro</p>
</li>
<li><img src="images/img/list/list5/ul1_5.png" alt="">
<p>Xiaomi 真无线降噪耳机 3</p>
</li>
<li><img src="images/img/list/list5/ul1_6.png" alt="">
<p>Redmi Buds 3</p>
</li>
<li><img src="images/img/list/list5/ul1_1.png" alt="">
<p>Air2 se</p>
</li>
<li><img src="images/img/list/list5/ul1_2.png" alt="">
<p>Redmi Buds 3 青春版</p>
</li>
<li><img src="images/img/list/list5/ul1_3.png" alt="">
<p>小米小爱音箱</p>
</li>
<li><img src="images/img/list/list5/ul1_4.png" alt="">
<p>小爱触屏音箱Pro 8</p>
</li>
<li><img src="images/img/list/list5/ul1_5.png" alt="">
<p>Xiaomi Sound</p>
</li>
<li><img src="images/img/list/list5/ul1_6.png" alt="">
<p>Redmi小爱触屏音箱 8</p>
</li>
<li><img src="images/img/list/list5/ul1_1.png" alt="">
<p>小爱音箱 Pro</p>
</li>
<li><img src="images/img/list/list5/ul1_2.png" alt="">
<p>小米小爱触屏音箱</p>
</li>
<li><img src="images/img/list/list5/ul1_3.png" alt="">
<p>Redmi音箱</p>
</li>
<li><img src="images/img/list/list5/ul1_4.png" alt="">
<p>小米小爱音箱 Play</p>
</li>
<li><img src="images/img/list/list5/ul1_5.png" alt="">
<p>线控耳机</p>
</li>
<li><img src="images/img/list/list5/ul2_4.png" alt="">
<p>蓝牙耳机</p>
</li>
<li><img src="images/img/list/list5/ul2_1.png" alt="">
<p>蓝牙音箱</p>
</li>
<li><img src="images/img/list/list5/ul2_2.png" alt="">
<p>小米AI音箱</p>
</li>
<li><img src="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="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p>壁挂空调</p>
</li>
<li><img src="images/images/home appliances/小米净水器.jpg" alt="">
<p>立式空调</p>
</li>
<li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p>冰箱</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<p>滚筒洗衣机</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p>波轮洗衣机</p>
</li>
<li><img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<p>净水器</p>
</li>
<li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p>微蒸烤</p>
</li>
<li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p>烟灶</p>
</li>
<li><img src="images/images/home appliances/小米净水器.jpg" alt="">
<p>洗碗机</p>
</li>
<li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p>扫地机器人</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<p>吸尘器</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p>空气净化器</p>
</li>
<li><img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<p>电饭煲</p>
</li>
<li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p>电磁炉</p>
</li>
<li><img src="images/images/home appliances/小米净水器.jpg" alt="">
<p>水壶</p>
</li>
<li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p>落地风扇</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<p>投影仪</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p>灯具</p>
</li>
<li><img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<p>插线板</p>
</li>
<li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p>新风机</p>
</li>
<li><img src="images/images/home appliances/小米净水器.jpg" alt="">
<p>电暖器</p>
</li>
<li><img src="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="images/images/Router/Redmi路由器AC2100.webp" alt="">
<p>CyberDog</p>
</li>
<li><img src="images/images/Router/小米AIoT路由器AX3600.webp" alt="">
<p>MIJIA K歌麦克风</p>
</li>
<li><img src="images/images/Router/小米路由器 4C.jpg" alt="">
<p>打印机</p>
</li>
<li><img src="images/images/Router/小米路由器 Mesh.jpg" alt="">
<p>喷墨打印机</p>
</li>
<li><img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
<p>喷墨打印机墨水</p>
</li>
<li><img src="images/images/Router/小米路由器AC2100.webp" alt="">
<p>小米路由器</p>
</li>
<li><img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
<p>智能家庭</p>
</li>
<li><img src="images/images/Router/小米路由器 Mesh.jpg" alt="">
<p>对讲机</p>
</li>
<li><img src="images/images/Router/小米路由器 4C.jpg" alt="">
<p>摄像机</p>
</li>
<li><img src="images/images/Router/小米AIoT路由器AX3600.webp" alt="">
<p>智能门锁</p>
</li>
<li><img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<p>视频门铃</p>
</li>
<li><img src="images/images/Router/小米路由器 4C.jpg" alt="">
<p>小爱老师</p>
</li>
<li><img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
<p>Redmi路由器</p>
</li>
<li><img src="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="images/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">
<p>移动电源</p>
</li>
<li><img src="images/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">
<p>数据线</p>
</li>
<li><img src="images/images/第六部分images/小米cc9定制钢化膜.webp" alt="">
<p>充电器</p>
</li>
<li><img src="images/images/第六部分images/小米USB充电器30W快充版.webp" alt="">
<p>电池</p>
</li>
<li><img src="images/images/第六部分images/小米USB充电器36W快充版(2...).jpg" alt="">
<p>自拍杆</p>
</li>
<li><img src="images/images/第六部分images/小米二合一数据线100cm.jpg" alt="">
<p>手机壳</p>
</li>
<li><img src="images/images/第六部分images/小米无线充电宝青春版.webp" alt="">
<p>手机贴膜</p>
</li>
<li><img src="images/images/第六部分images/小米车载充电器快充版(37W).webp" alt="">
<p>无线充电器</p>
</li>
<li><img src="images/images/第六部分images/米家LED随身灯.jpg" alt="">
<p>平板配件</p>
</li>
<li><img src="images/images/第六部分images/小米二合一数据线100cm.jpg" alt="">
<p>黑鲨配件</p>
</li>
<li><img src="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="images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt="">
<p>米家跑步机</p>
</li>
<li><img src="images/images/第八部分images/title.jpg" alt="">
<p>洗手机</p>
</li>
<li><img src="images/images/第八部分images/小米手表Color 充电座.jpg" alt="">
<p>剃须刀</p>
</li>
<li><img src="images/images/第八部分images/小米手表Color 雅典黑.jpg" alt="">
<p>修剪器</p>
</li>
<li><img src="images/images/第八部分images/小米手表标准版.jpg" alt="">
<p>牙刷</p>
</li>
<li><img src="images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt="">
<p>吹风机</p>
</li>
<li><img src="images/images/第八部分images/米家石英经典版 白色.jpg" alt="">
<p>体重秤</p>
</li>
<li><img src="images/images/第八部分images/米家石英经典版 黑色.jpg" alt="">
<p>体脂秤</p>
</li>
<li><img src="images/images/第八部分images/title.jpg" alt="">
<p>早教启智</p>
</li>
<li><img src="images/images/第八部分images/小米手表Color 雅典黑.jpg" alt="">
<p>益智积木</p>
</li>
<li><img src="images/images/第八部分images/小米手表Color 充电座.jpg" alt="">
<p>儿童手表</p>
</li>
<li><img src="images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt="">
<p>儿童滑板车</p>
</li>
<li><img src="images/images/第八部分images/小米手表标准版.jpg" alt="">
<p>婴儿推车</p>
</li>
<li><img src="images/images/第八部分images/小米手表Color 充电座.jpg" alt="">
<p>理发器</p>
</li>
<li><img src="images/images/第八部分images/小米手表标准版.jpg" alt="">
<p>走步机</p>
</li>
<li><img src="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="images/images/第七部分images/小米商务旅多功能双肩包.webp" alt="">
<p>小背包</p>
</li>
<li><img src="images/images/第七部分images/3卷装抽绳式垃圾袋.webp" alt="">
<p>双肩包</p>
</li>
<li><img src="images/images/第七部分images/自动折叠伞.jpg" alt="">
<p>胸包</p>
</li>
<li><img src="images/images/第七部分images/90分框体旅行箱.webp" alt="">
<p>旅行箱</p>
</li>
<li><img src="images/images/第七部分images/小米巨能写中性笔.webp" alt="">
<p>运动鞋</p>
</li>
<li><img src="images/images/第七部分images/最生活毛巾-青春系列.jpg" alt="">
<p>眼镜</p>
</li>
<li><img src="images/images/第七部分images/米家飞行眼镜.webp" alt="">
<p>床垫</p>
</li>
<li><img src="images/images/第七部分images/米家驱蚊器基础.版webp.webp" alt="">
<p>枕头</p>
</li>
<li><img src="images/images/第七部分images/自动折叠伞.jpg" alt="">
<p>螺丝刀</p>
</li>
<li><img src="images/images/第七部分images/小米商务旅多功能双肩包.webp" alt="">
<p>保温杯</p>
</li>
<li><img src="images/images/第七部分images/3卷装抽绳式垃圾袋.webp" alt="">
<p>伞</p>
</li>
<li><img src="images/images/第七部分images/最生活毛巾-青春系列.jpg" alt="">
<p>驱蚊器</p>
</li>
<li><img src="images/images/第七部分images/自动折叠伞.jpg" alt="">
<p>毛巾/浴巾</p>
</li>
<li><img src="images/images/第七部分images/米家保温杯hover附图.jpg" alt="">
<p>米兔</p>
</li>
<li><img src="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="images/小米red.webp" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="images/小米Reami.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="images/XaioMibackground.webp" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="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="images/images/twolevelimages/小米秒杀png.png" alt="">
<p>保障服务</p>
</td>
<td>
<img src="images/images/twolevelimages/企业团购.png" alt="">
<p>企业团购</p>
</td>
<td>
<img src="images/images/twolevelimages/F码通道.png" alt="">
<p>F码通道</p>
</td>
</tr>
<tr>
<td>
<img src="images/images/twolevelimages/米粉卡.png" alt="">
<p>米粉卡</p>
</td>
<td>
<img src="images/images/twolevelimages/以旧换新.png" alt="">
<p>以旧换新</p>
</td>
<td>
<img src="images/images/twolevelimages/话费充值.png" alt="">
<p>话费充值</p>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 右侧图片 -->
<div class="right-item">
<ul>
<li><img src="images/images/twolevelimages/RedK30(5G)Box.jpg" alt=""></li>
<li><img src="images/images/twolevelimages/RedNote8Box.jpg" alt=""></li>
<li><img src="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="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="images/images/小米Alpha/XiaoMIMIxAlpha.webp" alt=""></a>
</div>
<div class="img-r">
<ul>
<li>
<img src="images/images/小米Alpha/CC9定制.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/Mi10.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/Redmi8.webp" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米10Pro.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/小米9.JPG" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="images/images/小米Alpha/wear.webp" alt="">
</div>
<div class="img-r">
<ul class="block" id="ul1">
<li>
<img src="images/img/smartwearul1.png" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/img/smartwearul2.png" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/img/smartwearul3.png" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/img/smartwearul4.png" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/img/smartwearul5.png" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/img/smartwearul6.png" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="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="images/images/小米Alpha/computer.webp" alt="">
</div>
<div class="img-r">
<ul>
<li>
<img src="images/images/computer/RedmiBook 13.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/computer/RedmiBook 14.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本 15.6.png" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本 15.6.png" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本Air 12.5.png" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/computer/小米笔记本Pro 15.png" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="images/images/bodyhomeimages/jdtop1.webp" alt=""></li>
<li><img src="images/images/bodyhomeimages/jdtop2.webp" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block" id="ul2">
<li>
<img src="images/images/小米Alpha/CC9定制.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/Mi10.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/Redmi8.webp" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米10Pro.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="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="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="images/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/RedMi-tv/小米电视4A32英寸.png" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="images/images/bodyhomeimages/top1head.webp" alt=""></li>
<li><img src="images/images/bodyhomeimages/top2head.webp" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block" id="ul3">
<li>
<img src="images/images/bodyhomeimages/小米扫地机.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/智能拖地机.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/小米扫地机.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/智能拖地机.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="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="images/images/bodyhomeimages/Redmi全自动波轮洗衣机1A.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家空调.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家空调1.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="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="images/images/home appliances/小米净水器.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米10Pro.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="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="images/images/bodyhomeimages/小爱同学.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/Mi10.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/Redmi8.webp" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米10Pro.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="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="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="images/img/kc_big1.png" alt=""></li>
<li><img src="images/img/kc_big2.png" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block" id="ul">
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="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="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="images/images/bodyhomeimages/top1head.webp" alt=""></li>
<li><img src="images/images/bodyhomeimages/top2head.webp" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block" id="ul">
<li>
<img src="images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/Redmi小爱音箱 Play.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米小爱老师.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/intelligent hardware/小米小爱触屏音箱.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能摄像机云台版.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="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="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="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="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="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="images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/Redmi小爱音箱 Play.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米小爱老师.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/intelligent hardware/小米小爱触屏音箱.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能摄像机云台版.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="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="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="images/img/sp_big1.png" alt=""></li>
<li><img src="images/img/sp_big2.png" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block" id="ul">
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="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="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="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="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="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="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="images/img/du_big1.png" alt=""></li>
<li><img src="images/img/du_big2.png" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block" id="ul">
<li>
<img src="images/images/小米Alpha/CC9定制.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/Mi10.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/Redmi8.webp" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米10Pro.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="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="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="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="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="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="images/images/Top2Mp4/小米10_8k手机.mp4" controls="controls" muted></video>
<p>2021年春季新品发布会第一场</p>
</li>
<li>
<video src="images/images/Top2Mp4/小米10_8k手机.mp4" controls="controls" muted></video>
<p>2021年春季新品发布会第一场</p>
</li>
<li>
<video src="images/images/Top2Mp4/小米10_8k手机.mp4" controls="controls" muted></video>
<p>2021年春季新品发布会第一场</p>
</li>
<li>
<video src="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="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>© 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="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';
}
}
}
}
})
扫一扫
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
