devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

项目一：《小米官网》jQuery重构_jquery小米商城

作者：笔触狂放9 | 2024-04-02 19:39:50

赞

踩

jquery小米商城

         小米官网项目的整体布局就不多说了，在项目一：《小米官网》中我就写过了，我就是直接复制粘贴的之前的 html 和 css，只是把JS部分用jQuery重新写了一遍，不想打字了，直接分享下我的jQuery部分的代码吧！

首页部分代码：

  1. // 小米二维码
  2.     // $('li.download').on("mouseenter mouseleave", (function() {
  3.     //     $(this).children().eq(2).stop().toggle();
  4.     //     $(this).children().eq(3).stop().toggleClass("xm-height");
  5.     // }));
  6.     $('li.download').hover(function() {
  7.         $(this).children().eq(2).stop().toggle();
  8.         $(this).children().eq(3).stop().toggleClass("xm-height");
  9.     });
  10.  
  11.     // 购物车
  12.     $("li.shopcar").mouseenter(function() {
  13.         $(this).css("backgroundColor", "#fff").children("img").prop("src", "images/navgation/h5.png");
  14.         $(this).children("a").css("color", "#ff6700");
  15.     }).mouseleave(function() {
  16.         $(this).css("backgroundColor", "#424242").children("img").prop("src", "images/navgation/5.png");
  17.         $(this).children("a").css("color", "#b0b0b0");
  18.     }).hover(function() {
  19.         $(this).children().eq(2).stop().toggleClass("incar-height");
  20.     });
  21.  
  22.     // 头部导航
  23.     $(".ul-list li").on("mouseenter", function() {
  24.         // 设置序列号
  25.         var index = $(this).index();
  26.         $(this).children().css("color", "#ff6700");
  27.         // 展开
  28.         $(this).parent().siblings().removeClass("hidden").addClass("hnc-height");
  29.         // 打开对应序列号的菜单，同时隐藏兄弟菜单 
  30.         $(this).parent().siblings().children().eq(index).show().siblings().hide();
  31.         if (index == 7 || index == 8) {
  32.             $(this).parent().siblings().addClass("hidden").removeClass("hnc-height");
  33.         }
  34.     }).mouseleave(function() {
  35.         $(this).children().css("color", "#333");
  36.         // 收起
  37.         $(this).parent().siblings().addClass("hidden").removeClass("hnc-height");
  38.     });
  39.     // 展开与收起
  40.     // $(".hn-cont").on("mouseenter mouseleave", (function() {
  41.     //     $(this).stop().toggleClass("hidden").stop().toggleClass("hnc-height");
  42.     // }));
  43.     $(".hn-cont").hover(function() {
  44.         $(this).stop().toggleClass("hidden").stop().toggleClass("hnc-height");
  45.     });
  46.  
  47.     // 左侧导航
  48.     $(".left-nav>ul>li").hover(function() {
  49.         // 获取索引号
  50.         var index = $(this).index();
  51.         $(this).addClass("bgc").parent().siblings("div.items").eq(index).show();
  52.     }, function() {
  53.         $(this).removeClass("bgc").parent().siblings("div.items").hide();
  54.     });
  55.     $(".items").hover(function() {
  56.         $(this).toggle();
  57.     });
  58.  
  59.     // 侧边栏
  60.     $(".side-list").hover(function() {
  61.         var index = $(this).index(); // 获取索引号
  62.         if (index == 1) $(this).siblings(".scan").toggle();
  63.         $(this).parent().children(".side-list").eq(index - 1).children("img").prop("src", 'images/navgation/h' + index + '.png').siblings("p").css("color", "#ff6700");
  64.     }, function() {
  65.         var index = $(this).index(); // 获取索引号
  66.         $(this).siblings(".scan").hide();
  67.         $(this).parent().children(".side-list").eq(index - 1).children("img").prop("src", 'images/navgation/' + index + '.png').siblings("p").css("color", "#757575");
  68.     });
  69.  
  70.     // 返回顶部
  71.     $(".backtop").hide();
  72.     var boxTop = $(".list").offset().top;
  73.     $(window).scroll(function() {
  74.         if ($(document).scrollTop() >= boxTop) {
  75.             $(".backtop").show();
  76.         } else {
  77.             $(".backtop").hide();
  78.         }
  79.     });
  80.     $(".backtop").click(function() {
  81.         $("body, html").stop().animate({
  82.             scrollTop: 0
  83.         });
  84.     })
  85.  
  86.     // 内容部分的图片显隐
  87.     $(".text-r>ul>li").hover(function() {
  88.         // 获取索引号
  89.         var index = $(this).index();
  90.         $(this).addClass("now").siblings().removeClass("now");
  91.         // console.log($(this).parent("ul").parent(".text-r").parent(".items-text").siblings(".items-img").children(".img-r").children("ul"));
  92.         $(this).parent("ul").parent(".text-r").parent(".items-text")
  93.             .siblings(".items-img").children(".img-r").children("ul")
  94.             .eq(index).addClass("block").removeClass("none")
  95.             .siblings().addClass("none").removeClass("block");
  96.     });

登录注册页面部分代码：

  1. $(function() {
  2.     // 右上角language
  3.     $(".language").hover(function() {
  4.         $(this).children("div").toggleClass("langh");
  5.     });
  6.     // $(".lang").on({
  7.     //     mouseenter: function() {
  8.     //         $(this).children("p").css("background", "#f5f5f5");
  9.     //     },
  10.     //     mouseleave: function() {
  11.     //         $(this).children("p").css("background", "#fff");
  12.     //     },
  13.     // });
  14.  
  15.     // 三角
  16.     $(".corner").on({
  17.         mouseenter: function() {
  18.             $(this).css("background-color", "#ff5c00").children(".alert").show();
  19.         },
  20.         mouseleave: function() {
  21.             $(this).css("background-color", "#ffbe99").children(".alert").hide();
  22.         },
  23.         click: function() {
  24.             if ($(this).position().left > 963) {
  25.                 $(this).children("img").prop("src", "images/img/loading/whitecodecomputer.png");
  26.             } else {
  27.                 $(this).children("img").prop("src", "images/img/loading/white_cod.png");
  28.             }
  29.             $(this).children().children("p").eq(0).toggle().eq(1).toggle();
  30.             $(this).toggleClass("position").siblings(".login_code").toggle().siblings(".login_form").toggle();
  31.         }
  32.     });
  33.  
  34.     // 移动切换
  35.     $(".login>a>h3").on("click", function() {
  36.         $(this).addClass("hcolor").parent("a").parent(".login").siblings(".register").children("a").children("h3").removeClass("hcolor");
  37.         $(this).siblings("span").css("left", "10px");
  38.         $(this).parent("a").parent(".login").parent(".title").siblings(".register_body").addClass("position_register").siblings(".login_body").removeClass("position_login");
  39.         $(this).parent("a").parent(".login").parent(".title").siblings(".register_body").css({ "opacity": "0", "transform": "translateX(450px)" })
  40.             .siblings(".login_body").css({ "opacity": "1", "transform": "translateX(0px)" });
  41.     });
  42.     $(".register>a>h3").on("click", function() {
  43.         $(this).addClass("hcolor").parent("a").parent(".register").siblings(".login").children("a").children("h3").removeClass("hcolor");
  44.         $(this).parent("a").parent(".register").siblings(".login").children("a").children("span").css("left", "68px");
  45.         $(this).parent("a").parent(".register").parent(".title").siblings(".register_body").removeClass("position_register").siblings(".login_body").addClass("position_login");
  46.         $(this).parent("a").parent(".register").parent(".title").siblings(".register_body").css({ "opacity": "1", "transform": "translateX(0px)" })
  47.             .siblings(".login_body").css({ "opacity": "0", "transform": "translateX(-450px)" });
  48.     });
  49.  
  50.     // 密码显隐
  51.     var flag = 0;
  52.     $("#eye").on("click", function() {
  53.         if (flag == 0) {
  54.             $(this).siblings("#pwd").prop("type", "text");
  55.             $(this).prop("src", "images/open.png");
  56.             flag = 1;
  57.         } else {
  58.             $(this).siblings("#pwd").prop("type", "password");
  59.             $(this).prop("src", "images/close.png");
  60.             flag = 0;
  61.         }
  62.     });
  63.  
  64.     // 文字缩小上移、背景、边框、按钮等的变化
  65.     $(".user,#pwd,.tel,.yzm").on({ // 账号、密码、手机号、验证码
  66.         focus: function() {
  67.             if ($(this).val() == "") {
  68.                 $(this).addClass("input_focus text_focus");
  69.             } else {
  70.                 $(this).addClass("input_focus");
  71.             }
  72.         },
  73.         blur: function() {
  74.             $(this).addClass("input_blur text_blur").removeClass("input_focus text_focus");
  75.             if ($(this).val() == "") { // tips
  76.                 $(this).siblings("p").show().css({ "float": "left", "margin-left": "20px" });
  77.             } else {
  78.                 $(this).removeClass("input_blur text_blur").siblings("p").hide();
  79.             }
  80.         }
  81.     });
  82.     // 国家/地区
  83.     $(".area").hover(function() {
  84.         $(this).siblings(".tips").toggle();
  85.     });
  86.     // placeholder 替换
  87.     setInterval(function() {
  88.         if ($(".user").val() == "") {
  89.             $(".user").siblings("i").hide();
  90.         } else {
  91.             $(".user").siblings("i").show();
  92.         }
  93.     }, 10);
  94.     setInterval(function() {
  95.         if ($("#pwd").val() == "") {
  96.             $("#pwd").siblings("i").hide();
  97.         } else {
  98.             $("#pwd").siblings("i").show();
  99.         }
  100.     }, 10);
  101.     setInterval(function() {
  102.         if ($(".tel").val() == "") {
  103.             $(".tel").siblings("i").hide();
  104.         } else {
  105.             $(".tel").siblings("i").show();
  106.         }
  107.     }, 10);
  108.     setInterval(function() {
  109.         if ($(".yzm").val() == "") {
  110.             $(".yzm").siblings("i").hide();
  111.         } else {
  112.             $(".yzm").siblings("i").show();
  113.         }
  114.     }, 10);
  115.  
  116.     // 登录按钮
  117.     setInterval(function() {
  118.         if ($(".user").val() !== "" && $("#pwd").val() !== "" && $("#dl").is(":checked")) {
  119.             $("button").eq(0).prop("disabled", false);
  120.         } else {
  121.             $("button").eq(0).prop("disabled", true);
  122.         }
  123.     }, 10);
  124.     // 注册按钮
  125.     setInterval(function() {
  126.         if ($(".tel").val() !== "" && $(".yzm").val() !== "" && $("#zc").is(":checked")) {
  127.             $("button").eq(1).prop("disabled", false);
  128.         } else {
  129.             $("button").eq(1).prop("disabled", true);
  130.         }
  131.     }, 10);
  132.  
  133.     // 链接跳转
  134.     var address = location.href; // 获取地址
  135.     var key = address.indexOf("?") + 1; // 获取?后一位字符的索引号
  136.     // 根据索引号获取字符并进行判断
  137.     if (address.charAt(key) == "d") {
  138.         $(".login>a>h3").click();
  139.     }
  140.     if (address.charAt(key) == "z") {
  141.         $(".register>a>h3").click();
  142.     }
  143.  
  144. })

结构和布局部分我做过一些小改动，还是放在下面吧！

index.hml：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>小米</title>
  9.     <!-- 引入 css 文件 -->
  10.     <link rel="stylesheet" href="css/index.css">
  11.     <!-- 引入 js 文件 -->
  12.     <script type="text/javascript" src="js/jQuery.min.js"></script>
  13.     <script type="text/javascript" src="js/animate.js"></script>
  14.     <script type="text/javascript" src="js/index.js"></script>
  15. </head>
  16.  
  17. <body>
  18.     <div class="div">
  19.         <!-- 上 -->
  20.         <div class="upper">
  21.             <!-- 顶部导航栏 -->
  22.             <div class="top">
  23.                 <div class="w">
  24.                     <div class="top-left l">
  25.                         <ul>
  26.                             <li><a href="javascript:;">小米官网</a>
  27.                                 <span>|</span></li>
  28.                             <li><a href="javascript:;">小米商城</a>
  29.                                 <span>|</span></li>
  30.                             <li><a href="javascript:;">MIUI</a>
  31.                                 <span>|</span></li>
  32.                             <li><a href="javascript:;">IoT</a>
  33.                                 <span>|</span></li>
  34.                             <li><a href="javascript:;">云服务</a>
  35.                                 <span>|</span></li>
  36.                             <li><a href="javascript:;">天星数科</a>
  37.                                 <span>|</span></li>
  38.                             <li><a href="javascript:;">有品</a>
  39.                                 <span>|</span></li>
  40.                             <li><a href="javascript:;">小爱开放平台</a>
  41.                                 <span>|</span></li>
  42.                             <li><a href="javascript:;">企业团购</a>
  43.                                 <span>|</span></li>
  44.                             <li><a href="javascript:;">资质证照</a>
  45.                                 <span>|</span></li>
  46.                             <li><a href="javascript:;">协议规则</a>
  47.                                 <span>|</span></li>
  48.                             <li class="download"><a href="javascript:;">下载app</a>
  49.                                 <span>|</span>
  50.                                 <div class="triangle"></div>
  51.                                 <div class="xiaomi">
  52.                                     <img src="images/images/xiaomi-android.png" alt="">
  53.                                     <p>小米商城APP</p>
  54.                                 </div>
  55.                             </li>
  56.                             <li><a href="javascript:;">Select Location</a>
  57.                             </li>
  58.                         </ul>
  59.                     </div>
  60.                     <div class="top-right r">
  61.                         <ul>
  62.                             <li><a href="login.html?denglu">登录</a>
  63.                                 <span>|</span></li>
  64.                             <li><a href="login.html?zhuce">注册</a>
  65.                                 <span>|</span></li>
  66.                             <li><a href="javascript:;">消息通知</a>
  67.                             </li>
  68.                             <!-- 购物车 -->
  69.                             <li class="shopcar">
  70.                                 <img src="images/navgation/5.png" alt="">
  71.                                 <a>购物车（0）</a>
  72.                                 <div class="in-car">
  73.                                     <p>购物车中还没有商品，赶紧选购吧！</p>
  74.                                 </div>
  75.                             </li>
  76.                         </ul>
  77.                     </div>
  78.                 </div>
  79.             </div>
  80.             <!-- 侧边栏 -->
  81.             <div class="sidebar">
  82.                 <div class="scan">
  83.                     <img src="images/images/xiaomi-android.png" alt="">
  84.                     <p>扫码领取新人百元礼包</p>
  85.                 </div>
  86.                 <div class="side-list">
  87.                     <img src="images/navgation/1.png" alt="">
  88.                     <p>手机APP</p>
  89.                 </div>
  90.                 <div class="side-list">
  91.                     <img src="images/navgation/2.png" alt="">
  92.                     <p>个人中心</p>
  93.                 </div>
  94.                 <div class="side-list">
  95.                     <img src="images/navgation/3.png" alt="">
  96.                     <p>售后服务</p>
  97.                 </div>
  98.                 <div class="side-list">
  99.                     <img src="images/navgation/4.png" alt="">
  100.                     <p>人工客服</p>
  101.                 </div>
  102.                 <div class="side-list">
  103.                     <img src="images/navgation/5.png" alt="">
  104.                     <p>购物车</p>
  105.                 </div>
  106.                 <div class="side-list backtop">
  107.                     <img src="images/navgation/6.png" alt="">
  108.                     <p>回顶部</p>
  109.                 </div>
  110.             </div>
  111.             <!-- 头部 -->
  112.             <div class="head w">
  113.                 <!-- 头部导航 -->
  114.                 <div class="head-nav">
  115.                     <!-- logo -->
  116.                     <div class="logo">
  117.                         <img src="images/This_is_tow_Mi.png" alt="">
  118.                     </div>
  119.                     <!-- 导航 -->
  120.                     <div class="head-nav-nav">
  121.                         <ul class="ul-list">
  122.                             <li><a href="javascript:;">Xiaomi手机</a></li>
  123.                             <li><a href="javascript:;">Redmi手机</a></li>
  124.                             <li><a href="javascript:;">电视</a></li>
  125.                             <li><a href="javascript:;">笔记本</a></li>
  126.                             <li><a href="javascript:;">平板</a></li>
  127.                             <li><a href="javascript:;">家电</a></li>
  128.                             <li><a href="javascript:;">路由器</a></li>
  129.                             <li><a href="javascript:;">服务中心</a></li>
  130.                             <li><a href="javascript:;">社区</a></li>
  131.                         </ul>
  132.                         <div class="hn-cont hidden">
  133.                             <ul class="cont-items">
  134.                                 <li>
  135.                                     <img src="images/images/Mi_images/Mi10.webp" alt="">
  136.                                     <p>Xiaomi MIX Fold 2</p>
  137.                                     <span>8999元起</span>
  138.                                 </li>
  139.                                 <li>
  140.                                     <img src="images/images/Mi_images/Mi_10pro.jpg" alt="">
  141.                                     <p>Xiaomi MIX Fold 2</p>
  142.                                     <span>8999元起</span>
  143.                                 </li>
  144.                                 <li>
  145.                                     <img src="images/images/Mi_images/Mi_cc9e.png" alt="">
  146.                                     <p>Xiaomi MIX Fold 2</p>
  147.                                     <span>8999元起</span>
  148.                                 </li>
  149.                                 <li>
  150.                                     <img src="images/images/Mi_images/Mi_cc9定制.png" alt="">
  151.                                     <p>Xiaomi MIX Fold 2</p>
  152.                                     <span>8999元起</span>
  153.                                 </li>
  154.                                 <li>
  155.                                     <img src="images/images/Mi_images/Micc9.png" alt="">
  156.                                     <p>Xiaomi MIX Fold 2</p>
  157.                                     <span>8999元起</span>
  158.                                 </li>
  159.                                 <li>
  160.                                     <img src="images/images/Mi_images/Mix Aloha.webp" alt="">
  161.                                     <p>Xiaomi MIX Fold 2</p>
  162.                                     <span>8999元起</span>
  163.                                 </li>
  164.                             </ul>
  165.                             <ul class="cont-items">
  166.                                 <li>
  167.                                     <img src="images/images/RedMi_红米/RedMi__8A.webp" alt="">
  168.                                     <p>Redmi K50 至尊版</p>
  169.                                     <span>8999元起</span>
  170.                                 </li>
  171.                                 <li>
  172.                                     <img src="images/images/RedMi_红米/RedMi_K30.webp" alt="">
  173.                                     <p>Redmi K50 至尊版</p>
  174.                                     <span>8999元起</span>
  175.                                 </li>
  176.                                 <li>
  177.                                     <img src="images/images/RedMi_红米/RedMi_Note8.webp" alt="">
  178.                                     <p>Redmi K50 至尊版</p>
  179.                                     <span>8999元起</span>
  180.                                 </li>
  181.                                 <li>
  182.                                     <img src="images/images/RedMi_红米/RedMiK30.webp" alt="">
  183.                                     <p>Redmi K50 至尊版</p>
  184.                                     <span>8999元起</span>
  185.                                 </li>
  186.                                 <li>
  187.                                     <img src="images/images/RedMi_红米/RedMiK30_5G.webp" alt="">
  188.                                     <p>Redmi K50 至尊版</p>
  189.                                     <span>8999元起</span>
  190.                                 </li>
  191.                                 <li>
  192.                                     <img src="images/images/RedMi_红米/RedMiK30_Pro聚焦版.webp" alt="">
  193.                                     <p>Redmi K50 至尊版</p>
  194.                                     <span>8999元起</span>
  195.                                 </li>
  196.                             </ul>
  197.                             <ul class="cont-items">
  198.                                 <li>
  199.                                     <img src="images/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
  200.                                     <p>Redmi智能电视X55 2022</p>
  201.                                     <span>8999元起</span>
  202.                                 </li>
  203.                                 <li>
  204.                                     <img src="images/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
  205.                                     <p>Redmi智能电视X55 2022</p>
  206.                                     <span>8999元起</span>
  207.                                 </li>
  208.                                 <li>
  209.                                     <img src="images/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
  210.                                     <p>Redmi智能电视X55 2022</p>
  211.                                     <span>8999元起</span>
  212.                                 </li>
  213.                                 <li>
  214.                                     <img src="images/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">
  215.                                     <p>Redmi智能电视X55 2022</p>
  216.                                     <span>8999元起</span>
  217.                                 </li>
  218.                                 <li>
  219.                                     <img src="images/images/RedMi-tv/小米电视4A32英寸.png" alt="">
  220.                                     <p>Redmi智能电视X55 2022</p>
  221.                                     <span>8999元起</span>
  222.                                 </li>
  223.                                 <li>
  224.                                     <img src="images/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">
  225.                                     <p>Redmi智能电视X55 2022</p>
  226.                                     <span>8999元起</span>
  227.                                 </li>
  228.                             </ul>
  229.                             <ul class="cont-items">
  230.                                 <li>
  231.                                     <img src="images/images/computer/RedmiBook 13.webp" alt="">
  232.                                     <p>Xiaomi Book Pro 14 锐龙版</p>
  233.                                     <span>8999元起</span>
  234.                                 </li>
  235.                                 <li>
  236.                                     <img src="images/images/computer/RedmiBook 14.webp" alt="">
  237.                                     <p>Xiaomi Book Pro 14 锐龙版</p>
  238.                                     <span>8999元起</span>
  239.                                 </li>
  240.                                 <li>
  241.                                     <img src="images/images/computer/小米笔记本 15.6.png" alt="">
  242.                                     <p>Xiaomi Book Pro 14 锐龙版</p>
  243.                                     <span>8999元起</span>
  244.                                 </li>
  245.                                 <li>
  246.                                     <img src="images/images/computer/小米笔记本Air 12.5.png" alt="">
  247.                                     <p>Xiaomi Book Pro 14 锐龙版</p>
  248.                                     <span>8999元起</span>
  249.                                 </li>
  250.                                 <li>
  251.                                     <img src="images/images/computer/小米笔记本Pro 15.png" alt="">
  252.                                     <p>Xiaomi Book Pro 14 锐龙版</p>
  253.                                     <span>8999元起</span>
  254.                                 </li>
  255.                                 <li>
  256.                                     <img src="images/images/computer/游戏本2019款.webp" alt="">
  257.                                     <p>Xiaomi Book Pro 14 锐龙版</p>
  258.                                     <span>8999元起</span>
  259.                                 </li>
  260.                             </ul>
  261.                             <ul class="cont-items">
  262.                                 <li>
  263.                                     <img src="images/img/paidul7.png" alt="">
  264.                                     <p>小米平板5 Pro 12.4</p>
  265.                                     <span>8999元起</span>
  266.                                 </li>
  267.                                 <li>
  268.                                     <img src="images/img/paidul7.png" alt="">
  269.                                     <p>小米平板5 Pro 12.4</p>
  270.                                     <span>8999元起</span>
  271.                                 </li>
  272.                                 <li>
  273.                                     <img src="images/img/paidul7.png" alt="">
  274.                                     <p>小米平板5 Pro 12.4</p>
  275.                                     <span>8999元起</span>
  276.                                 </li>
  277.                                 <li>
  278.                                     <img src="images/img/paidul7.png" alt="">
  279.                                     <p>小米平板5 Pro 12.4</p>
  280.                                     <span>8999元起</span>
  281.                                 </li>
  282.                             </ul>
  283.                             <ul class="cont-items">
  284.                                 <li>
  285.                                     <img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
  286.                                     <p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p>
  287.                                     <span>8999元起</span>
  288.                                 </li>
  289.                                 <li>
  290.                                     <img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
  291.                                     <p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p>
  292.                                     <span>8999元起</span>
  293.                                 </li>
  294.                                 <li>
  295.                                     <img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
  296.                                     <p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p>
  297.                                     <span>8999元起</span>
  298.                                 </li>
  299.                             </ul>
  300.                             <ul class="cont-items">
  301.                                 <li>
  302.                                     <img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
  303.                                     <p>Redmi 电竞路由器 AX5400</p>
  304.                                     <span>8999元起</span>
  305.                                 </li>
  306.                                 <li>
  307.                                     <img src="images/images/Router/小米AIoT路由器AX3600.webp" alt="">
  308.                                     <p>Redmi 电竞路由器 AX5400</p>
  309.                                     <span>8999元起</span>
  310.                                 </li>
  311.                                 <li>
  312.                                     <img src="images/images/Router/小米路由器 4C.jpg" alt="">
  313.                                     <p>Redmi 电竞路由器 AX5400</p>
  314.                                     <span>8999元起</span>
  315.                                 </li>
  316.                                 <li>
  317.                                     <img src="images/images/Router/小米路由器 Mesh.jpg" alt="">
  318.                                     <p>Redmi 电竞路由器 AX5400</p>
  319.                                     <span>8999元起</span>
  320.                                 </li>
  321.                                 <li>
  322.                                     <img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
  323.                                     <p>Redmi 电竞路由器 AX5400</p>
  324.                                     <span>8999元起</span>
  325.                                 </li>
  326.                                 <li>
  327.                                     <img src="images/images/Router/小米路由器AC2100.webp" alt="">
  328.                                     <p>Redmi 电竞路由器 AX5400</p>
  329.                                     <span>8999元起</span>
  330.                                 </li>
  331.                             </ul>
  332.                         </div>
  333.                     </div>
  334.                     <!-- 搜索框 -->
  335.                     <div class="search">
  336.                         <input type="text" value="红米">
  337.                         <span></span>
  338.                     </div>
  339.                 </div>
  340.                 <!-- 头部内容 -->
  341.                 <div class="head-content">
  342.                     <!-- 左侧导航模块 -->
  343.                     <div class="left-nav">
  344.                         <ul>
  345.                             <li class="out"><a href="javascript:;">手机</a>
  346.                                 <span></span>
  347.                             </li>
  348.                             <li class="out"><a href="javascript:;">电视</a>
  349.                                 <span></span>
  350.                             </li>
  351.                             <li class="out"><a href="javascript:;">笔记本 平板</a>
  352.                                 <span></span>
  353.                             </li>
  354.                             <li class="out"><a href="javascript:;">出行 穿戴</a>
  355.                                 <span></span>
  356.                             </li>
  357.                             <li class="out"><a href="javascript:;">耳机 音箱</a>
  358.                                 <span></span>
  359.                             </li>
  360.                             <li class="out"><a href="javascript:;">家电</a>
  361.                                 <span></span>
  362.                             </li>
  363.                             <li class="out"><a href="javascript:;">智能 路由器</a>
  364.                                 <span></span>
  365.                             </li>
  366.                             <li class="out"><a href="javascript:;">电源 配件</a>
  367.                                 <span></span>
  368.                             </li>
  369.                             <li class="out"><a href="javascript:;">健康 儿童</a>
  370.                                 <span></span>
  371.                             </li>
  372.                             <li class="out"><a href="javascript:;">生活 箱包</a>
  373.                                 <span></span>
  374.                             </li>
  375.                         </ul>
  376.                         <div class="items">
  377.                             <ul>
  378.                                 <li><img src="images/img/list/list1/ul1_1.png" alt="">
  379.                                     <p>Xiaomi MIX Fold 2</p>
  380.                                 </li>
  381.                                 <li><img src="images/img/list/list1/ul1_2.png" alt="">
  382.                                     <p>Redmi K50 至尊版</p>
  383.                                 </li>
  384.                                 <li><img src="images/img/list/list1/ul3_1.png" alt="">
  385.                                     <p>Xiaomi 12 S Ultra</p>
  386.                                 </li>
  387.                                 <li><img src="images/img/list/list1/ul4_1.png" alt="">
  388.                                     <p>Xiaomi 12 S Pro</p>
  389.                                 </li>
  390.                                 <li><img src="images/img/list/list1/ul2_1.png" alt="">
  391.                                     <p>Xiaomi 12 S</p>
  392.                                 </li>
  393.                                 <li><img src="images/img/list/list1/ul2_2.png" alt="">
  394.                                     <p>Xiaomi 12 Pro 天玑版</p>
  395.                                 </li>
  396.                                 <li><img src="images/img/list/list1/ul2_3.png" alt="">
  397.                                     <p>Note 11 T Pro +</p>
  398.                                 </li>
  399.                                 <li><img src="images/img/list/list1/ul2_4.png" alt="">
  400.                                     <p>Note 11 T Pro</p>
  401.                                 </li>
  402.                                 <li><img src="images/img/list/list1/ul2_5.png" alt="">
  403.                                     <p>Note 11 SE</p>
  404.                                 </li>
  405.                                 <li><img src="images/img/list/list1/ul2_6.png" alt="">
  406.                                     <p>Xiaomi Civi 1 S</p>
  407.                                 </li>
  408.                                 <li><img src="images/img/list/list1/ul3_2.png" alt="">
  409.                                     <p>黑鲨5 Pro</p>
  410.                                 </li>
  411.                                 <li><img src="images/img/list/list1/ul3_3.png" alt="">
  412.                                     <p>黑鲨5</p>
  413.                                 </li>
  414.                                 <li><img src="images/img/list/list1/ul4_1.png" alt="">
  415.                                     <p>Redmi 10 A</p>
  416.                                 </li>
  417.                                 <li><img src="images/img/list/list1/ul4_2.png" alt="">
  418.                                     <p>Redmi K50 Pro</p>
  419.                                 </li>
  420.                                 <li><img src="images/img/list/list1/ul4_1.png" alt="">
  421.                                     <p>Redmi K50</p>
  422.                                 </li>
  423.                                 <li><img src="images/img/list/list1/ul4_3.png" alt="">
  424.                                     <p>Redmi K40S</p>
  425.                                 </li>
  426.                                 <li><img src="images/img/list/list1/ul4_1.png" alt="">
  427.                                     <p>Redmi K50 电竞版</p>
  428.                                 </li>
  429.                                 <li><img src="images/img/list/list1/ul4_4.png" alt="">
  430.                                     <p>Xiaomi 12 Pro</p>
  431.                                 </li>
  432.                                 <li><img src="images/img/list/list1/ul4_1.png" alt="">
  433.                                     <p>Xiaomi 12</p>
  434.                                 </li>
  435.                                 <li><img src="images/img/list/list1/ul4_5.png" alt="">
  436.                                     <p>Xiaomi 12 X</p>
  437.                                 </li>
  438.                                 <li><img src="images/img/list/list1/ul4_1.png" alt="">
  439.                                     <p>Xiaomi 11 青春活力版</p>
  440.                                 </li>
  441.                                 <li><img src="images/img/list/list1/ul4_6.png" alt="">
  442.                                     <p>Note 11 Pro 系列</p>
  443.                                 </li>
  444.                                 <li><img src="images/img/list/list1/ul3_5.png" alt="">
  445.                                     <p>Note 11 4 G</p>
  446.                                 </li>
  447.                                 <li><img src="images/img/list/list1/ul3_6.png" alt="">
  448.                                     <p>Note 11 5 G</p>
  449.                                 </li>
  450.                             </ul>
  451.                         </div>
  452.                         <div class="items">
  453.                             <ul>
  454.                                 <li><img src="images/img/list/list2/ul1_1.png" alt="">
  455.                                     <p>小米拍拍4K高清投屏器</p>
  456.                                 </li>
  457.                                 <li><img src="images/img/list/list2/ul1_2.png" alt="">
  458.                                     <p>小米电视6 55” OLED</p>
  459.                                 </li>
  460.                                 <li><img src="images/img/list/list2/ul3_1.png" alt="">
  461.                                     <p>Redmi X55 2022款</p>
  462.                                 </li>
  463.                                 <li><img src="images/img/list/list2/ul4_1.png" alt="">
  464.                                     <p>小米电视6 65” OLED</p>
  465.                                 </li>
  466.                                 <li><img src="images/img/list/list2/ul2_1.png" alt="">
  467.                                     <p>小米电视 大师 77” OLED</p>
  468.                                 </li>
  469.                                 <li><img src="images/img/list/list2/ul2_2.png" alt="">
  470.                                     <p>小米电视6 至尊版 55英寸</p>
  471.                                 </li>
  472.                                 <li><img src="images/img/list/list2/ul2_3.png" alt="">
  473.                                     <p>小米电视6 至尊版 65英寸</p>
  474.                                 </li>
  475.                                 <li><img src="images/img/list/list2/ul2_4.png" alt="">
  476.                                     <p>小米电视6 至尊版 75英寸</p>
  477.                                 </li>
  478.                                 <li><img src="images/img/list/list2/ul2_5.png" alt="">
  479.                                     <p>小米电视 ES43 2022款</p>
  480.                                 </li>
  481.                                 <li><img src="images/img/list/list2/ul2_6.png" alt="">
  482.                                     <p>小米电视 ES55 2022款</p>
  483.                                 </li>
  484.                                 <li><img src="images/img/list/list2/ul3_2.png" alt="">
  485.                                     <p>小米电视 ES65 2022款</p>
  486.                                 </li>
  487.                                 <li><img src="images/img/list/list2/ul3_3.png" alt="">
  488.                                     <p>小米电视 ES75 2022款</p>
  489.                                 </li>
  490.                                 <li><img src="images/img/list/list2/ul4_1.png" alt="">
  491.                                     <p>金属全面屏电视</p>
  492.                                 </li>
  493.                                 <li><img src="images/img/list/list2/ul4_2.png" alt="">
  494.                                     <p>小米全面屏电视</p>
  495.                                 </li>
  496.                                 <li><img src="images/img/list/list2/ul4_1.png" alt="">
  497.                                     <p>米家激光投影仪</p>
  498.                                 </li>
  499.                                 <li><img src="images/img/list/list2/ul4_3.png" alt="">
  500.                                     <p>Redmi 智能电视 X55</p>
  501.                                 </li>
  502.                                 <li><img src="images/img/list/list2/ul4_1.png" alt="">
  503.                                     <p>激光投影电视</p>
  504.                                 </li>
  505.                                 <li><img src="images/img/list/list2/ul4_4.png" alt="">
  506.                                     <p>大师电视 65英寸 OLED</p>
  507.                                 </li>
  508.                                 <li><img src="images/img/list/list2/ul4_1.png" alt="">
  509.                                     <p>小米电视4A 60英寸</p>
  510.                                 </li>
  511.                                 <li><img src="images/img/list/list2/ul4_5.png" alt="">
  512.                                     <p>Redmi 智能电视 MAX 98"</p>
  513.                                 </li>
  514.                                 <li><img src="images/img/list/list2/ul4_1.png" alt="">
  515.                                     <p>Xiaomi 11 青春活力版</p>
  516.                                 </li>
  517.                                 <li><img src="images/img/list/list2/ul4_6.png" alt="">
  518.                                     <p>小米电视5 75英寸</p>
  519.                                 </li>
  520.                                 <li><img src="images/img/list/list2/ul3_5.png" alt="">
  521.                                     <p>小米电视4A 70英寸</p>
  522.                                 </li>
  523.                                 <li><img src="images/img/list/list2/ul3_6.png" alt="">
  524.                                     <p>小米电视4S 75 英寸</p>
  525.                                 </li>
  526.                             </ul>
  527.                         </div>
  528.                         <div class="items">
  529.                             <ul>
  530.                                 <li><img src="images/img/list/list3/ul1_1.png" alt="">
  531.                                     <p>小米平板5 Pro 12.4</p>
  532.                                 </li>
  533.                                 <li><img src="images/img/list/list3/ul1_2.png" alt="">
  534.                                     <p>Redmi G 游戏本 2022</p>
  535.                                 </li>
  536.                                 <li><img src="images/img/list/list3/ul3_1.png" alt="">
  537.                                     <p>RedmiBook Pro14 2022</p>
  538.                                 </li>
  539.                                 <li><img src="images/img/list/list3/ul4_1.png" alt="">
  540.                                     <p>RedmiBook Pro15 2022</p>
  541.                                 </li>
  542.                                 <li><img src="images/img/list/list3/ul2_1.png" alt="">
  543.                                     <p>RedmiBook Pro 14 增强版</p>
  544.                                 </li>
  545.                                 <li><img src="images/img/list/list3/ul2_2.png" alt="">
  546.                                     <p>小米笔记本 Pro 14 锐龙版</p>
  547.                                 </li>
  548.                                 <li><img src="images/img/list/list3/ul2_3.png" alt="">
  549.                                     <p>RedmiBook Pro 15 增强版</p>
  550.                                 </li>
  551.                                 <li><img src="images/img/list/list3/ul2_4.png" alt="">
  552.                                     <p>小米笔记本 Pro X 14</p>
  553.                                 </li>
  554.                                 <li><img src="images/img/list/list3/ul2_5.png" alt="">
  555.                                     <p>Redmi G 2021 Intel版</p>
  556.                                 </li>
  557.                                 <li><img src="images/img/list/list3/ul2_6.png" alt="">
  558.                                     <p>Redmi G 2021 AMD版</p>
  559.                                 </li>
  560.                                 <li><img src="images/img/list/list3/ul3_2.png" alt="">
  561.                                     <p>小米平板5</p>
  562.                                 </li>
  563.                                 <li><img src="images/img/list/list3/ul3_3.png" alt="">
  564.                                     <p>小米平板5 Pro</p>
  565.                                 </li>
  566.                                 <li><img src="images/img/list/list3/ul4_1.png" alt="">
  567.                                     <p>小米平板5 Pro 5G</p>
  568.                                 </li>
  569.                                 <li><img src="images/img/list/list3/ul2_2.png" alt="">
  570.                                     <p>小米笔记本 Pro 14 增强版</p>
  571.                                 </li>
  572.                                 <li><img src="images/img/list/list3/ul1_1.png" alt="">
  573.                                     <p>小米笔记本 Pro 15 增强版</p>
  574.                                 </li>
  575.                                 <li><img src="images/img/list/list3/ul1_3.png" alt="">
  576.                                     <p>小米笔记本 Pro X 15</p>
  577.                                 </li>
  578.                                 <li><img src="images/img/list/list3/ul3_1.png" alt="">
  579.                                     <p>RedmiBook Pro 14 锐龙版</p>
  580.                                 </li>
  581.                                 <li><img src="images/img/list/list3/ul2_4.png" alt="">
  582.                                     <p>RedmiBook Pro 15 锐龙版</p>
  583.                                 </li>
  584.                                 <li><img src="images/img/list/list3/ul3_1.png" alt="">
  585.                                     <p>小米笔记本 Pro</p>
  586.                                 </li>
  587.                                 <li><img src="images/img/list/list3/ul3_5.png" alt="">
  588.                                     <p>小米笔记本Pro 15</p>
  589.                                 </li>
  590.                                 <li><img src="images/img/list/list3/ul4_1.png" alt="">
  591.                                     <p>小米笔记本Pro 14</p>
  592.                                 </li>
  593.                                 <li><img src="images/img/list/list3/ul4_2.png" alt="">
  594.                                     <p>RedmiBook Air 13</p>
  595.                                 </li>
  596.                                 <li><img src="images/img/list/list3/ul4_3.png" alt="">
  597.                                     <p>键鼠套装</p>
  598.                                 </li>
  599.                                 <li><img src="images/img/list/list3/ul4_4.png" alt="">
  600.                                     <p>鼠标</p>
  601.                                 </li>
  602.                             </ul>
  603.                         </div>
  604.                         <div class="items">
  605.                             <ul>
  606.                                 <li><img src="images/img/list/list4/ul1_1.png" alt="">
  607.                                     <p>Xiaomi Watch S1 Pro</p>
  608.                                 </li>
  609.                                 <li><img src="images/img/list/list4/ul1_2.png" alt="">
  610.                                     <p>小米手环7 Pro</p>
  611.                                 </li>
  612.                                 <li><img src="images/img/list/list4/ul1_3.png" alt="">
  613.                                     <p>小米手环7 NFC版</p>
  614.                                 </li>
  615.                                 <li><img src="images/img/list/list4/ul1_4.png" alt="">
  616.                                     <p>小米手环7</p>
  617.                                 </li>
  618.                                 <li><img src="images/img/list/list4/ul1_5.png" alt="">
  619.                                     <p>Xiaomi Watch S1</p>
  620.                                 </li>
  621.                                 <li><img src="images/img/list/list4/ul1_6.png" alt="">
  622.                                     <p>Xiaomi Watch Color 2</p>
  623.                                 </li>
  624.                                 <li><img src="images/img/list/list4/ul2_1.png" alt="">
  625.                                     <p>Redmi 手表 2</p>
  626.                                 </li>
  627.                                 <li><img src="images/img/list/list4/ul2_2.png" alt="">
  628.                                     <p>小米手环6 NFC版</p>
  629.                                 </li>
  630.                                 <li><img src="images/img/list/list4/ul2_3.png" alt="">
  631.                                     <p>平衡车</p>
  632.                                 </li>
  633.                                 <li><img src="images/img/list/list4/ul2_4.png" alt="">
  634.                                     <p>自行车</p>
  635.                                 </li>
  636.                                 <li><img src="images/img/list/list4/ul2_5.png" alt="">
  637.                                     <p>滑板车</p>
  638.                                 </li>
  639.                                 <li><img src="images/img/list/list4/ul2_6.png" alt="">
  640.                                     <p>车载充电器</p>
  641.                                 </li>
  642.                                 <li><img src="images/img/list/list4/ul3_1.png" alt="">
  643.                                     <p>智能记录仪</p>
  644.                                 </li>
  645.                                 <li><img src="images/img/list/list4/ul3_2.png" alt="">
  646.                                     <p>充气宝</p>
  647.                                 </li>
  648.                                 <li><img src="images/img/list/list4/ul3_3.png" alt="">
  649.                                     <p>石英表</p>
  650.                                 </li>
  651.                             </ul>
  652.                         </div>
  653.                         <div class="items">
  654.                             <ul>
  655.                                 <li><img src="images/img/list/list5/ul1_1.png" alt="">
  656.                                     <p>Xiaomi Buds 4 Pro</p>
  657.                                 </li>
  658.                                 <li><img src="images/img/list/list5/ul1_2.png" alt="">
  659.                                     <p>Redmi Buds 4 Pro</p>
  660.                                 </li>
  661.                                 <li><img src="images/img/list/list5/ul1_3.png" alt="">
  662.                                     <p>Redmi Buds 4</p>
  663.                                 </li>
  664.                                 <li><img src="images/img/list/list5/ul1_4.png" alt="">
  665.                                     <p>Xiaomi 真无线降噪耳机 3 Pro</p>
  666.                                 </li>
  667.                                 <li><img src="images/img/list/list5/ul1_5.png" alt="">
  668.                                     <p>Xiaomi 真无线降噪耳机 3</p>
  669.                                 </li>
  670.                                 <li><img src="images/img/list/list5/ul1_6.png" alt="">
  671.                                     <p>Redmi Buds 3</p>
  672.                                 </li>
  673.                                 <li><img src="images/img/list/list5/ul1_1.png" alt="">
  674.                                     <p>Air2 se</p>
  675.                                 </li>
  676.                                 <li><img src="images/img/list/list5/ul1_2.png" alt="">
  677.                                     <p>Redmi Buds 3 青春版</p>
  678.                                 </li>
  679.                                 <li><img src="images/img/list/list5/ul1_3.png" alt="">
  680.                                     <p>小米小爱音箱</p>
  681.                                 </li>
  682.                                 <li><img src="images/img/list/list5/ul1_4.png" alt="">
  683.                                     <p>小爱触屏音箱Pro 8</p>
  684.                                 </li>
  685.                                 <li><img src="images/img/list/list5/ul1_5.png" alt="">
  686.                                     <p>Xiaomi Sound</p>
  687.                                 </li>
  688.                                 <li><img src="images/img/list/list5/ul1_6.png" alt="">
  689.                                     <p>Redmi小爱触屏音箱 8</p>
  690.                                 </li>
  691.                                 <li><img src="images/img/list/list5/ul1_1.png" alt="">
  692.                                     <p>小爱音箱 Pro</p>
  693.                                 </li>
  694.                                 <li><img src="images/img/list/list5/ul1_2.png" alt="">
  695.                                     <p>小米小爱触屏音箱</p>
  696.                                 </li>
  697.                                 <li><img src="images/img/list/list5/ul1_3.png" alt="">
  698.                                     <p>Redmi音箱</p>
  699.                                 </li>
  700.                                 <li><img src="images/img/list/list5/ul1_4.png" alt="">
  701.                                     <p>小米小爱音箱 Play</p>
  702.                                 </li>
  703.                                 <li><img src="images/img/list/list5/ul1_5.png" alt="">
  704.                                     <p>线控耳机</p>
  705.                                 </li>
  706.                                 <li><img src="images/img/list/list5/ul2_4.png" alt="">
  707.                                     <p>蓝牙耳机</p>
  708.                                 </li>
  709.                                 <li><img src="images/img/list/list5/ul2_1.png" alt="">
  710.                                     <p>蓝牙音箱</p>
  711.                                 </li>
  712.                                 <li><img src="images/img/list/list5/ul2_2.png" alt="">
  713.                                     <p>小米AI音箱</p>
  714.                                 </li>
  715.                                 <li><img src="images/img/list/list5/ul2_3.png" alt="">
  716.                                     <p>小米小爱音箱HD</p>
  717.                                 </li>
  718.                             </ul>
  719.                         </div>
  720.                         <div class="items">
  721.                             <ul>
  722.                                 <li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
  723.                                     <p>壁挂空调</p>
  724.                                 </li>
  725.                                 <li><img src="images/images/home appliances/小米净水器.jpg" alt="">
  726.                                     <p>立式空调</p>
  727.                                 </li>
  728.                                 <li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
  729.                                     <p>冰箱</p>
  730.                                 </li>
  731.                                 <li><img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
  732.                                     <p>滚筒洗衣机</p>
  733.                                 </li>
  734.                                 <li><img src="images/images/home appliances/米家互联网空调（一级能效）.png" alt="">
  735.                                     <p>波轮洗衣机</p>
  736.                                 </li>
  737.                                 <li><img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
  738.                                     <p>净水器</p>
  739.                                 </li>
  740.                                 <li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
  741.                                     <p>微蒸烤</p>
  742.                                 </li>
  743.                                 <li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
  744.                                     <p>烟灶</p>
  745.                                 </li>
  746.                                 <li><img src="images/images/home appliances/小米净水器.jpg" alt="">
  747.                                     <p>洗碗机</p>
  748.                                 </li>
  749.                                 <li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
  750.                                     <p>扫地机器人</p>
  751.                                 </li>
  752.                                 <li><img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
  753.                                     <p>吸尘器</p>
  754.                                 </li>
  755.                                 <li><img src="images/images/home appliances/米家互联网空调（一级能效）.png" alt="">
  756.                                     <p>空气净化器</p>
  757.                                 </li>
  758.                                 <li><img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
  759.                                     <p>电饭煲</p>
  760.                                 </li>
  761.                                 <li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
  762.                                     <p>电磁炉</p>
  763.                                 </li>
  764.                                 <li><img src="images/images/home appliances/小米净水器.jpg" alt="">
  765.                                     <p>水壶</p>
  766.                                 </li>
  767.                                 <li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
  768.                                     <p>落地风扇</p>
  769.                                 </li>
  770.                                 <li><img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
  771.                                     <p>投影仪</p>
  772.                                 </li>
  773.                                 <li><img src="images/images/home appliances/米家互联网空调（一级能效）.png" alt="">
  774.                                     <p>灯具</p>
  775.                                 </li>
  776.                                 <li><img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
  777.                                     <p>插线板</p>
  778.                                 </li>
  779.                                 <li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
  780.                                     <p>新风机</p>
  781.                                 </li>
  782.                                 <li><img src="images/images/home appliances/小米净水器.jpg" alt="">
  783.                                     <p>电暖器</p>
  784.                                 </li>
  785.                                 <li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
  786.                                     <p>料理机</p>
  787.                                 </li>
  788.                             </ul>
  789.                         </div>
  790.                         <div class="items">
  791.                             <ul>
  792.                                 <li><img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
  793.                                     <p>CyberDog</p>
  794.                                 </li>
  795.                                 <li><img src="images/images/Router/小米AIoT路由器AX3600.webp" alt="">
  796.                                     <p>MIJIA K歌麦克风</p>
  797.                                 </li>
  798.                                 <li><img src="images/images/Router/小米路由器 4C.jpg" alt="">
  799.                                     <p>打印机</p>
  800.                                 </li>
  801.                                 <li><img src="images/images/Router/小米路由器 Mesh.jpg" alt="">
  802.                                     <p>喷墨打印机</p>
  803.                                 </li>
  804.                                 <li><img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
  805.                                     <p>喷墨打印机墨水</p>
  806.                                 </li>
  807.                                 <li><img src="images/images/Router/小米路由器AC2100.webp" alt="">
  808.                                     <p>小米路由器</p>
  809.                                 </li>
  810.                                 <li><img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
  811.                                     <p>智能家庭</p>
  812.                                 </li>
  813.                                 <li><img src="images/images/Router/小米路由器 Mesh.jpg" alt="">
  814.                                     <p>对讲机</p>
  815.                                 </li>
  816.                                 <li><img src="images/images/Router/小米路由器 4C.jpg" alt="">
  817.                                     <p>摄像机</p>
  818.                                 </li>
  819.                                 <li><img src="images/images/Router/小米AIoT路由器AX3600.webp" alt="">
  820.                                     <p>智能门锁</p>
  821.                                 </li>
  822.                                 <li><img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
  823.                                     <p>视频门铃</p>
  824.                                 </li>
  825.                                 <li><img src="images/images/Router/小米路由器 4C.jpg" alt="">
  826.                                     <p>小爱老师</p>
  827.                                 </li>
  828.                                 <li><img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
  829.                                     <p>Redmi路由器</p>
  830.                                 </li>
  831.                                 <li><img src="images/images/Router/小米路由器AC2100.webp" alt="">
  832.                                     <p>小爱音箱</p>
  833.                                 </li>
  834.                             </ul>
  835.                         </div>
  836.                         <div class="items">
  837.                             <ul>
  838.                                 <li><img src="images/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">
  839.                                     <p>移动电源</p>
  840.                                 </li>
  841.                                 <li><img src="images/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">
  842.                                     <p>数据线</p>
  843.                                 </li>
  844.                                 <li><img src="images/images/第六部分images/小米cc9定制钢化膜.webp" alt="">
  845.                                     <p>充电器</p>
  846.                                 </li>
  847.                                 <li><img src="images/images/第六部分images/小米USB充电器30W快充版.webp" alt="">
  848.                                     <p>电池</p>
  849.                                 </li>
  850.                                 <li><img src="images/images/第六部分images/小米USB充电器36W快充版(2...).jpg" alt="">
  851.                                     <p>自拍杆</p>
  852.                                 </li>
  853.                                 <li><img src="images/images/第六部分images/小米二合一数据线100cm.jpg" alt="">
  854.                                     <p>手机壳</p>
  855.                                 </li>
  856.                                 <li><img src="images/images/第六部分images/小米无线充电宝青春版.webp" alt="">
  857.                                     <p>手机贴膜</p>
  858.                                 </li>
  859.                                 <li><img src="images/images/第六部分images/小米车载充电器快充版(37W).webp" alt="">
  860.                                     <p>无线充电器</p>
  861.                                 </li>
  862.                                 <li><img src="images/images/第六部分images/米家LED随身灯.jpg" alt="">
  863.                                     <p>平板配件</p>
  864.                                 </li>
  865.                                 <li><img src="images/images/第六部分images/小米二合一数据线100cm.jpg" alt="">
  866.                                     <p>黑鲨配件</p>
  867.                                 </li>
  868.                                 <li><img src="images/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">
  869.                                     <p>其他配件</p>
  870.                                 </li>
  871.                             </ul>
  872.                         </div>
  873.                         <div class="items">
  874.                             <ul>
  875.                                 <li><img src="images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt="">
  876.                                     <p>米家跑步机</p>
  877.                                 </li>
  878.                                 <li><img src="images/images/第八部分images/title.jpg" alt="">
  879.                                     <p>洗手机</p>
  880.                                 </li>
  881.                                 <li><img src="images/images/第八部分images/小米手表Color 充电座.jpg" alt="">
  882.                                     <p>剃须刀</p>
  883.                                 </li>
  884.                                 <li><img src="images/images/第八部分images/小米手表Color 雅典黑.jpg" alt="">
  885.                                     <p>修剪器</p>
  886.                                 </li>
  887.                                 <li><img src="images/images/第八部分images/小米手表标准版.jpg" alt="">
  888.                                     <p>牙刷</p>
  889.                                 </li>
  890.                                 <li><img src="images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt="">
  891.                                     <p>吹风机</p>
  892.                                 </li>
  893.                                 <li><img src="images/images/第八部分images/米家石英经典版 白色.jpg" alt="">
  894.                                     <p>体重秤</p>
  895.                                 </li>
  896.                                 <li><img src="images/images/第八部分images/米家石英经典版 黑色.jpg" alt="">
  897.                                     <p>体脂秤</p>
  898.                                 </li>
  899.                                 <li><img src="images/images/第八部分images/title.jpg" alt="">
  900.                                     <p>早教启智</p>
  901.                                 </li>
  902.                                 <li><img src="images/images/第八部分images/小米手表Color 雅典黑.jpg" alt="">
  903.                                     <p>益智积木</p>
  904.                                 </li>
  905.                                 <li><img src="images/images/第八部分images/小米手表Color 充电座.jpg" alt="">
  906.                                     <p>儿童手表</p>
  907.                                 </li>
  908.                                 <li><img src="images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt="">
  909.                                     <p>儿童滑板车</p>
  910.                                 </li>
  911.                                 <li><img src="images/images/第八部分images/小米手表标准版.jpg" alt="">
  912.                                     <p>婴儿推车</p>
  913.                                 </li>
  914.                                 <li><img src="images/images/第八部分images/小米手表Color 充电座.jpg" alt="">
  915.                                     <p>理发器</p>
  916.                                 </li>
  917.                                 <li><img src="images/images/第八部分images/小米手表标准版.jpg" alt="">
  918.                                     <p>走步机</p>
  919.                                 </li>
  920.                                 <li><img src="images/images/第八部分images/title.jpg" alt="">
  921.                                     <p>智能遥控车</p>
  922.                                 </li>
  923.                             </ul>
  924.                         </div>
  925.                         <div class="items">
  926.                             <ul>
  927.                                 <li><img src="images/images/第七部分images/小米商务旅多功能双肩包.webp" alt="">
  928.                                     <p>小背包</p>
  929.                                 </li>
  930.                                 <li><img src="images/images/第七部分images/3卷装抽绳式垃圾袋.webp" alt="">
  931.                                     <p>双肩包</p>
  932.                                 </li>
  933.                                 <li><img src="images/images/第七部分images/自动折叠伞.jpg" alt="">
  934.                                     <p>胸包</p>
  935.                                 </li>
  936.                                 <li><img src="images/images/第七部分images/90分框体旅行箱.webp" alt="">
  937.                                     <p>旅行箱</p>
  938.                                 </li>
  939.                                 <li><img src="images/images/第七部分images/小米巨能写中性笔.webp" alt="">
  940.                                     <p>运动鞋</p>
  941.                                 </li>
  942.                                 <li><img src="images/images/第七部分images/最生活毛巾-青春系列.jpg" alt="">
  943.                                     <p>眼镜</p>
  944.                                 </li>
  945.                                 <li><img src="images/images/第七部分images/米家飞行眼镜.webp" alt="">
  946.                                     <p>床垫</p>
  947.                                 </li>
  948.                                 <li><img src="images/images/第七部分images/米家驱蚊器基础.版webp.webp" alt="">
  949.                                     <p>枕头</p>
  950.                                 </li>
  951.                                 <li><img src="images/images/第七部分images/自动折叠伞.jpg" alt="">
  952.                                     <p>螺丝刀</p>
  953.                                 </li>
  954.                                 <li><img src="images/images/第七部分images/小米商务旅多功能双肩包.webp" alt="">
  955.                                     <p>保温杯</p>
  956.                                 </li>
  957.                                 <li><img src="images/images/第七部分images/3卷装抽绳式垃圾袋.webp" alt="">
  958.                                     <p>伞</p>
  959.                                 </li>
  960.                                 <li><img src="images/images/第七部分images/最生活毛巾-青春系列.jpg" alt="">
  961.                                     <p>驱蚊器</p>
  962.                                 </li>
  963.                                 <li><img src="images/images/第七部分images/自动折叠伞.jpg" alt="">
  964.                                     <p>毛巾/浴巾</p>
  965.                                 </li>
  966.                                 <li><img src="images/images/第七部分images/米家保温杯hover附图.jpg" alt="">
  967.                                     <p>米兔</p>
  968.                                 </li>
  969.                                 <li><img src="images/images/第七部分images/米家背包hover附图.jpg" alt="">
  970.                                     <p>笔</p>
  971.                                 </li>
  972.                             </ul>
  973.                         </div>
  974.                     </div>
  975.                     <!-- 右侧轮播图 -->
  976.                     <div class="carousel">
  977.                         <a href="javascript:;" class="arrow-l"><span></span></a>
  978.                         <a href="javascript:;" class="arrow-r"><span></span></a>
  979.                         <ul>
  980.                             <li>
  981.                                 <a href="javascript:;"><img src="images/小米red.webp" alt=""></a>
  982.                             </li>
  983.                             <li>
  984.                                 <a href="javascript:;"><img src="images/小米Reami.jpg" alt=""></a>
  985.                             </li>
  986.                             <li>
  987.                                 <a href="javascript:;"><img src="images/XaioMibackground.webp" alt=""></a>
  988.                             </li>
  989.                             <li>
  990.                                 <a href="javascript:;"><img src="images/XaioMi10background.jpg" alt=""></a>
  991.                             </li>
  992.                         </ul>
  993.                         <ol class="circle"></ol>
  994.                     </div>
  995.                 </div>
  996.                 <!-- 头部结束部分 -->
  997.                 <div class="introduce">
  998.                     <!-- 左侧盒子 -->
  999.                     <div class="left-item">
  1000.                         <table>
  1001.                             <tbody>
  1002.                                 <tr>
  1003.                                     <td>
  1004.                                         <img src="images/images/twolevelimages/小米秒杀png.png" alt="">
  1005.                                         <p>保障服务</p>
  1006.                                     </td>
  1007.                                     <td>
  1008.                                         <img src="images/images/twolevelimages/企业团购.png" alt="">
  1009.                                         <p>企业团购</p>
  1010.                                     </td>
  1011.                                     <td>
  1012.                                         <img src="images/images/twolevelimages/F码通道.png" alt="">
  1013.                                         <p>F码通道</p>
  1014.                                     </td>
  1015.                                 </tr>
  1016.                                 <tr>
  1017.                                     <td>
  1018.                                         <img src="images/images/twolevelimages/米粉卡.png" alt="">
  1019.                                         <p>米粉卡</p>
  1020.                                     </td>
  1021.                                     <td>
  1022.                                         <img src="images/images/twolevelimages/以旧换新.png" alt="">
  1023.                                         <p>以旧换新</p>
  1024.                                     </td>
  1025.                                     <td>
  1026.                                         <img src="images/images/twolevelimages/话费充值.png" alt="">
  1027.                                         <p>话费充值</p>
  1028.                                     </td>
  1029.                                 </tr>
  1030.                             </tbody>
  1031.                         </table>
  1032.                     </div>
  1033.                     <!-- 右侧图片 -->
  1034.                     <div class="right-item">
  1035.                         <ul>
  1036.                             <li><img src="images/images/twolevelimages/RedK30(5G)Box.jpg" alt=""></li>
  1037.                             <li><img src="images/images/twolevelimages/RedNote8Box.jpg" alt=""></li>
  1038.                             <li><img src="images/images/twolevelimages/小米手环4(Box).jpg" alt=""></li>
  1039.                         </ul>
  1040.                     </div>
  1041.                 </div>
  1042.             </div>
  1043.         </div>
  1044.         <!-- 中 -->
  1045.         <div class="in">
  1046.             <div class="w">
  1047.                 <!-- 内容部分 -->
  1048.                 <div class="list">
  1049.                     <!-- 头部图片 -->
  1050.                     <div class="top-box">
  1051.                         <a href="javascript:;"><img src="images/images/Top1images/RedMiK30show.webp" alt=""></a>
  1052.                     </div>
  1053.                     <div class="list-items">
  1054.                         <!-- text area-->
  1055.                         <div class="items-text">
  1056.                             <div class="text-l">
  1057.                                 <h2>手机</h2>
  1058.                             </div>
  1059.                             <div class="text-r">
  1060.                                 <p>查看更多</p>
  1061.                                 <span></span>
  1062.                             </div>
  1063.                         </div>
  1064.                         <!-- img area-->
  1065.                         <div class="items-img">
  1066.                             <div class="img-l">
  1067.                                 <a href="javascript:;"><img src="images/images/小米Alpha/XiaoMIMIxAlpha.webp" alt=""></a>
  1068.                             </div>
  1069.                             <div class="img-r">
  1070.                                 <ul>
  1071.                                     <li>
  1072.                                         <img src="images/images/小米Alpha/CC9定制.jpg" alt="">
  1073.                                         <h5>CC9定制</h5>
  1074.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1075.                                         <span>2999元起</span>
  1076.                                     </li>
  1077.                                     <li>
  1078.                                         <img src="images/images/小米Alpha/Mi10.webp" alt="">
  1079.                                         <h5>Mi10</h5>
  1080.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1081.                                         <span>2999元起<i>3999元</i></span>
  1082.                                     </li>
  1083.                                     <li>
  1084.                                         <img src="images/images/小米Alpha/Redmi8.webp" alt="">
  1085.                                         <h5>Redmi8</h5>
  1086.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1087.                                         <span>2999元起</span>
  1088.                                     </li>
  1089.                                     <li>
  1090.                                         <img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
  1091.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1092.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1093.                                         <span>2999元起</span>
  1094.                                     </li>
  1095.                                     <li>
  1096.                                         <img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
  1097.                                         <h5>RedmiK30Pro变焦版</h5>
  1098.                                         <p>天玑8100｜真旗舰芯</p>
  1099.                                         <span>2999元起</span>
  1100.                                     </li>
  1101.                                     <li>
  1102.                                         <img src="images/images/小米Alpha/小米10Pro.webp" alt="">
  1103.                                         <h5>小米10Pro</h5>
  1104.                                         <p>天玑8100｜真旗舰芯</p>
  1105.                                         <span>2999元起<i>3999元</i></span>
  1106.                                     </li>
  1107.                                     <li>
  1108.                                         <img src="images/images/小米Alpha/小米9.JPG" alt="">
  1109.                                         <h5>小米9</h5>
  1110.                                         <p>天玑8100｜真旗舰芯</p>
  1111.                                         <span>2999元起</span>
  1112.                                     </li>
  1113.                                     <li>
  1114.                                         <img src="images/images/小米Alpha/黑鲨Pro.png" alt="">
  1115.                                         <h5>黑鲨Pro</h5>
  1116.                                         <p>天玑8100｜真旗舰芯</p>
  1117.                                         <span>2999元起</span>
  1118.                                     </li>
  1119.                                 </ul>
  1120.                             </div>
  1121.                         </div>
  1122.                     </div>
  1123.                     <div class="list-items">
  1124.                         <!-- text area-->
  1125.                         <div class="items-text">
  1126.                             <div class="text-l">
  1127.                                 <h2>智能穿戴</h2>
  1128.                             </div>
  1129.                             <div class="text-r">
  1130.                                 <ul>
  1131.                                     <li class="now"><a href="javascript:;">热门</a></li>
  1132.                                     <li><a href="javascript:;">穿戴</a></li>
  1133.                                 </ul>
  1134.                             </div>
  1135.                         </div>
  1136.                         <!-- img area-->
  1137.                         <div class="items-img">
  1138.                             <div class="img-l">
  1139.                                 <img src="images/images/小米Alpha/wear.webp" alt="">
  1140.                             </div>
  1141.                             <div class="img-r">
  1142.                                 <ul class="block">
  1143.                                     <li>
  1144.                                         <img src="images/img/smartwearul1.png" alt="">
  1145.                                         <h5>CC9定制</h5>
  1146.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1147.                                         <span>2999元起</span>
  1148.                                     </li>
  1149.                                     <li>
  1150.                                         <img src="images/img/smartwearul2.png" alt="">
  1151.                                         <h5>Mi10</h5>
  1152.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1153.                                         <span>2999元起<i>3999元</i></span>
  1154.                                     </li>
  1155.                                     <li>
  1156.                                         <img src="images/img/smartwearul3.png" alt="">
  1157.                                         <h5>Redmi8</h5>
  1158.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1159.                                         <span>2999元起</span>
  1160.                                     </li>
  1161.                                     <li>
  1162.                                         <img src="images/img/smartwearul4.png" alt="">
  1163.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1164.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1165.                                         <span>2999元起<i>3999元</i></span>
  1166.                                     </li>
  1167.                                     <li>
  1168.                                         <img src="images/img/smartwearul5.png" alt="">
  1169.                                         <h5>RedmiK30Pro变焦版</h5>
  1170.                                         <p>天玑8100｜真旗舰芯</p>
  1171.                                         <span>2999元起</span>
  1172.                                     </li>
  1173.                                     <li>
  1174.                                         <img src="images/img/smartwearul6.png" alt="">
  1175.                                         <h5>小米9</h5>
  1176.                                         <p>天玑8100｜真旗舰芯</p>
  1177.                                         <span>2999元起</span>
  1178.                                     </li>
  1179.                                     <li>
  1180.                                         <img src="images/img/smartwearul7.png" alt="">
  1181.                                         <h5>黑鲨Pro</h5>
  1182.                                         <p>天玑8100｜真旗舰芯</p>
  1183.                                         <span>2999元起<i>3999元</i></span>
  1184.                                     </li>
  1185.                                     <li class="more">
  1186.                                         <div class="lt">
  1187.                                             <h3>浏览更多</h3>
  1188.                                             <p>热门</p>
  1189.                                         </div>
  1190.                                         <div class="rt"><span></span></div>
  1191.                                     </li>
  1192.                                 </ul>
  1193.                                 <ul class="none">
  1194.                                     <li>
  1195.                                         <img src="images/img/smartwearul7.png" alt="">
  1196.                                         <h5>黑鲨Pro</h5>
  1197.                                         <p>天玑8100｜真旗舰芯</p>
  1198.                                         <span>2999元起<i>3999元</i></span>
  1199.                                     </li>
  1200.                                     <li class="more">
  1201.                                         <div class="lt">
  1202.                                             <h3>浏览更多</h3>
  1203.                                             <p>穿戴</p>
  1204.                                         </div>
  1205.                                         <div class="rt"><span></span></div>
  1206.                                     </li>
  1207.                                 </ul>
  1208.                             </div>
  1209.                         </div>
  1210.                     </div>
  1211.                     <div class="list-items">
  1212.                         <!-- text area-->
  1213.                         <div class="items-text">
  1214.                             <div class="text-l">
  1215.                                 <h2>笔记本 | 平板</h2>
  1216.                             </div>
  1217.                             <div class="text-r">
  1218.                                 <ul>
  1219.                                     <li class="now"><a href="javascript:;">热门</a></li>
  1220.                                 </ul>
  1221.                             </div>
  1222.                         </div>
  1223.                         <!-- img area-->
  1224.                         <div class="items-img">
  1225.                             <div class="img-l">
  1226.                                 <img src="images/images/小米Alpha/computer.webp" alt="">
  1227.                             </div>
  1228.                             <div class="img-r">
  1229.                                 <ul>
  1230.                                     <li>
  1231.                                         <img src="images/images/computer/RedmiBook 13.webp" alt="">
  1232.                                         <h5>CC9定制</h5>
  1233.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1234.                                         <span>2999元起<i>3999元</i></span>
  1235.                                     </li>
  1236.                                     <li>
  1237.                                         <img src="images/images/computer/RedmiBook 14.webp" alt="">
  1238.                                         <h5>Mi10</h5>
  1239.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1240.                                         <span>2999元起</span>
  1241.                                     </li>
  1242.                                     <li>
  1243.                                         <img src="images/images/computer/小米笔记本 15.6.png" alt="">
  1244.                                         <h5>Redmi8</h5>
  1245.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1246.                                         <span>2999元起</span>
  1247.                                     </li>
  1248.                                     <li>
  1249.                                         <img src="images/images/computer/小米笔记本 15.6.png" alt="">
  1250.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1251.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1252.                                         <span>2999元起</span>
  1253.                                     </li>
  1254.                                     <li>
  1255.                                         <img src="images/images/computer/小米笔记本Air 12.5.png" alt="">
  1256.                                         <h5>RedmiK30Pro变焦版</h5>
  1257.                                         <p>天玑8100｜真旗舰芯</p>
  1258.                                         <span>2999元起<i>3999元</i></span>
  1259.                                     </li>
  1260.                                     <li>
  1261.                                         <img src="images/images/computer/小米笔记本Pro 15.png" alt="">
  1262.                                         <h5>小米10Pro</h5>
  1263.                                         <p>天玑8100｜真旗舰芯</p>
  1264.                                         <span>2999元起</span>
  1265.                                     </li>
  1266.                                     <li>
  1267.                                         <img src="images/images/computer/游戏本2019款.webp" alt="">
  1268.                                         <h5>小米9</h5>
  1269.                                         <p>天玑8100｜真旗舰芯</p>
  1270.                                         <span>2999元起</span>
  1271.                                     </li>
  1272.                                     <li class="more">
  1273.                                         <div class="lt">
  1274.                                             <h3>浏览更多</h3>
  1275.                                             <p>热门</p>
  1276.                                         </div>
  1277.                                         <div class="rt"><span></span></div>
  1278.                                     </li>
  1279.                                 </ul>
  1280.                             </div>
  1281.                         </div>
  1282.                     </div>
  1283.                     <div class="list-items">
  1284.                         <!-- text area-->
  1285.                         <div class="items-text">
  1286.                             <div class="text-l">
  1287.                                 <h2>家电</h2>
  1288.                             </div>
  1289.                             <div class="text-r">
  1290.                                 <ul>
  1291.                                     <li class="now"><a href="javascript:;">热门</a></li>
  1292.                                     <li><a href="javascript:;">电视影音</a></li>
  1293.                                 </ul>
  1294.                             </div>
  1295.                         </div>
  1296.                         <!-- img area-->
  1297.                         <div class="items-img">
  1298.                             <div class="img-l">
  1299.                                 <ul>
  1300.                                     <li><img src="images/images/bodyhomeimages/jdtop1.webp" alt=""></li>
  1301.                                     <li><img src="images/images/bodyhomeimages/jdtop2.webp" alt=""></li>
  1302.                                 </ul>
  1303.                             </div>
  1304.                             <div class="img-r">
  1305.                                 <ul class="block">
  1306.                                     <li>
  1307.                                         <img src="images/images/小米Alpha/CC9定制.jpg" alt="">
  1308.                                         <h5>CC9定制</h5>
  1309.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1310.                                         <span>2999元起<i>3999元</i></span>
  1311.                                     </li>
  1312.                                     <li>
  1313.                                         <img src="images/images/小米Alpha/Mi10.webp" alt="">
  1314.                                         <h5>Mi10</h5>
  1315.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1316.                                         <span>2999元起</span>
  1317.                                     </li>
  1318.                                     <li>
  1319.                                         <img src="images/images/小米Alpha/Redmi8.webp" alt="">
  1320.                                         <h5>Redmi8</h5>
  1321.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1322.                                         <span>2999元起<i>3999元</i></span>
  1323.                                     </li>
  1324.                                     <li>
  1325.                                         <img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
  1326.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1327.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1328.                                         <span>2999元起<i>3999元</i></span>
  1329.                                     </li>
  1330.                                     <li>
  1331.                                         <img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
  1332.                                         <h5>RedmiK30Pro变焦版</h5>
  1333.                                         <p>天玑8100｜真旗舰芯</p>
  1334.                                         <span>2999元起</span>
  1335.                                     </li>
  1336.                                     <li>
  1337.                                         <img src="images/images/小米Alpha/小米10Pro.webp" alt="">
  1338.                                         <h5>小米10Pro</h5>
  1339.                                         <p>天玑8100｜真旗舰芯</p>
  1340.                                         <span>2999元起</span>
  1341.                                     </li>
  1342.                                     <li>
  1343.                                         <img src="images/images/小米Alpha/小米9.JPG" alt="">
  1344.                                         <h5>小米9</h5>
  1345.                                         <p>天玑8100｜真旗舰芯</p>
  1346.                                         <span>2999元起<i>3999元</i></span>
  1347.                                     </li>
  1348.                                     <li class="more">
  1349.                                         <div class="lt">
  1350.                                             <h4>米家全自动波轮洗衣机8kg</h4>
  1351.                                             <i>399元</i>
  1352.                                         </div>
  1353.                                         <div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
  1354.                                     </li>
  1355.                                     <li class="more">
  1356.                                         <div class="lt">
  1357.                                             <h3>浏览更多</h3>
  1358.                                             <p>热门</p>
  1359.                                         </div>
  1360.                                         <div class="rt"><span></span></div>
  1361.                                     </li>
  1362.                                 </ul>
  1363.                                 <ul class="none">
  1364.                                     <li>
  1365.                                         <img src="images/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
  1366.                                         <h5>CC9定制</h5>
  1367.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1368.                                         <span>2999元起<i>3999元</i></span>
  1369.                                     </li>
  1370.                                     <li>
  1371.                                         <img src="images/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
  1372.                                         <h5>Mi10</h5>
  1373.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1374.                                         <span>2999元起</span>
  1375.                                     </li>
  1376.                                     <li>
  1377.                                         <img src="images/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
  1378.                                         <h5>Redmi8</h5>
  1379.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1380.                                         <span>2999元起<i>3999元</i></span>
  1381.                                     </li>
  1382.                                     <li>
  1383.                                         <img src="images/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">
  1384.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1385.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1386.                                         <span>2999元起<i>3999元</i></span>
  1387.                                     </li>
  1388.                                     <li>
  1389.                                         <img src="images/images/RedMi-tv/小米电视4A32英寸.png" alt="">
  1390.                                         <h5>RedmiK30Pro变焦版</h5>
  1391.                                         <p>天玑8100｜真旗舰芯</p>
  1392.                                         <span>2999元起</span>
  1393.                                     </li>
  1394.                                     <li>
  1395.                                         <img src="images/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">
  1396.                                         <h5>小米10Pro</h5>
  1397.                                         <p>天玑8100｜真旗舰芯</p>
  1398.                                         <span>2999元起</span>
  1399.                                     </li>
  1400.                                     <li>
  1401.                                         <img src="images/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
  1402.                                         <h5>小米9</h5>
  1403.                                         <p>天玑8100｜真旗舰芯</p>
  1404.                                         <span>2999元起<i>3999元</i></span>
  1405.                                     </li>
  1406.                                     <li class="more">
  1407.                                         <div class="lt">
  1408.                                             <h3>浏览更多</h3>
  1409.                                             <p>热门</p>
  1410.                                         </div>
  1411.                                         <div class="rt"><span></span></div>
  1412.                                     </li>
  1413.                                 </ul>
  1414.                             </div>
  1415.                         </div>
  1416.                     </div>
  1417.                     <div class="list-items">
  1418.                         <!-- text area-->
  1419.                         <div class="items-text">
  1420.                             <div class="text-l">
  1421.                                 <h2>生活电器</h2>
  1422.                             </div>
  1423.                             <div class="text-r">
  1424.                                 <ul>
  1425.                                     <li class="now"><a href="javascript:;">扫地机</a></li>
  1426.                                     <li><a href="javascript:;">空净</a></li>
  1427.                                     <li><a href="javascript:;">清洁</a></li>
  1428.                                     <li><a href="javascript:;">风扇</a></li>
  1429.                                 </ul>
  1430.                             </div>
  1431.                         </div>
  1432.                         <!-- img area-->
  1433.                         <div class="items-img">
  1434.                             <div class="img-l">
  1435.                                 <ul>
  1436.                                     <li><img src="images/images/bodyhomeimages/top1head.webp" alt=""></li>
  1437.                                     <li><img src="images/images/bodyhomeimages/top2head.webp" alt=""></li>
  1438.                                 </ul>
  1439.                             </div>
  1440.                             <div class="img-r">
  1441.                                 <ul class="block">
  1442.                                     <li>
  1443.                                         <img src="images/images/bodyhomeimages/小米扫地机.jpg" alt="">
  1444.                                         <h5>CC9定制</h5>
  1445.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1446.                                         <span>2999元起</span>
  1447.                                     </li>
  1448.                                     <li>
  1449.                                         <img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
  1450.                                         <h5>Mi10</h5>
  1451.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1452.                                         <span>2999元起<i>3999元</i></span>
  1453.                                     </li>
  1454.                                     <li>
  1455.                                         <img src="images/images/bodyhomeimages/智能拖地机.jpg" alt="">
  1456.                                         <h5>Redmi8</h5>
  1457.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1458.                                         <span>2999元起<i>3999元</i></span>
  1459.                                     </li>
  1460.                                     <li>
  1461.                                         <img src="images/images/bodyhomeimages/小米扫地机.jpg" alt="">
  1462.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1463.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1464.                                         <span>2999元起</span>
  1465.                                     </li>
  1466.                                     <li>
  1467.                                         <img src="images/images/bodyhomeimages/智能拖地机.jpg" alt="">
  1468.                                         <h5>RedmiK30Pro变焦版</h5>
  1469.                                         <p>天玑8100｜真旗舰芯</p>
  1470.                                         <span>2999元起</span>
  1471.                                     </li>
  1472.                                     <li>
  1473.                                         <img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
  1474.                                         <h5>小米10Pro</h5>
  1475.                                         <p>天玑8100｜真旗舰芯</p>
  1476.                                         <span>2999元起</span>
  1477.                                     </li>
  1478.                                     <li>
  1479.                                         <img src="images/images/bodyhomeimages/小米扫地机.jpg" alt="">
  1480.                                         <h5>小米9</h5>
  1481.                                         <p>天玑8100｜真旗舰芯</p>
  1482.                                         <span>2999元起<i>3999元</i></span>
  1483.                                     </li>
  1484.                                     <li class="more">
  1485.                                         <div class="lt">
  1486.                                             <h4>米家全自动波轮洗衣机8kg</h4>
  1487.                                             <i>399元</i>
  1488.                                         </div>
  1489.                                         <div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
  1490.                                     </li>
  1491.                                     <li class="more">
  1492.                                         <div class="lt">
  1493.                                             <h3>浏览更多</h3>
  1494.                                             <p>扫地机</p>
  1495.                                         </div>
  1496.                                         <div class="rt"><span></span></div>
  1497.                                     </li>
  1498.                                 </ul>
  1499.                                 <ul class="none">
  1500.                                     <li>
  1501.                                         <img src="images/images/bodyhomeimages/Redmi全自动波轮洗衣机1A.webp" alt="">
  1502.                                         <h5>CC9定制</h5>
  1503.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1504.                                         <span>2999元起</span>
  1505.                                     </li>
  1506.                                     <li>
  1507.                                         <img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
  1508.                                         <h5>Mi10</h5>
  1509.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1510.                                         <span>2999元起<i>3999元</i></span>
  1511.                                     </li>
  1512.                                     <li>
  1513.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1514.                                         <h5>Redmi8</h5>
  1515.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1516.                                         <span>2999元起<i>3999元</i></span>
  1517.                                     </li>
  1518.                                     <li>
  1519.                                         <img src="images/images/bodyhomeimages/米家空调.jpg" alt="">
  1520.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1521.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1522.                                         <span>2999元起</span>
  1523.                                     </li>
  1524.                                     <li>
  1525.                                         <img src="images/images/bodyhomeimages/米家空调1.jpg" alt="">
  1526.                                         <h5>RedmiK30Pro变焦版</h5>
  1527.                                         <p>天玑8100｜真旗舰芯</p>
  1528.                                         <span>2999元起</span>
  1529.                                     </li>
  1530.                                     <li>
  1531.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1532.                                         <h5>小米10Pro</h5>
  1533.                                         <p>天玑8100｜真旗舰芯</p>
  1534.                                         <span>2999元起</span>
  1535.                                     </li>
  1536.                                     <li>
  1537.                                         <img src="images/images/bodyhomeimages/米家互联网空调C1（一级能效）.webp" alt="">
  1538.                                         <h5>小米9</h5>
  1539.                                         <p>天玑8100｜真旗舰芯</p>
  1540.                                         <span>2999元起<i>3999元</i></span>
  1541.                                     </li>
  1542.                                     <li class="more">
  1543.                                         <div class="lt">
  1544.                                             <h4>米家全自动波轮洗衣机8kg</h4>
  1545.                                             <i>399元</i>
  1546.                                         </div>
  1547.                                         <div class="rt"><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt=""></div>
  1548.                                     </li>
  1549.                                     <li class="more">
  1550.                                         <div class="lt">
  1551.                                             <h3>浏览更多</h3>
  1552.                                             <p>空净</p>
  1553.                                         </div>
  1554.                                         <div class="rt"><span></span></div>
  1555.                                     </li>
  1556.                                 </ul>
  1557.                                 <ul class="none">
  1558.                                     <li>
  1559.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1560.                                         <h5>CC9定制</h5>
  1561.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1562.                                         <span>2999元起</span>
  1563.                                     </li>
  1564.                                     <li>
  1565.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1566.                                         <h5>Mi10</h5>
  1567.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1568.                                         <span>2999元起<i>3999元</i></span>
  1569.                                     </li>
  1570.                                     <li>
  1571.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1572.                                         <h5>Redmi8</h5>
  1573.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1574.                                         <span>2999元起<i>3999元</i></span>
  1575.                                     </li>
  1576.                                     <li>
  1577.                                         <img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
  1578.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1579.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1580.                                         <span>2999元起</span>
  1581.                                     </li>
  1582.                                     <li>
  1583.                                         <img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
  1584.                                         <h5>RedmiK30Pro变焦版</h5>
  1585.                                         <p>天玑8100｜真旗舰芯</p>
  1586.                                         <span>2999元起</span>
  1587.                                     </li>
  1588.                                     <li>
  1589.                                         <img src="images/images/小米Alpha/小米10Pro.webp" alt="">
  1590.                                         <h5>小米10Pro</h5>
  1591.                                         <p>天玑8100｜真旗舰芯</p>
  1592.                                         <span>2999元起</span>
  1593.                                     </li>
  1594.                                     <li>
  1595.                                         <img src="images/images/小米Alpha/小米9.JPG" alt="">
  1596.                                         <h5>小米9</h5>
  1597.                                         <p>天玑8100｜真旗舰芯</p>
  1598.                                         <span>2999元起<i>3999元</i></span>
  1599.                                     </li>
  1600.                                     <li class="more">
  1601.                                         <div class="lt">
  1602.                                             <h4>米家全自动波轮洗衣机8kg</h4>
  1603.                                             <i>399元</i>
  1604.                                         </div>
  1605.                                         <div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
  1606.                                     </li>
  1607.                                     <li class="more">
  1608.                                         <div class="lt">
  1609.                                             <h3>浏览更多</h3>
  1610.                                             <p>清洁</p>
  1611.                                         </div>
  1612.                                         <div class="rt"><span></span></div>
  1613.                                     </li>
  1614.                                 </ul>
  1615.                                 <ul class="none">
  1616.                                     <li>
  1617.                                         <img src="images/images/bodyhomeimages/小爱同学.jpg" alt="">
  1618.                                         <h5>CC9定制</h5>
  1619.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1620.                                         <span>2999元起</span>
  1621.                                     </li>
  1622.                                     <li>
  1623.                                         <img src="images/images/小米Alpha/Mi10.webp" alt="">
  1624.                                         <h5>Mi10</h5>
  1625.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1626.                                         <span>2999元起<i>3999元</i></span>
  1627.                                     </li>
  1628.                                     <li>
  1629.                                         <img src="images/images/小米Alpha/Redmi8.webp" alt="">
  1630.                                         <h5>Redmi8</h5>
  1631.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1632.                                         <span>2999元起<i>3999元</i></span>
  1633.                                     </li>
  1634.                                     <li>
  1635.                                         <img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
  1636.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1637.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1638.                                         <span>2999元起</span>
  1639.                                     </li>
  1640.                                     <li>
  1641.                                         <img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
  1642.                                         <h5>RedmiK30Pro变焦版</h5>
  1643.                                         <p>天玑8100｜真旗舰芯</p>
  1644.                                         <span>2999元起</span>
  1645.                                     </li>
  1646.                                     <li>
  1647.                                         <img src="images/images/小米Alpha/小米10Pro.webp" alt="">
  1648.                                         <h5>小米10Pro</h5>
  1649.                                         <p>天玑8100｜真旗舰芯</p>
  1650.                                         <span>2999元起</span>
  1651.                                     </li>
  1652.                                     <li>
  1653.                                         <img src="images/images/小米Alpha/小米9.JPG" alt="">
  1654.                                         <h5>小米9</h5>
  1655.                                         <p>天玑8100｜真旗舰芯</p>
  1656.                                         <span>2999元起<i>3999元</i></span>
  1657.                                     </li>
  1658.                                     <li class="more">
  1659.                                         <div class="lt">
  1660.                                             <h4>米家全自动波轮洗衣机8kg</h4>
  1661.                                             <i>399元</i>
  1662.                                         </div>
  1663.                                         <div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
  1664.                                     </li>
  1665.                                     <li class="more">
  1666.                                         <div class="lt">
  1667.                                             <h3>浏览更多</h3>
  1668.                                             <p>风扇</p>
  1669.                                         </div>
  1670.                                         <div class="rt"><span></span></div>
  1671.                                     </li>
  1672.                                 </ul>
  1673.                             </div>
  1674.                         </div>
  1675.                     </div>
  1676.                     <div class="top-box">
  1677.                         <a href="javascript:;"><img src="images/images/ate/titlebody.webp" alt=""></a>
  1678.                     </div>
  1679.                     <div class="list-items">
  1680.                         <!-- text area-->
  1681.                         <div class="items-text">
  1682.                             <div class="text-l">
  1683.                                 <h2>厨房电器</h2>
  1684.                             </div>
  1685.                             <div class="text-r">
  1686.                                 <ul>
  1687.                                     <li class="now"><a href="javascript:;">净水器</a></li>
  1688.                                     <li><a href="javascript:;">烟灶</a></li>
  1689.                                     <li><a href="javascript:;">电饭煲</a></li>
  1690.                                     <li><a href="javascript:;">微蒸烤</a></li>
  1691.                                 </ul>
  1692.                             </div>
  1693.                         </div>
  1694.                         <!-- img area-->
  1695.                         <div class="items-img">
  1696.                             <div class="img-l">
  1697.                                 <ul>
  1698.                                     <li><img src="images/img/kc_big1.png" alt=""></li>
  1699.                                     <li><img src="images/img/kc_big2.png" alt=""></li>
  1700.                                 </ul>
  1701.                             </div>
  1702.                             <div class="img-r">
  1703.                                 <ul class="block">
  1704.                                     <li>
  1705.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1706.                                         <h5>CC9定制</h5>
  1707.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1708.                                         <span>2999元起</span>
  1709.                                     </li>
  1710.                                     <li>
  1711.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1712.                                         <h5>Mi10</h5>
  1713.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1714.                                         <span>2999元起</span>
  1715.                                     </li>
  1716.                                     <li>
  1717.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1718.                                         <h5>Redmi8</h5>
  1719.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1720.                                         <span>2999元起<i>3999元</i></span>
  1721.                                     </li>
  1722.                                     <li>
  1723.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1724.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1725.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1726.                                         <span>2999元起<i>3999元</i></span>
  1727.                                     </li>
  1728.                                     <li>
  1729.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1730.                                         <h5>RedmiK30Pro变焦版</h5>
  1731.                                         <p>天玑8100｜真旗舰芯</p>
  1732.                                         <span>2999元起</span>
  1733.                                     </li>
  1734.                                     <li>
  1735.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1736.                                         <h5>小米10Pro</h5>
  1737.                                         <p>天玑8100｜真旗舰芯</p>
  1738.                                         <span>2999元起</span>
  1739.                                     </li>
  1740.                                     <li>
  1741.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1742.                                         <h5>小米9</h5>
  1743.                                         <p>天玑8100｜真旗舰芯</p>
  1744.                                         <span>2999元起<i>3999元</i></span>
  1745.                                     </li>
  1746.                                     <li class="more">
  1747.                                         <div class="lt">
  1748.                                             <h3>浏览更多</h3>
  1749.                                             <p>净水器</p>
  1750.                                         </div>
  1751.                                         <div class="rt"><span></span></div>
  1752.                                     </li>
  1753.                                 </ul>
  1754.                                 <ul class="none">
  1755.                                     <li>
  1756.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1757.                                         <h5>CC9定制</h5>
  1758.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1759.                                         <span>2999元起</span>
  1760.                                     </li>
  1761.                                     <li>
  1762.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1763.                                         <h5>Mi10</h5>
  1764.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1765.                                         <span>2999元起</span>
  1766.                                     </li>
  1767.                                     <li>
  1768.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1769.                                         <h5>Redmi8</h5>
  1770.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1771.                                         <span>2999元起<i>3999元</i></span>
  1772.                                     </li>
  1773.                                     <li>
  1774.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1775.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1776.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1777.                                         <span>2999元起<i>3999元</i></span>
  1778.                                     </li>
  1779.                                     <li class="more">
  1780.                                         <div class="lt">
  1781.                                             <h3>浏览更多</h3>
  1782.                                             <p>净水器</p>
  1783.                                         </div>
  1784.                                         <div class="rt"><span></span></div>
  1785.                                     </li>
  1786.                                 </ul>
  1787.                                 <ul class="none">
  1788.                                     <li>
  1789.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1790.                                         <h5>CC9定制</h5>
  1791.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1792.                                         <span>2999元起</span>
  1793.                                     </li>
  1794.                                     <li>
  1795.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1796.                                         <h5>Mi10</h5>
  1797.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1798.                                         <span>2999元起</span>
  1799.                                     </li>
  1800.                                     <li>
  1801.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1802.                                         <h5>Redmi8</h5>
  1803.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1804.                                         <span>2999元起<i>3999元</i></span>
  1805.                                     </li>
  1806.                                     <li>
  1807.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1808.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1809.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1810.                                         <span>2999元起<i>3999元</i></span>
  1811.                                     </li>
  1812.                                     <li>
  1813.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1814.                                         <h5>RedmiK30Pro变焦版</h5>
  1815.                                         <p>天玑8100｜真旗舰芯</p>
  1816.                                         <span>2999元起</span>
  1817.                                     </li>
  1818.                                     <li>
  1819.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1820.                                         <h5>小米10Pro</h5>
  1821.                                         <p>天玑8100｜真旗舰芯</p>
  1822.                                         <span>2999元起</span>
  1823.                                     </li>
  1824.                                     <li class="more">
  1825.                                         <div class="lt">
  1826.                                             <h3>浏览更多</h3>
  1827.                                             <p>净水器</p>
  1828.                                         </div>
  1829.                                         <div class="rt"><span></span></div>
  1830.                                     </li>
  1831.                                 </ul>
  1832.                                 <ul class="none">
  1833.                                     <li>
  1834.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1835.                                         <h5>CC9定制</h5>
  1836.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1837.                                         <span>2999元起</span>
  1838.                                     </li>
  1839.                                     <li>
  1840.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1841.                                         <h5>Mi10</h5>
  1842.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1843.                                         <span>2999元起</span>
  1844.                                     </li>
  1845.                                     <li>
  1846.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1847.                                         <h5>Redmi8</h5>
  1848.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1849.                                         <span>2999元起<i>3999元</i></span>
  1850.                                     </li>
  1851.                                     <li>
  1852.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1853.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1854.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1855.                                         <span>2999元起<i>3999元</i></span>
  1856.                                     </li>
  1857.                                     <li>
  1858.                                         <img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
  1859.                                         <h5>RedmiK30Pro变焦版</h5>
  1860.                                         <p>天玑8100｜真旗舰芯</p>
  1861.                                         <span>2999元起</span>
  1862.                                     </li>
  1863.                                     <li>
  1864.                                         <img src="images/images/home appliances/小米净水器.jpg" alt="">
  1865.                                         <h5>小米10Pro</h5>
  1866.                                         <p>天玑8100｜真旗舰芯</p>
  1867.                                         <span>2999元起</span>
  1868.                                     </li>
  1869.                                     <li class="more">
  1870.                                         <div class="lt">
  1871.                                             <h3>浏览更多</h3>
  1872.                                             <p>净水器</p>
  1873.                                         </div>
  1874.                                         <div class="rt"><span></span></div>
  1875.                                     </li>
  1876.                                 </ul>
  1877.                             </div>
  1878.                         </div>
  1879.                     </div>
  1880.                     <div class="list-items">
  1881.                         <!-- text area-->
  1882.                         <div class="items-text">
  1883.                             <div class="text-l">
  1884.                                 <h2>智能家居</h2>
  1885.                             </div>
  1886.                             <div class="text-r">
  1887.                                 <ul>
  1888.                                     <li class="now"><a href="javascript:;">小爱音箱</a></li>
  1889.                                     <li><a href="javascript:;">门锁</a></li>
  1890.                                     <li><a href="javascript:;">路由器</a></li>
  1891.                                     <li><a href="javascript:;">智能设备</a></li>
  1892.                                 </ul>
  1893.                             </div>
  1894.                         </div>
  1895.                         <!-- img area-->
  1896.                         <div class="items-img">
  1897.                             <div class="img-l">
  1898.                                 <ul>
  1899.                                     <li><img src="images/images/bodyhomeimages/top1head.webp" alt=""></li>
  1900.                                     <li><img src="images/images/bodyhomeimages/top2head.webp" alt=""></li>
  1901.                                 </ul>
  1902.                             </div>
  1903.                             <div class="img-r">
  1904.                                 <ul class="block">
  1905.                                     <li>
  1906.                                         <img src="images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
  1907.                                         <h5>CC9定制</h5>
  1908.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1909.                                         <span>2999元起</span>
  1910.                                     </li>
  1911.                                     <li>
  1912.                                         <img src="images/images/intelligent hardware/Redmi小爱音箱 Play.webp" alt="">
  1913.                                         <h5>Mi10</h5>
  1914.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1915.                                         <span>2999元起</span>
  1916.                                     </li>
  1917.                                     <li>
  1918.                                         <img src="images/images/intelligent hardware/小米小爱老师.jpg" alt="">
  1919.                                         <h5>Redmi8</h5>
  1920.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1921.                                         <span>2999元起<i>3999元</i></span>
  1922.                                     </li>
  1923.                                     <li>
  1924.                                         <img src="images/images/intelligent hardware/小米小爱触屏音箱.jpg" alt="">
  1925.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1926.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1927.                                         <span>2999元起</span>
  1928.                                     </li>
  1929.                                     <li>
  1930.                                         <img src="images/images/intelligent hardware/小米米家智能摄像机云台版.jpg" alt="">
  1931.                                         <h5>RedmiK30Pro变焦版</h5>
  1932.                                         <p>天玑8100｜真旗舰芯</p>
  1933.                                         <span>2999元起</span>
  1934.                                     </li>
  1935.                                     <li>
  1936.                                         <img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
  1937.                                         <h5>小米10Pro</h5>
  1938.                                         <p>天玑8100｜真旗舰芯</p>
  1939.                                         <span>2999元起<i>3999元</i></span>
  1940.                                     </li>
  1941.                                     <li>
  1942.                                         <img src="images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
  1943.                                         <h5>小米9</h5>
  1944.                                         <p>天玑8100｜真旗舰芯</p>
  1945.                                         <span>2999元起</span>
  1946.                                     </li>
  1947.                                     <li class="more">
  1948.                                         <div class="lt">
  1949.                                             <h4>米家全自动波轮洗衣机8kg</h4>
  1950.                                             <i>399元</i>
  1951.                                         </div>
  1952.                                         <div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
  1953.                                     </li>
  1954.                                     <li class="more">
  1955.                                         <div class="lt">
  1956.                                             <h3>浏览更多</h3>
  1957.                                             <p>小爱音箱</p>
  1958.                                         </div>
  1959.                                         <div class="rt"><span></span></div>
  1960.                                     </li>
  1961.                                 </ul>
  1962.                                 <ul class="none">
  1963.                                     <li>
  1964.                                         <img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
  1965.                                         <h5>CC9定制</h5>
  1966.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1967.                                         <span>2999元起</span>
  1968.                                     </li>
  1969.                                     <li>
  1970.                                         <img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
  1971.                                         <h5>Mi10</h5>
  1972.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1973.                                         <span>2999元起</span>
  1974.                                     </li>
  1975.                                     <li>
  1976.                                         <img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
  1977.                                         <h5>Redmi8</h5>
  1978.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1979.                                         <span>2999元起<i>3999元</i></span>
  1980.                                     </li>
  1981.                                     <li>
  1982.                                         <img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
  1983.                                         <h5>RedMiK30_Pro聚焦版</h5>
  1984.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  1985.                                         <span>2999元起</span>
  1986.                                     </li>
  1987.                                     <li>
  1988.                                         <img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
  1989.                                         <h5>RedmiK30Pro变焦版</h5>
  1990.                                         <p>天玑8100｜真旗舰芯</p>
  1991.                                         <span>2999元起</span>
  1992.                                     </li>
  1993.                                     <li>
  1994.                                         <img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
  1995.                                         <h5>小米10Pro</h5>
  1996.                                         <p>天玑8100｜真旗舰芯</p>
  1997.                                         <span>2999元起<i>3999元</i></span>
  1998.                                     </li>
  1999.                                     <li class="more">
  2000.                                         <div class="lt">
  2001.                                             <h3>浏览更多</h3>
  2002.                                             <p>门锁</p>
  2003.                                         </div>
  2004.                                         <div class="rt"><span></span></div>
  2005.                                     </li>
  2006.                                 </ul>
  2007.                                 <ul class="none">
  2008.                                     <li>
  2009.                                         <img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
  2010.                                         <h5>CC9定制</h5>
  2011.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2012.                                         <span>2999元起</span>
  2013.                                     </li>
  2014.                                     <li>
  2015.                                         <img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
  2016.                                         <h5>Mi10</h5>
  2017.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2018.                                         <span>2999元起</span>
  2019.                                     </li>
  2020.                                     <li>
  2021.                                         <img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
  2022.                                         <h5>Redmi8</h5>
  2023.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2024.                                         <span>2999元起<i>3999元</i></span>
  2025.                                     </li>
  2026.                                     <li>
  2027.                                         <img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
  2028.                                         <h5>RedMiK30_Pro聚焦版</h5>
  2029.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2030.                                         <span>2999元起</span>
  2031.                                     </li>
  2032.                                     <li>
  2033.                                         <img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
  2034.                                         <h5>RedmiK30Pro变焦版</h5>
  2035.                                         <p>天玑8100｜真旗舰芯</p>
  2036.                                         <span>2999元起</span>
  2037.                                     </li>
  2038.                                     <li>
  2039.                                         <img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
  2040.                                         <h5>小米10Pro</h5>
  2041.                                         <p>天玑8100｜真旗舰芯</p>
  2042.                                         <span>2999元起<i>3999元</i></span>
  2043.                                     </li>
  2044.                                     <li>
  2045.                                         <img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
  2046.                                         <h5>小米9</h5>
  2047.                                         <p>天玑8100｜真旗舰芯</p>
  2048.                                         <span>2999元起</span>
  2049.                                     </li>
  2050.                                     <li class="more">
  2051.                                         <div class="lt">
  2052.                                             <h4>米家全自动波轮洗衣机8kg</h4>
  2053.                                             <i>399元</i>
  2054.                                         </div>
  2055.                                         <div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
  2056.                                     </li>
  2057.                                     <li class="more">
  2058.                                         <div class="lt">
  2059.                                             <h3>浏览更多</h3>
  2060.                                             <p>路由器</p>
  2061.                                         </div>
  2062.                                         <div class="rt"><span></span></div>
  2063.                                     </li>
  2064.                                 </ul>
  2065.                                 <ul class="none">
  2066.                                     <li>
  2067.                                         <img src="images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
  2068.                                         <h5>CC9定制</h5>
  2069.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2070.                                         <span>2999元起</span>
  2071.                                     </li>
  2072.                                     <li>
  2073.                                         <img src="images/images/intelligent hardware/Redmi小爱音箱 Play.webp" alt="">
  2074.                                         <h5>Mi10</h5>
  2075.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2076.                                         <span>2999元起</span>
  2077.                                     </li>
  2078.                                     <li>
  2079.                                         <img src="images/images/intelligent hardware/小米小爱老师.jpg" alt="">
  2080.                                         <h5>Redmi8</h5>
  2081.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2082.                                         <span>2999元起<i>3999元</i></span>
  2083.                                     </li>
  2084.                                     <li>
  2085.                                         <img src="images/images/intelligent hardware/小米小爱触屏音箱.jpg" alt="">
  2086.                                         <h5>RedMiK30_Pro聚焦版</h5>
  2087.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2088.                                         <span>2999元起</span>
  2089.                                     </li>
  2090.                                     <li>
  2091.                                         <img src="images/images/intelligent hardware/小米米家智能摄像机云台版.jpg" alt="">
  2092.                                         <h5>RedmiK30Pro变焦版</h5>
  2093.                                         <p>天玑8100｜真旗舰芯</p>
  2094.                                         <span>2999元起</span>
  2095.                                     </li>
  2096.                                     <li>
  2097.                                         <img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
  2098.                                         <h5>小米10Pro</h5>
  2099.                                         <p>天玑8100｜真旗舰芯</p>
  2100.                                         <span>2999元起<i>3999元</i></span>
  2101.                                     </li>
  2102.                                     <li>
  2103.                                         <img src="images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
  2104.                                         <h5>小米9</h5>
  2105.                                         <p>天玑8100｜真旗舰芯</p>
  2106.                                         <span>2999元起</span>
  2107.                                     </li>
  2108.                                     <li class="more">
  2109.                                         <div class="lt">
  2110.                                             <h4>米家全自动波轮洗衣机8kg</h4>
  2111.                                             <i>399元</i>
  2112.                                         </div>
  2113.                                         <div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
  2114.                                     </li>
  2115.                                     <li class="more">
  2116.                                         <div class="lt">
  2117.                                             <h3>浏览更多</h3>
  2118.                                             <p>小爱音箱</p>
  2119.                                         </div>
  2120.                                         <div class="rt"><span></span></div>
  2121.                                     </li>
  2122.                                 </ul>
  2123.                             </div>
  2124.                         </div>
  2125.                     </div>
  2126.                     <div class="list-items">
  2127.                         <!-- text area-->
  2128.                         <div class="items-text">
  2129.                             <div class="text-l">
  2130.                                 <h2>运动出行</h2>
  2131.                             </div>
  2132.                             <div class="text-r">
  2133.                                 <ul>
  2134.                                     <li class="now"><a href="javascript:;">平衡车/滑板车</a></li>
  2135.                                     <li><a href="javascript:;">运动健身</a></li>
  2136.                                     <li><a href="javascript:;">箱包配饰</a></li>
  2137.                                     <li><a href="javascript:;">出行工具</a></li>
  2138.                                 </ul>
  2139.                             </div>
  2140.                         </div>
  2141.                         <!-- img area-->
  2142.                         <div class="items-img">
  2143.                             <div class="img-l">
  2144.                                 <ul>
  2145.                                     <li><img src="images/img/sp_big1.png" alt=""></li>
  2146.                                     <li><img src="images/img/sp_big2.png" alt=""></li>
  2147.                                 </ul>
  2148.                             </div>
  2149.                             <div class="img-r">
  2150.                                 <ul class="block">
  2151.                                     <li>
  2152.                                         <img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
  2153.                                         <h5>CC9定制</h5>
  2154.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2155.                                         <span>2999元起<i>3999元</i></span>
  2156.                                     </li>
  2157.                                     <li>
  2158.                                         <img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
  2159.                                         <h5>Mi10</h5>
  2160.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2161.                                         <span>2999元起</span>
  2162.                                     </li>
  2163.                                     <li>
  2164.                                         <img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
  2165.                                         <h5>Redmi8</h5>
  2166.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2167.                                         <span>2999元起</span>
  2168.                                     </li>
  2169.                                     <li>
  2170.                                         <img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
  2171.                                         <h5>RedMiK30_Pro聚焦版</h5>
  2172.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2173.                                         <span>2999元起<i>3999元</i></span>
  2174.                                     </li>
  2175.                                     <li>
  2176.                                         <img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
  2177.                                         <h5>RedmiK30Pro变焦版</h5>
  2178.                                         <p>天玑8100｜真旗舰芯</p>
  2179.                                         <span>2999元起</span>
  2180.                                     </li>
  2181.                                     <li>
  2182.                                         <img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
  2183.                                         <h5>小米10Pro</h5>
  2184.                                         <p>天玑8100｜真旗舰芯</p>
  2185.                                         <span>2999元起</span>
  2186.                                     </li>
  2187.                                     <li>
  2188.                                         <img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
  2189.                                         <h5>小米9</h5>
  2190.                                         <p>天玑8100｜真旗舰芯</p>
  2191.                                         <span>2999元起<i>3999元</i></span>
  2192.                                     </li>
  2193.                                     <li class="more">
  2194.                                         <div class="lt">
  2195.                                             <h4>米家全自动波轮洗衣机8kg</h4>
  2196.                                             <i>399元</i>
  2197.                                         </div>
  2198.                                         <div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
  2199.                                     </li>
  2200.                                     <li class="more">
  2201.                                         <div class="lt">
  2202.                                             <h3>浏览更多</h3>
  2203.                                             <p>平衡车/滑板车</p>
  2204.                                         </div>
  2205.                                         <div class="rt"><span></span></div>
  2206.                                     </li>
  2207.                                 </ul>
  2208.                                 <ul class="none">
  2209.                                     <li>
  2210.                                         <img src="images/img/smartwearul7.png" alt="">
  2211.                                         <h5>黑鲨Pro</h5>
  2212.                                         <p>天玑8100｜真旗舰芯</p>
  2213.                                         <span>2999元起<i>3999元</i></span>
  2214.                                     </li>
  2215.                                     <li class="more">
  2216.                                         <div class="lt">
  2217.                                             <h3>浏览更多</h3>
  2218.                                             <p>运动健身</p>
  2219.                                         </div>
  2220.                                         <div class="rt"><span></span></div>
  2221.                                     </li>
  2222.                                 </ul>
  2223.                                 <ul class="none">
  2224.                                     <li>
  2225.                                         <img src="images/img/smartwearul7.png" alt="">
  2226.                                         <h5>黑鲨Pro</h5>
  2227.                                         <p>天玑8100｜真旗舰芯</p>
  2228.                                         <span>2999元起<i>3999元</i></span>
  2229.                                     </li>
  2230.                                     <li class="more">
  2231.                                         <div class="lt">
  2232.                                             <h3>浏览更多</h3>
  2233.                                             <p>箱包配饰</p>
  2234.                                         </div>
  2235.                                         <div class="rt"><span></span></div>
  2236.                                     </li>
  2237.                                 </ul>
  2238.                                 <ul class="none">
  2239.                                     <li>
  2240.                                         <img src="images/img/smartwearul7.png" alt="">
  2241.                                         <h5>黑鲨Pro</h5>
  2242.                                         <p>天玑8100｜真旗舰芯</p>
  2243.                                         <span>2999元起<i>3999元</i></span>
  2244.                                     </li>
  2245.                                     <li class="more">
  2246.                                         <div class="lt">
  2247.                                             <h3>浏览更多</h3>
  2248.                                             <p>出行工具</p>
  2249.                                         </div>
  2250.                                         <div class="rt"><span></span></div>
  2251.                                     </li>
  2252.                                 </ul>
  2253.                             </div>
  2254.                         </div>
  2255.                     </div>
  2256.                     <div class="top-box">
  2257.                         <a href="javascript:;"><img src="images/images/第六部分images/titleimages.webp" alt=""></a>
  2258.                     </div>
  2259.                     <div class="list-items">
  2260.                         <!-- text area-->
  2261.                         <div class="items-text">
  2262.                             <div class="text-l">
  2263.                                 <h2>日用百货</h2>
  2264.                             </div>
  2265.                             <div class="text-r">
  2266.                                 <ul>
  2267.                                     <li class="now"><a href="javascript:;">个护健康</a></li>
  2268.                                     <li><a href="javascript:;">电源/线材</a></li>
  2269.                                     <li><a href="javascript:;">儿童用品</a></li>
  2270.                                     <li><a href="javascript:;">家居床品</a></li>
  2271.                                 </ul>
  2272.                             </div>
  2273.                         </div>
  2274.                         <!-- img area-->
  2275.                         <div class="items-img">
  2276.                             <div class="img-l">
  2277.                                 <ul>
  2278.                                     <li><img src="images/img/du_big1.png" alt=""></li>
  2279.                                     <li><img src="images/img/du_big2.png" alt=""></li>
  2280.                                 </ul>
  2281.                             </div>
  2282.                             <div class="img-r">
  2283.                                 <ul class="block">
  2284.                                     <li>
  2285.                                         <img src="images/images/小米Alpha/CC9定制.jpg" alt="">
  2286.                                         <h5>CC9定制</h5>
  2287.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2288.                                         <span>2999元起<i>3999元</i></span>
  2289.                                     </li>
  2290.                                     <li>
  2291.                                         <img src="images/images/小米Alpha/Mi10.webp" alt="">
  2292.                                         <h5>Mi10</h5>
  2293.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2294.                                         <span>2999元起</span>
  2295.                                     </li>
  2296.                                     <li>
  2297.                                         <img src="images/images/小米Alpha/Redmi8.webp" alt="">
  2298.                                         <h5>Redmi8</h5>
  2299.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2300.                                         <span>2999元起<i>3999元</i></span>
  2301.                                     </li>
  2302.                                     <li>
  2303.                                         <img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
  2304.                                         <h5>RedMiK30_Pro聚焦版</h5>
  2305.                                         <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  2306.                                         <span>2999元起</span>
  2307.                                     </li>
  2308.                                     <li>
  2309.                                         <img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
  2310.                                         <h5>RedmiK30Pro变焦版</h5>
  2311.                                         <p>天玑8100｜真旗舰芯</p>
  2312.                                         <span>2999元起</span>
  2313.                                     </li>
  2314.                                     <li>
  2315.                                         <img src="images/images/小米Alpha/小米10Pro.webp" alt="">
  2316.                                         <h5>小米10Pro</h5>
  2317.                                         <p>天玑8100｜真旗舰芯</p>
  2318.                                         <span>2999元起<i>3999元</i></span>
  2319.                                     </li>
  2320.                                     <li>
  2321.                                         <img src="images/images/小米Alpha/小米9.JPG" alt="">
  2322.                                         <h5>小米9</h5>
  2323.                                         <p>天玑8100｜真旗舰芯</p>
  2324.                                         <span>2999元起</span>
  2325.                                     </li>
  2326.                                     <li class="more">
  2327.                                         <div class="lt">
  2328.                                             <h4>米家全自动波轮洗衣机8kg</h4>
  2329.                                             <i>399元</i>
  2330.                                         </div>
  2331.                                         <div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
  2332.                                     </li>
  2333.                                     <li class="more">
  2334.                                         <div class="lt">
  2335.                                             <h3>浏览更多</h3>
  2336.                                             <p>个护健康</p>
  2337.                                         </div>
  2338.                                         <div class="rt"><span></span></div>
  2339.                                     </li>
  2340.                                 </ul>
  2341.                                 <ul class="none">
  2342.                                     <li>
  2343.                                         <img src="images/img/smartwearul7.png" alt="">
  2344.                                         <h5>黑鲨Pro</h5>
  2345.                                         <p>天玑8100｜真旗舰芯</p>
  2346.                                         <span>2999元起<i>3999元</i></span>
  2347.                                     </li>
  2348.                                     <li class="more">
  2349.                                         <div class="lt">
  2350.                                             <h3>浏览更多</h3>
  2351.                                             <p>电源/线材</p>
  2352.                                         </div>
  2353.                                         <div class="rt"><span></span></div>
  2354.                                     </li>
  2355.                                 </ul>
  2356.                                 <ul class="none">
  2357.                                     <li>
  2358.                                         <img src="images/img/smartwearul7.png" alt="">
  2359.                                         <h5>黑鲨Pro</h5>
  2360.                                         <p>天玑8100｜真旗舰芯</p>
  2361.                                         <span>2999元起<i>3999元</i></span>
  2362.                                     </li>
  2363.                                     <li class="more">
  2364.                                         <div class="lt">
  2365.                                             <h3>浏览更多</h3>
  2366.                                             <p>儿童用品</p>
  2367.                                         </div>
  2368.                                         <div class="rt"><span></span></div>
  2369.                                     </li>
  2370.                                 </ul>
  2371.                                 <ul class="none">
  2372.                                     <li>
  2373.                                         <img src="images/img/smartwearul7.png" alt="">
  2374.                                         <h5>黑鲨Pro</h5>
  2375.                                         <p>天玑8100｜真旗舰芯</p>
  2376.                                         <span>2999元起<i>3999元</i></span>
  2377.                                     </li>
  2378.                                     <li class="more">
  2379.                                         <div class="lt">
  2380.                                             <h3>浏览更多</h3>
  2381.                                             <p>家居床品</p>
  2382.                                         </div>
  2383.                                         <div class="rt"><span></span></div>
  2384.                                     </li>
  2385.                                 </ul>
  2386.                             </div>
  2387.                         </div>
  2388.                     </div>
  2389.                     <div class="list-items">
  2390.                         <!-- text area-->
  2391.                         <div class="items-text">
  2392.                             <div class="text-l">
  2393.                                 <h2>视频</h2>
  2394.                             </div>
  2395.                             <div class="text-r">
  2396.                                 <p>查看全部</p>
  2397.                                 <span></span>
  2398.                             </div>
  2399.                         </div>
  2400.                         <!-- vidio area-->
  2401.                         <div class="items-vidio">
  2402.                             <ul>
  2403.                                 <li>
  2404.                                     <video controls="controls" muted></video>
  2405.                                     <p>2021年春季新品发布会第一场</p>
  2406.                                 </li>
  2407.                                 <li>
  2408.                                     <video controls="controls" muted></video>
  2409.                                     <p>2021年春季新品发布会第一场</p>
  2410.                                 </li>
  2411.                                 <li>
  2412.                                     <video controls="controls" muted></video>
  2413.                                     <p>2021年春季新品发布会第一场</p>
  2414.                                 </li>
  2415.                                 <li>
  2416.                                     <video controls="controls" muted></video>
  2417.                                     <p>2021年春季新品发布会第一场</p>
  2418.                                 </li>
  2419.                             </ul>
  2420.                         </div>
  2421.                     </div>
  2422.                 </div>
  2423.                 <!-- 底部模块 -->
  2424.             </div>
  2425.         </div>
  2426.         <!-- 下 -->
  2427.         <div class="lower">
  2428.             <!-- 服务模块 -->
  2429.             <div class="server w">
  2430.                 <div class="uhalf">
  2431.                     <ul>
  2432.                         <li>
  2433.                             <span class="repair">预约维修服务</span>
  2434.                         </li>
  2435.                         <li>
  2436.                             <span class="return">7天无理由退货</span>
  2437.                         </li>
  2438.                         <li>
  2439.                             <span class="exchange">15天免费换货</span>
  2440.                         </li>
  2441.                         <li>
  2442.                             <span class="ship">满69元包邮</span>
  2443.                         </li>
  2444.                         <li>
  2445.                             <span class="sales">1100余家售后网点</span>
  2446.                         </li>
  2447.                     </ul>
  2448.                 </div>
  2449.                 <div class="lhalf">
  2450.                     <div class="ltnav">
  2451.                         <ul>
  2452.                             <li>
  2453.                                 <h4>选购指南</h4>
  2454.                             </li>
  2455.                             <li><a href="javascript:;">手机</a></li>
  2456.                             <li><a href="javascript:;">电视</a></li>
  2457.                             <li><a href="javascript:;">笔记本</a></li>
  2458.                             <li><a href="javascript:;">平板</a></li>
  2459.                             <li><a href="javascript:;">穿戴</a></li>
  2460.                             <li><a href="javascript:;">耳机</a></li>
  2461.                             <li><a href="javascript:;">家电</a></li>
  2462.                             <li><a href="javascript:;">路由器</a></li>
  2463.                             <li><a href="javascript:;">音箱</a></li>
  2464.                             <li><a href="javascript:;">配件</a></li>
  2465.                         </ul>
  2466.                         <ul>
  2467.                             <li>
  2468.                                 <h4>服务中心</h4>
  2469.                             </li>
  2470.                             <li><a href="javascript:;">申请售后</a></li>
  2471.                             <li><a href="javascript:;">售后政策</a></li>
  2472.                             <li><a href="javascript:;">维修服务价格</a></li>
  2473.                             <li><a href="javascript:;">订单查询</a></li>
  2474.                             <li><a href="javascript:;">以旧换新</a></li>
  2475.                             <li><a href="javascript:;">保障服务</a></li>
  2476.                             <li><a href="javascript:;">防伪查询</a></li>
  2477.                             <li><a href="javascript:;">F码通道</a></li>
  2478.                         </ul>
  2479.                         <ul>
  2480.                             <li>
  2481.                                 <h4>线下门店</h4>
  2482.                             </li>
  2483.                             <li><a href="javascript:;">小米之家</a></li>
  2484.                             <li><a href="javascript:;">服务网点</a></li>
  2485.                             <li><a href="javascript:;">授权体验店/专区</a></li>
  2486.                         </ul>
  2487.                         <ul>
  2488.                             <li>
  2489.                                 <h4>关于小米</h4>
  2490.                             </li>
  2491.                             <li><a href="javascript:;">了解小米</a></li>
  2492.                             <li><a href="javascript:;">加入小米</a></li>
  2493.                             <li><a href="javascript:;">投资者关系</a></li>
  2494.                             <li><a href="javascript:;">环境，社会及管治</a></li>
  2495.                             <li><a href="javascript:;">廉洁举报</a></li>
  2496.                         </ul>
  2497.                         <ul>
  2498.                             <li>
  2499.                                 <h4>关注我们</h4>
  2500.                             </li>
  2501.                             <li><a href="javascript:;">新浪微博</a></li>
  2502.                             <li><a href="javascript:;">官方微信</a></li>
  2503.                             <li><a href="javascript:;">联系我们</a></li>
  2504.                             <li><a href="javascript:;">公益基金会</a></li>
  2505.                         </ul>
  2506.                     </div>
  2507.                     <div class="rtbut">
  2508.                         <h3>400-100-5678</h3>
  2509.                         <p>8:00-18:00（仅收市话费）</p>
  2510.                         <button>人工客服</button>
  2511.                     </div>
  2512.                 </div>
  2513.             </div>
  2514.             <!-- footer模块 -->
  2515.             <div class="footer">
  2516.                 <div class="w">
  2517.                     <!-- 左侧logo -->
  2518.                     <div class="footer-left l">
  2519.                         <div class="logo">
  2520.                             <img src="images/This_is_tow_Mi.png" alt="">
  2521.                         </div>
  2522.                     </div>
  2523.                     <!-- 右侧内容 -->
  2524.                     <div class="footer-right l">
  2525.                         <div class="footer-content">
  2526.                             <ul>
  2527.                                 <li><a href="javascript:;">小米商城</a>
  2528.                                     <span>|</span>
  2529.                                 </li>
  2530.                                 <li><a href="javascript:;">MIUI</a>
  2531.                                     <span>|</span>
  2532.                                 </li>
  2533.                                 <li><a href="javascript:;">米家</a>
  2534.                                     <span>|</span>
  2535.                                 </li>
  2536.                                 <li><a href="javascript:;">米聊</a>
  2537.                                     <span>|</span>
  2538.                                 </li>
  2539.                                 <li><a href="javascript:;">多看</a>
  2540.                                     <span>|</span>
  2541.                                 </li>
  2542.                                 <li><a href="javascript:;">游戏</a>
  2543.                                     <span>|</span>
  2544.                                 </li>
  2545.                                 <li><a href="javascript:;">政企服务</a>
  2546.                                     <span>|</span>
  2547.                                 </li>
  2548.                                 <li><a href="javascript:;">小米天猫店</a>
  2549.                                     <span>|</span>
  2550.                                 </li>
  2551.                                 <li><a href="javascript:;">小米集团隐私政策</a>
  2552.                                     <span>|</span>
  2553.                                 </li>
  2554.                                 <li><a href="javascript:;">小米公司儿童信息保护规则</a>
  2555.                                     <span>|</span>
  2556.                                 </li>
  2557.                                 <li><a href="javascript:;">小米商城隐私政策</a>
  2558.                                     <span>|</span>
  2559.                                 </li>
  2560.                                 <li><a href="javascript:;">小米商城用户协议</a>
  2561.                                     <span>|</span>
  2562.                                 </li>
  2563.                                 <li><a href="javascript:;">问题反馈</a>
  2564.                                     <span>|</span>
  2565.                                 </li>
  2566.                                 <li><a href="javascript:;">Select Location</a>
  2567.                                 </li>
  2568.                             </ul>
  2569.                             <ul>
  2570.                                 <li><a href="javascript:;">北京互联网法院法律服务工作站</a>
  2571.                                     <span>|</span>
  2572.                                 </li>
  2573.                                 <li><a href="javascript:;">中国消费者协会</a>
  2574.                                     <span>|</span>
  2575.                                 </li>
  2576.                                 <li><a href="javascript:;">北京市消费者协会</a>
  2577.                                 </li>
  2578.                             </ul>
  2579.                             <ul>
  2580.                                 <li>
  2581.                                     <span>&copy; mi.com</span>
  2582.                                 </li>
  2583.                                 <li>
  2584.                                     <span>京ICP证110507号</span>
  2585.                                 </li>
  2586.                                 <li>
  2587.                                     <span>京ICP备10046444号</span>
  2588.                                 </li>
  2589.                                 <li>
  2590.                                     <span>京公网安备11010802020134号</span>
  2591.                                 </li>
  2592.                                 <li>
  2593.                                     <span>京网文[2020]0276-042号</span>
  2594.                                 </li>
  2595.                             </ul>
  2596.                             <ul>
  2597.                                 <li>
  2598.                                     <span>（京）网械平台备字（2018）第00005号</span>
  2599.                                 </li>
  2600.                                 <li>
  2601.                                     <span>互联网药品信息服务资格证(京)-非经营性-2014-0090</span>
  2602.                                 </li>
  2603.                                 <li>
  2604.                                     <span>营业执照</span>
  2605.                                 </li>
  2606.                                 <li>
  2607.                                     <span>医疗器械质量公告</span>
  2608.                                 </li>
  2609.                             </ul>
  2610.                             <ul>
  2611.                                 <li>
  2612.                                     <span>增值电信业务许可证</span>
  2613.                                 </li>
  2614.                                 <li>
  2615.                                     <span>网络食品经营备案</span>
  2616.                                 </li>
  2617.                                 <li>
  2618.                                     <span>京食药网食备202010048</span>
  2619.                                 </li>
  2620.                                 <li>
  2621.                                     <span>食品经营许可证</span>
  2622.                                 </li>
  2623.                             </ul>
  2624.                             <ul>
  2625.                                 <li>
  2626.                                     <span>违法和不良信息举报电话：171-5104-4404</span>
  2627.                                 </li>
  2628.                                 <li>
  2629.                                     <span>知识产权侵权投诉</span>
  2630.                                 </li>
  2631.                                 <li>
  2632.                                     <span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
  2633.                                 </li>
  2634.                             </ul>
  2635.                             <ul>
  2636.                                 <li><img src="images/foot.png" alt=""></li>
  2637.                             </ul>
  2638.                             <!-- 底部文字 -->
  2639.                             <div class="root">
  2640.                                 <p>让全球每个人都能享受科技带来的美好生活</p>
  2641.                             </div>
  2642.                         </div>
  2643.                     </div>
  2644.                 </div>
  2645.             </div>
  2646.         </div>
  2647.     </div>
  2648. </body>
  2649.  
  2650. </html>

index.css：

  1. @font-face {
  2.     font-family: 'icomoon';
  3.     src: url('../fonts/icomoon.eot?7kkyc2');
  4.     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');
  5.     font-weight: normal;
  6.     font-style: normal;
  7. }
  8.  
  9. * {
  10.     margin: 0;
  11.     padding: 0;
  12. }
  13.  
  14. .div {
  15.     width: 100%;
  16.     height: 100%;
  17.     /* background-color: #f5f5f5; */
  18. }
  19.  
  20. .w {
  21.     width: 1226px;
  22.     margin: 0 auto;
  23.     /* overflow: hidden; */
  24. }
  25.  
  26. a {
  27.     text-decoration: none;
  28.     color: #333;
  29. }
  30.  
  31. ul li {
  32.     list-style: none;
  33.     float: left;
  34.     cursor: pointer;
  35. }
  36.  
  37. .upper {
  38.     width: 100%;
  39.     height: 100%;
  40.     background-color: #fff;
  41. }
  42.  
  43. .l {
  44.     float: left;
  45. }
  46.  
  47. .r {
  48.     float: right;
  49. }
  50.  
  51. i {
  52.     font-style: normal;
  53. }
  54.  
  55.  
  56. /* 顶部导航栏  */
  57.  
  58. .top {
  59.     position: relative;
  60.     height: 40px;
  61.     background: #333;
  62. }
  63.  
  64. .top ul li {
  65.     height: 40px;
  66.     line-height: 40px;
  67. }
  68.  
  69. .top ul li a {
  70.     font-size: 12px;
  71.     color: #b0b0b0;
  72. }
  73.  
  74. .top ul li:hover a {
  75.     color: #fff;
  76. }
  77.  
  78. .top ul li span {
  79.     color: #423c37;
  80.     margin-right: 5px;
  81. }
  82.  
  83. .top .shopcar {
  84.     display: flex;
  85.     position: relative;
  86.     background: #424242;
  87.     margin: 0 0 0 25px;
  88.     padding-right: 15px;
  89.     align-items: center;
  90. }
  91.  
  92. .top .shopcar img {
  93.     width: 20px;
  94.     vertical-align: middle;
  95.     margin: 0 5px 0 15px;
  96. }
  97.  
  98. .shopcar .in-car {
  99.     position: absolute;
  100.     top: 40px;
  101.     right: 0;
  102.     width: 316px;
  103.     height: 0;
  104.     background-color: #fff;
  105.     text-align: center;
  106.     line-height: 100px;
  107.     font-size: 12px;
  108.     color: #424242;
  109.     box-shadow: 0px 10px 15px -5px #999;
  110.     z-index: 1;
  111.     transition: all .5s ease;
  112.     overflow: hidden;
  113. }
  114.  
  115. .shopcar .incar-height {
  116.     height: 100px;
  117. }
  118.  
  119.  
  120. /* 二维码 */
  121.  
  122. .top-left ul {
  123.     position: relative;
  124. }
  125.  
  126. .top-left .xiaomi {
  127.     position: absolute;
  128.     top: 40px;
  129.     left: -40px;
  130.     width: 125px;
  131.     height: 0px;
  132.     background-color: #fff;
  133.     text-align: center;
  134.     box-shadow: 0 5px 10px 0 #999;
  135.     z-index: 1;
  136.     transition: all .5s ease;
  137.     overflow: hidden;
  138. }
  139.  
  140. .top-left .xm-height {
  141.     height: 150px;
  142. }
  143.  
  144. .top-left .xiaomi img {
  145.     width: 85px;
  146.     height: 85px;
  147.     margin: 20px 0 -10px;
  148. }
  149.  
  150. .top-left .xiaomi p {
  151.     font-size: 13px;
  152. }
  153.  
  154. .download {
  155.     position: relative;
  156. }
  157.  
  158. .top-left .download .triangle {
  159.     display: none;
  160.     position: absolute;
  161.     bottom: -3px;
  162.     left: 12px;
  163.     width: 0;
  164.     height: 0;
  165.     border: 10px solid transparent;
  166.     border-color: transparent transparent #fff transparent;
  167. }
  168.  
  169.  
  170. /* 侧边栏  */
  171.  
  172. .sidebar {
  173.     position: fixed;
  174.     bottom: 30px;
  175.     right: 0;
  176.     z-index: 99;
  177. }
  178.  
  179. .side-list {
  180.     position: relative;
  181.     display: flex;
  182.     align-items: center;
  183.     flex-direction: column;
  184.     justify-content: space-evenly;
  185.     width: 80px;
  186.     height: 90px;
  187.     border: 1px solid #f5f5f5;
  188.     background-color: #fff;
  189.     margin-bottom: -1px;
  190. }
  191.  
  192. .backtop {
  193.     margin-top: 15px;
  194.     cursor: pointer;
  195. }
  196.  
  197. .side-list:hover p {
  198.     transition: all .5s ease;
  199. }
  200.  
  201. .side-list:hover {
  202.     transition: all .5s ease;
  203. }
  204.  
  205. .side-list img {
  206.     width: 30px;
  207. }
  208.  
  209. .side-list p {
  210.     color: #757575;
  211.     font-size: 14px;
  212. }
  213.  
  214. .scan {
  215.     display: none;
  216.     position: absolute;
  217.     top: 0;
  218.     right: 95px;
  219.     width: 130px;
  220.     height: 192px;
  221.     text-align: center;
  222.     background-color: #fff;
  223.     border: 1px solid #f5f5f5;
  224.     transition: all .5s ease;
  225.     z-index: 1;
  226. }
  227.  
  228. .scan:before {
  229.     width: 0px;
  230.     height: 0px;
  231.     position: absolute;
  232.     top: 45px;
  233.     right: -16px;
  234.     padding: 0;
  235.     border: 8px solid transparent;
  236.     border-color: transparent transparent transparent #fff;
  237.     content: '';
  238.     z-index: 2;
  239. }
  240.  
  241. .scan:after {
  242.     width: 0px;
  243.     height: 0px;
  244.     position: absolute;
  245.     top: 44px;
  246.     right: -18px;
  247.     padding: 0;
  248.     border: 9px solid transparent;
  249.     border-color: transparent transparent transparent #f5f5f5;
  250.     content: '';
  251.     z-index: 1;
  252. }
  253.  
  254. .scan img {
  255.     width: 95px;
  256.     margin-top: 20px;
  257. }
  258.  
  259. .scan p {
  260.     width: 80px;
  261.     margin: 15px auto;
  262.     color: #757575;
  263.     font-size: 14px;
  264. }
  265.  
  266.  
  267. /* 头部 */
  268.  
  269. .head {
  270.     position: relative;
  271. }
  272.  
  273. .head-nav {
  274.     display: flex;
  275.     align-items: center;
  276.     height: 100px;
  277. }
  278.  
  279.  
  280. /* logo */
  281.  
  282. .logo {
  283.     display: flex;
  284.     justify-content: space-around;
  285.     align-items: center;
  286.     width: 55px;
  287.     height: 55px;
  288.     background-color: #ff6a00;
  289.     border-radius: 20px;
  290. }
  291.  
  292.  
  293. /* 导航 */
  294.  
  295. .head-nav-nav {
  296.     display: flex;
  297.     align-items: center;
  298.     height: 100%;
  299.     margin-left: 180px;
  300. }
  301.  
  302. .head-nav-nav .ul-list li {
  303.     display: flex;
  304.     align-items: center;
  305.     height: 100px;
  306. }
  307.  
  308. .head-nav-nav .ul-list li a {
  309.     padding: 0 10px;
  310.     color: #333;
  311. }
  312.  
  313. .head-nav-nav .hn-cont {
  314.     position: absolute;
  315.     top: 100px;
  316.     left: -340px;
  317.     width: 1901px;
  318.     height: 0;
  319.     background: #fff;
  320.     border-top: 1px solid #e0e0e0;
  321.     border-bottom: 1px solid #e0e0e0;
  322.     box-shadow: 0 5px 10px -5px #ddd;
  323.     z-index: 5;
  324.     overflow: hidden;
  325.     transition: all .5s ease;
  326. }
  327.  
  328. .head-nav-nav .hidden {
  329.     border: hidden;
  330. }
  331.  
  332. .hn-cont .cont-items {
  333.     position: absolute;
  334.     left: 340px;
  335.     height: 230px;
  336.     background: #fff;
  337.     z-index: 5;
  338.     transition: all .5s ease;
  339. }
  340.  
  341. .head-nav-nav .hnc-height {
  342.     height: 230px;
  343. }
  344.  
  345. .hn-cont .cont-items li {
  346.     display: block;
  347.     float: left;
  348.     width: 180px;
  349.     margin: 0;
  350.     padding: 35px 12px 0;
  351.     text-align: center;
  352.     font-size: 12px;
  353.     line-height: 20px;
  354. }
  355.  
  356. .hn-cont .cont-items li:first-child::before {
  357.     border: none;
  358. }
  359.  
  360. .hn-cont .cont-items li::before {
  361.     content: '';
  362.     position: absolute;
  363.     top: 35px;
  364.     height: 100px;
  365.     margin-left: -38px;
  366.     border-left: 1px solid #e0e0e0;
  367. }
  368.  
  369. .hn-cont .cont-items li img {
  370.     width: 160px;
  371.     height: 110px;
  372.     margin-bottom: 10px;
  373. }
  374.  
  375. .hn-cont .cont-items li p {
  376.     color: #333;
  377. }
  378.  
  379. .hn-cont .cont-items li span {
  380.     color: #ff6700;
  381. }
  382.  
  383.  
  384. /* 搜索框 */
  385.  
  386. .search {
  387.     display: flex;
  388.     position: absolute;
  389.     right: 0;
  390. }
  391.  
  392. .search input {
  393.     width: 285px;
  394.     height: 50px;
  395.     outline: none;
  396.     padding-left: 10px;
  397.     color: #757575;
  398.     border: 1px solid #e0e0e0;
  399. }
  400.  
  401. .search span {
  402.     display: flex;
  403.     justify-content: center;
  404.     align-items: center;
  405.     width: 50px;
  406.     height: 50px;
  407.     margin-left: -51px;
  408.     border-left: 1px solid #e0e0e0;
  409.     cursor: pointer;
  410. }
  411.  
  412. .search span::after {
  413.     content: '\e920';
  414.     font-family: 'icomoon';
  415.     color: #616161;
  416.     font-size: 18px;
  417.     font-weight: 700;
  418. }
  419.  
  420.  
  421. /* 左侧导航模块 */
  422.  
  423. .left-nav {
  424.     position: absolute;
  425.     z-index: 2;
  426. }
  427.  
  428. .left-nav ul {
  429.     width: 235px;
  430.     background-color: rgba(0, 0, 0, .5);
  431.     padding: 20px 0;
  432. }
  433.  
  434. .left-nav ul li {
  435.     float: none;
  436.     height: 42px;
  437.     line-height: 42px;
  438. }
  439.  
  440. .bgc {
  441.     background-color: #ff6700;
  442. }
  443.  
  444. .left-nav ul li a {
  445.     font-size: 14px;
  446.     padding-left: 30px;
  447.     color: #fff;
  448. }
  449.  
  450. .left-nav ul li span::before {
  451.     font-family: 'icomoon';
  452.     content: '\e906';
  453.     float: right;
  454.     color: #fff;
  455.     font-size: 20px;
  456.     margin-right: 20px;
  457. }
  458.  
  459. .left-nav .items {
  460.     display: none;
  461.     position: absolute;
  462.     top: 0;
  463.     left: 235px;
  464.     width: 990px;
  465.     height: 458px;
  466.     border: 1px solid #e0e0e0;
  467. }
  468.  
  469. .left-nav .items ul {
  470.     display: flex;
  471.     flex-wrap: wrap;
  472.     flex-direction: column;
  473.     width: 100%;
  474.     height: 100%;
  475.     padding: 0;
  476.     position: absolute;
  477.     top: 0;
  478.     left: 0;
  479.     background-color: #fff;
  480.     box-shadow: 5px 5px 15px -5px #999;
  481. }
  482.  
  483. .left-nav .items ul li {
  484.     display: flex;
  485.     padding: 17px 20px;
  486. }
  487.  
  488. .left-nav .items ul li img {
  489.     width: 40px;
  490.     height: 40px;
  491. }
  492.  
  493. .left-nav .items ul li p {
  494.     color: #333;
  495.     font-size: 14px;
  496.     padding-left: 10px;
  497. }
  498.  
  499. .left-nav .items ul li:hover p {
  500.     color: #ff6700;
  501. }
  502.  
  503. .left-nav .items:nth-child(5),
  504. .left-nav .items:nth-child(8),
  505. .left-nav .items:nth-child(10),
  506. .left-nav .items:nth-child(11) {
  507.     width: 742.5px;
  508. }
  509.  
  510. .left-nav .items:nth-child(9) {
  511.     width: 495px;
  512. }
  513.  
  514.  
  515. /* 轮播图 */
  516.  
  517. .carousel {
  518.     position: relative;
  519.     width: 100%;
  520.     height: 460px;
  521.     overflow: hidden;
  522. }
  523.  
  524. .carousel ul {
  525.     /* 加定位才能使用动画函数 */
  526.     position: absolute;
  527.     top: 0;
  528.     left: 0;
  529.     width: 500%;
  530. }
  531.  
  532. .carousel ul li a img {
  533.     width: 100%;
  534.     height: 460px;
  535. }
  536.  
  537. .carousel ul li {
  538.     position: absolute;
  539.     top: 0;
  540.     left: 0;
  541.     opacity: 0;
  542.     transition: all 1s ease;
  543. }
  544.  
  545. .carousel ul li:first-child {
  546.     opacity: 1;
  547. }
  548.  
  549. .arrow-l,
  550. .arrow-r {
  551.     /* display: none; */
  552.     position: absolute;
  553.     top: 50%;
  554.     width: 40px;
  555.     height: 70px;
  556.     line-height: 70px;
  557.     text-align: center;
  558.     font-size: 40px;
  559.     color: #b6b6b6;
  560.     z-index: 1;
  561. }
  562.  
  563. .arrow-l:hover,
  564. .arrow-r:hover {
  565.     background: rgba(0, 0, 0, .5);
  566.     color: #fff;
  567. }
  568.  
  569. .arrow-r {
  570.     border-bottom-left-radius: 2px;
  571.     border-top-left-radius: 2px;
  572.     right: 1px;
  573. }
  574.  
  575. .arrow-l {
  576.     border-bottom-right-radius: 2px;
  577.     border-top-right-radius: 2px;
  578.     left: 235px;
  579. }
  580.  
  581. .arrow-l span::before {
  582.     font-family: 'icomoon';
  583.     content: '\e905';
  584. }
  585.  
  586. .arrow-r span::before {
  587.     font-family: 'icomoon';
  588.     content: '\e906';
  589. }
  590.  
  591. .circle {
  592.     position: absolute;
  593.     bottom: 30px;
  594.     right: -65px;
  595.     width: 180px;
  596.     height: 15px;
  597. }
  598.  
  599. .circle li {
  600.     width: 6px;
  601.     height: 6px;
  602.     background-color: rgba(0, 0, 0, .3);
  603.     border: 2px solid #999;
  604.     border-radius: 6px;
  605.     display: inline-block;
  606.     margin-left: 5px;
  607.     cursor: pointer;
  608. }
  609.  
  610. .circle .selected,
  611. .circle li:hover {
  612.     background-color: #efefef;
  613. }
  614.  
  615.  
  616. /* 头部结束部分 */
  617.  
  618. .introduce {
  619.     display: flex;
  620.     margin: 15px 0 25px;
  621. }
  622.  
  623. .left-item {
  624.     width: 235px;
  625.     height: 170px;
  626.     background-color: #5f5750;
  627. }
  628.  
  629. table {
  630.     width: 100%;
  631.     height: 100%;
  632. }
  633.  
  634. tbody {
  635.     color: #ccc;
  636.     text-align: center;
  637.     font-size: 12px;
  638. }
  639.  
  640. tbody tr td img {
  641.     width: 24px;
  642.     height: 24px;
  643. }
  644.  
  645. tr>td {
  646.     position: relative;
  647. }
  648.  
  649. td:before {
  650.     content: "";
  651.     position: absolute;
  652.     top: 2px;
  653.     left: 10px;
  654.     width: 65px;
  655.     height: 1px;
  656.     background-color: #665e57;
  657. }
  658.  
  659. td:after {
  660.     content: "";
  661.     position: absolute;
  662.     top: 10px;
  663.     left: 3px;
  664.     width: 1px;
  665.     height: 70px;
  666.     background-color: #665e57;
  667. }
  668.  
  669. td:hover {
  670.     color: #fff;
  671.     cursor: pointer;
  672. }
  673.  
  674. .right-item ul li img {
  675.     width: 315px;
  676.     height: 170px;
  677. }
  678.  
  679. .right-item ul li {
  680.     margin-left: 15px;
  681. }
  682.  
  683. .right-item ul li img:hover {
  684.     transition: all .4s ease;
  685.     box-shadow: 0 5px 10px 5px #ddd;
  686. }
  687.  
  688. .items-img .img-r ul li:hover,
  689. .items-img .img-l img:hover,
  690. .items-vidio ul li:hover {
  691.     position: relative;
  692.     top: -1px;
  693.     transition: all .4s ease;
  694.     box-shadow: 0 5px 15px 5px #ddd;
  695. }
  696.  
  697.  
  698. /* 中间部分 */
  699.  
  700. .in {
  701.     padding: 25px 0;
  702.     background-color: #f5f5f5;
  703. }
  704.  
  705. .top-box a img {
  706.     width: 100%;
  707. }
  708.  
  709. .list-items {
  710.     margin: 20px 0;
  711. }
  712.  
  713. .list .list-items .items-text {
  714.     display: flex;
  715.     justify-content: space-between;
  716.     align-items: center;
  717. }
  718.  
  719. .text-l h2 {
  720.     color: #333;
  721.     font-weight: 100;
  722. }
  723.  
  724. .text-r {
  725.     display: flex;
  726.     align-items: center;
  727.     text-align: center;
  728.     cursor: pointer;
  729. }
  730.  
  731. .text-r:hover p {
  732.     color: #ff6700;
  733.     transition: all .5s ease;
  734. }
  735.  
  736. .text-r:hover span {
  737.     background-color: #ff6700;
  738.     transition: all .5s ease;
  739. }
  740.  
  741. .text-r p {
  742.     color: #424242;
  743. }
  744.  
  745. .text-r span::before {
  746.     font-family: 'icomoon';
  747.     content: '\e906';
  748. }
  749.  
  750. .text-r span {
  751.     width: 20px;
  752.     height: 20px;
  753.     border-radius: 10px;
  754.     margin-left: 10px;
  755.     color: #fff;
  756.     background-color: #b0b0b0;
  757. }
  758.  
  759. .text-r ul li {
  760.     margin-left: 30px;
  761.     padding: 4px 0;
  762. }
  763.  
  764. .now,
  765. .hover {
  766.     padding: 2px 0;
  767.     border-bottom: 2px solid #ff6700;
  768. }
  769.  
  770. .now a,
  771. .hover a {
  772.     color: #ff6700;
  773.     transition: all .5s ease;
  774. }
  775.  
  776.  
  777. /* img area */
  778.  
  779. .items-img,
  780. .items-vidio {
  781.     display: flex;
  782.     margin: 20px 0;
  783. }
  784.  
  785. .img-l img {
  786.     width: 234px;
  787.     height: 614px;
  788.     cursor: pointer;
  789. }
  790.  
  791. .img-l ul li img {
  792.     width: 234px;
  793.     height: 300px;
  794.     margin-bottom: 10px;
  795. }
  796.  
  797. .img-r ul li {
  798.     display: flex;
  799.     width: 234px;
  800.     height: 300px;
  801.     margin-left: 14px;
  802.     margin-bottom: 14px;
  803.     font-size: 14px;
  804.     text-align: center;
  805.     background-color: #fff;
  806.     align-items: center;
  807.     justify-content: center;
  808.     flex-direction: column;
  809.     transition: all .3s linear;
  810. }
  811.  
  812. .img-r ul li img {
  813.     width: 160px;
  814.     height: 160px;
  815. }
  816.  
  817. .img-r ul li h5 {
  818.     font-weight: normal;
  819. }
  820.  
  821. .img-r ul li p {
  822.     font-size: 12px;
  823.     margin: 15px;
  824.     color: #b0b0b0;
  825. }
  826.  
  827. .more .lt i,
  828. .img-r ul li span {
  829.     color: #ff6700;
  830. }
  831.  
  832. .img-r ul li span i {
  833.     text-decoration: line-through;
  834.     margin-left: 10px;
  835.     color: #b0b0b0;
  836. }
  837.  
  838. .img-r ul .more {
  839.     display: flex;
  840.     height: 143px;
  841.     flex-direction: row;
  842.     justify-content: space-around;
  843. }
  844.  
  845. .more .rt img {
  846.     width: 80px;
  847.     height: 80px;
  848. }
  849.  
  850. .more .lt {
  851.     width: 85px;
  852.     text-align: left;
  853. }
  854.  
  855. .more h3,
  856. .more .lt h4 {
  857.     font-weight: normal;
  858.     margin-bottom: 5px;
  859. }
  860.  
  861. .img-r ul li.more p {
  862.     margin: 0;
  863. }
  864.  
  865. .more h3 {
  866.     font-size: 18px;
  867. }
  868.  
  869. .more span::after {
  870.     content: '\e927';
  871.     font-family: 'icomoon';
  872.     font-size: 50px;
  873. }
  874.  
  875. .items-vidio ul li {
  876.     width: 296px;
  877.     height: 285px;
  878.     margin-right: 14px;
  879.     background-color: #fff;
  880. }
  881.  
  882. .items-vidio ul li:last-child {
  883.     margin: 0;
  884. }
  885.  
  886. .items-vidio ul li video {
  887.     width: 100%;
  888.     height: 180px;
  889. }
  890.  
  891. .items-vidio ul li p {
  892.     text-align: center;
  893.     font-size: 14px;
  894.     line-height: 70px;
  895. }
  896.  
  897. .img-r .block {
  898.     display: block;
  899.     width: 992px;
  900. }
  901.  
  902. .img-r .none {
  903.     display: none;
  904. }
  905.  
  906.  
  907. /* 底部模块 */
  908.  
  909. .lower {
  910.     background-color: #fff;
  911. }
  912.  
  913. .server {
  914.     overflow: hidden;
  915. }
  916.  
  917. .uhalf {
  918.     width: 100%;
  919.     height: 25px;
  920.     padding: 25px 0;
  921.     margin-bottom: 30px;
  922.     border-bottom: 1px solid #e0e0e0;
  923. }
  924.  
  925. .uhalf ul li {
  926.     text-align: center;
  927.     line-height: 25px;
  928.     width: 19.8%;
  929.     color: #616161;
  930.     border-right: 1px solid #e0e0e0;
  931. }
  932.  
  933. .uhalf ul li:last-child {
  934.     border: none;
  935. }
  936.  
  937. .uhalf ul li span::before {
  938.     font-family: 'icomoon';
  939.     margin-right: 5px;
  940.     vertical-align: top;
  941.     font-size: 24px;
  942. }
  943.  
  944. .uhalf .repair::before {
  945.     content: '\e92e';
  946. }
  947.  
  948. .uhalf .return::before {
  949.     content: '\e92d';
  950. }
  951.  
  952. .uhalf .exchange::before {
  953.     content: '\e92a';
  954. }
  955.  
  956. .uhalf .ship::before {
  957.     content: '\e912';
  958. }
  959.  
  960. .uhalf .sales::before {
  961.     content: '\e914';
  962. }
  963.  
  964. .uhalf ul li span:hover {
  965.     color: #ff6700;
  966.     transition: all .5s ease;
  967. }
  968.  
  969. .lhalf .ltnav {
  970.     float: left;
  971.     width: 80%;
  972. }
  973.  
  974. .lhalf .rtbut {
  975.     position: relative;
  976.     float: right;
  977.     width: 20%;
  978.     text-align: center;
  979. }
  980.  
  981. .lhalf .ltnav ul {
  982.     float: left;
  983.     margin-bottom: 20px;
  984. }
  985.  
  986. .lhalf .ltnav ul li {
  987.     float: none;
  988.     margin: 0 0 10px 100px;
  989. }
  990.  
  991. .lhalf .ltnav ul li h4 {
  992.     font-weight: normal;
  993.     font-size: 14px;
  994.     margin-bottom: 20px;
  995.     color: #424242;
  996. }
  997.  
  998. .lhalf .ltnav ul li a {
  999.     font-size: 12px;
  1000.     color: #757575;
  1001. }
  1002.  
  1003. .lhalf .ltnav ul li a:hover {
  1004.     color: #ff6700;
  1005. }
  1006.  
  1007. .rtbut h3 {
  1008.     font-weight: normal;
  1009.     color: #ff6700;
  1010.     font-size: 21px;
  1011. }
  1012.  
  1013. .rtbut p {
  1014.     font-size: 12px;
  1015.     margin: 5px 0;
  1016.     color: #616161;
  1017. }
  1018.  
  1019. .rtbut button {
  1020.     width: 120px;
  1021.     height: 30px;
  1022.     color: #ff6700;
  1023.     background-color: #fff;
  1024.     border: 1px solid #ff6700;
  1025. }
  1026.  
  1027. .rtbut button::before {
  1028.     font-family: 'icomoon';
  1029.     content: '\e933';
  1030.     font-size: 15px;
  1031.     margin-right: 3px;
  1032. }
  1033.  
  1034. .rtbut button:hover {
  1035.     color: #fff;
  1036.     background-color: #ff6700;
  1037.     transition: all .5s ease;
  1038. }
  1039.  
  1040. .rtbut h3::before {
  1041.     content: '';
  1042.     position: absolute;
  1043.     left: -7px;
  1044.     display: inline-block;
  1045.     height: 85px;
  1046.     border-left: 1px solid #e0e0e0;
  1047. }
  1048.  
  1049.  
  1050. /* footer模块 */
  1051.  
  1052. .footer {
  1053.     background-color: #fafafa;
  1054.     margin: 15px 0 0;
  1055.     padding: 20px;
  1056.     overflow: hidden;
  1057. }
  1058.  
  1059. .footer-left,
  1060. .footer-right {
  1061.     margin: 10px;
  1062. }
  1063.  
  1064. .footer-content ul {
  1065.     overflow: hidden;
  1066.     margin-bottom: 5px;
  1067. }
  1068.  
  1069. .footer-content ul li {
  1070.     font-size: 12px;
  1071. }
  1072.  
  1073. .footer-content ul li a:hover,
  1074. .footer-content ul li span:hover {
  1075.     color: #ff6700;
  1076. }
  1077.  
  1078. .footer-content ul li a {
  1079.     color: #757575;
  1080. }
  1081.  
  1082. .footer-content ul li span {
  1083.     color: #b0b0b0;
  1084.     margin-right: 5px;
  1085. }
  1086.  
  1087. .footer .root {
  1088.     text-align: center;
  1089.     font-size: 18px;
  1090.     color: #bfbfbf;
  1091.     margin-top: 40px;
  1092. }

login.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>登录页面</title>
  9.     <!-- 引入 css -->
  10.     <link rel="stylesheet" href="css/login.css">
  11.     <!-- 引入 js -->
  12.     <script type="text/javascript" src="js/jQuery.min.js"></script>
  13.     <script type="text/javascript" src="js/login.js"></script>
  14. </head>
  15.  
  16. <body>
  17.     <div class="login_page">
  18.         <div class="left">
  19.             <div class="bg"></div>
  20.         </div>
  21.         <div class="right">
  22.             <div class="head">
  23.                 <div class="logo">
  24.                     <img src="images/This_is_tow_Mi.png" alt="">
  25.                     <h2>小米账号</h2>
  26.                 </div>
  27.                 <div class="menu">
  28.                     <ul>
  29.                         <li><a href="javascript:;">用户协议</a></li>
  30.                         <li><a href="javascript:;">隐私政策</a></li>
  31.                         <li><a href="javascript:;">帮助中心</a></li>
  32.                         <li class="language"><a href="javascript:;">中文(简体)</a>
  33.                             <div class="lang">
  34.                                 <p>中文（繁体）</p>
  35.                                 <p>English</p>
  36.                             </div>
  37.                         </li>
  38.                     </ul>
  39.                 </div>
  40.             </div>
  41.             <div class="content">
  42.                 <div class="corner">
  43.                     <img src="images/img/loading/white_cod.png" alt="">
  44.                     <div class="trangle"></div>
  45.                     <div class="alert">
  46.                         <p>扫码登录</p>
  47.                         <p>密码登录</p>
  48.                         <div class="sj"></div>
  49.                     </div>
  50.                 </div>
  51.                 <div class="login_form">
  52.                     <div class="title">
  53.                         <div class="login">
  54.                             <a href="javascript:;">
  55.                                 <h3 class="hcolor">登录</h3>
  56.                                 <span></span>
  57.                             </a>
  58.                         </div>
  59.                         <div class="register">
  60.                             <a href="javascript:;">
  61.                                 <h3>注册</h3>
  62.                             </a>
  63.                         </div>
  64.                     </div>
  65.                     <div class="login_body">
  66.                         <div class="input">
  67.                             <div class="admin">
  68.                                 <input type="text" placeholder="邮箱/手机号码/小米ID" class="user">
  69.                                 <i>邮箱/手机号码/小米ID</i>
  70.                                 <p>请输入账号</p>
  71.                             </div>
  72.                             <div class="eyebox">
  73.                                 <input type="password" placeholder="密码" id="pwd">
  74.                                 <img src="images/close.png" alt="" id="eye">
  75.                                 <i>密码</i>
  76.                                 <p>请输入密码</p>
  77.                             </div>
  78.                         </div>
  79.                         <div class="check">
  80.                             <input type="checkbox" name="dl" id="dl">
  81.                             <p>已阅读并同意小米帐号<span> 用户协议 </span>和<span> 隐私政策 </span></p>
  82.                         </div>
  83.                         <div class="click">
  84.                             <button disabled="true">登录</button>
  85.                         </div>
  86.                         <div class="text">
  87.                             <p>忘记密码？</p>
  88.                             <p>手机号登录</p>
  89.                         </div>
  90.                         <div class="else">
  91.                             <p>其他方式登录</p>
  92.                         </div>
  93.                         <div class="contact">
  94.                             <img src="images/images/ate/contact.png" alt="">
  95.                         </div>
  96.                     </div>
  97.                     <div class="register_body position_register">
  98.                         <div class="input">
  99.                             <div class="region">
  100.                                 <input class="area" type="text" readonly placeholder="国家/地区" value="中国">
  101.                                 <i>国家/地区</i>
  102.                                 <div class="tips">
  103.                                     <img src="images/img/loading/point.png" alt="">
  104.                                     <em>系统会根据您选择的国家/地区的法律法规存储您的个人信息</em>
  105.                                 </div>
  106.                             </div>
  107.                             <div class="telnumber">
  108.                                 <input class="tel" type="tel" placeholder="手机号">
  109.                                 <i>手机号</i>
  110.                                 <p>请输入手机号码</p>
  111.                             </div>
  112.                             <div class="idtfy">
  113.                                 <input class="yzm" type="text" placeholder="请输入验证码">
  114.                                 <i>请输入验证码</i>
  115.                                 <span>获取验证码</span>
  116.                                 <p>请输入短信验证码</p>
  117.                             </div>
  118.                         </div>
  119.                         <div class="check">
  120.                             <input type="checkbox" name="zc" id="zc">
  121.                             <p>已阅读并同意小米帐号<span> 用户协议 </span>和<span> 隐私政策 </span></p>
  122.                         </div>
  123.                         <div class="click">
  124.                             <button disabled="true">注册</button>
  125.                         </div>
  126.                         <div class="text">
  127.                             <p>收不到验证码？</p>
  128.                         </div>
  129.                         <div class="else">
  130.                             <p>其他方式登录</p>
  131.                         </div>
  132.                         <div class="contact">
  133.                             <img src="images/images/ate/contact.png" alt="">
  134.                         </div>
  135.                     </div>
  136.                 </div>
  137.                 <div class="login_code">
  138.                     <h3>扫码登录 &nbsp; 安全快捷</h3>
  139.                     <img src="images/images/xiaomi-android.png" alt="">
  140.                     <p>请使用小米手机/米家等小米旗下APP扫码登录</p>
  141.                     <div class="sport">
  142.                         <p>支持扫码登录的App</p>
  143.                     </div>
  144.                     <div class="contact">
  145.                         <img src="images/images/ate/threepay.png" alt="">
  146.                     </div>
  147.                 </div>
  148.             </div>
  149.             <div class="footer">
  150.                 <p>小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
  151.             </div>
  152.         </div>
  153.     </div>
  154. </body>
  155.  
  156. </html>

login.css：

  1. @font-face {
  2.     font-family: 'icomoon';
  3.     src: url('../fonts/icomoon.eot?7kkyc2');
  4.     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');
  5.     font-weight: normal;
  6.     font-style: normal;
  7. }
  8.  
  9. * {
  10.     margin: 0;
  11.     padding: 0;
  12. }
  13.  
  14. a {
  15.     text-decoration: none;
  16.     color: #333;
  17. }
  18.  
  19. ul li {
  20.     list-style: none;
  21.     float: left;
  22.     cursor: pointer;
  23. }
  24.  
  25. .left,
  26. .right {
  27.     float: left;
  28.     height: 940px;
  29. }
  30.  
  31. .block {
  32.     display: block;
  33. }
  34.  
  35. .none {
  36.     display: none;
  37. }
  38.  
  39. .login_page {
  40.     display: flex;
  41. }
  42.  
  43. .left {
  44.     width: 20%;
  45. }
  46.  
  47. .right {
  48.     width: 80%;
  49. }
  50.  
  51. .left .bg {
  52.     width: 100%;
  53.     height: 100%;
  54.     background-image: url(../images/images/ate/bgimg.jpg);
  55.     background-size: cover;
  56.     background-position: 50%;
  57. }
  58.  
  59. .head,
  60. .logo {
  61.     display: flex;
  62.     align-items: center;
  63.     justify-content: space-between;
  64. }
  65.  
  66. .logo img {
  67.     width: 40px;
  68.     background-color: #ff6700;
  69.     border-radius: 15px;
  70.     margin: 20px;
  71. }
  72.  
  73. .logo h2 {
  74.     font-weight: 500;
  75. }
  76.  
  77. .head .menu ul li a {
  78.     color: #838383;
  79.     padding: 0 15px;
  80.     font-size: 13px;
  81. }
  82.  
  83. .head .menu ul li:last-child {
  84.     position: relative;
  85. }
  86.  
  87. .head .menu ul li:last-child a {
  88.     border-left: 1px solid #ddd;
  89.     margin-right: 20px;
  90.     position: relative;
  91. }
  92.  
  93. .head .menu ul li:last-child a::after {
  94.     content: '\e904';
  95.     font-family: 'icomoon';
  96.     color: #838383;
  97.     font-size: 16px;
  98.     position: absolute;
  99.     top: 2px;
  100.     right: -5px;
  101. }
  102.  
  103. .head .menu ul li:hover a,
  104. .head .menu ul li:hover a::after {
  105.     color: #ff6700;
  106. }
  107.  
  108. .head .menu ul li:hover a::after {
  109.     transform: rotate(180deg);
  110.     transition: all .3s ease;
  111. }
  112.  
  113. .menu ul li .lang {
  114.     overflow: hidden;
  115.     position: absolute;
  116.     top: 30px;
  117.     left: 5px;
  118.     width: 95px;
  119.     height: 0;
  120.     background-color: #fff;
  121.     box-shadow: 0 0 10px -2px #ddd;
  122.     transition: all .3s ease;
  123. }
  124.  
  125. .menu ul li .langh {
  126.     height: 74px;
  127. }
  128.  
  129. .lang p {
  130.     font-size: 13px;
  131.     padding: 10px 0;
  132.     text-align: center;
  133.     color: #838383;
  134. }
  135.  
  136. .lang p:hover {
  137.     background-color: #f5f5f5;
  138. }
  139.  
  140. .content {
  141.     display: flex;
  142.     justify-content: center;
  143.     align-items: baseline;
  144.     position: relative;
  145.     width: 100%;
  146.     height: 87%;
  147.     text-align: center;
  148.     overflow: hidden;
  149. }
  150.  
  151. .corner {
  152.     position: relative;
  153.     top: 33px;
  154.     left: 470px;
  155.     width: 65px;
  156.     height: 65px;
  157.     border-top-right-radius: 5px;
  158.     background-color: #ffbe99;
  159.     z-index: 3;
  160. }
  161.  
  162. .position {
  163.     top: 37px;
  164.     left: 455px;
  165. }
  166.  
  167. .toggleimg {
  168.     src: url(images/img/loading/whitecodecomputer.png);
  169. }
  170.  
  171. .corner img {
  172.     width: 36px;
  173.     margin: 10px 0 0 20px;
  174. }
  175.  
  176. .trangle {
  177.     position: absolute;
  178.     top: 0;
  179.     width: 0;
  180.     height: 0;
  181.     border: 33px solid transparent;
  182.     border-color: transparent transparent #fff #fff;
  183.     line-height: 0;
  184.     font-size: 0;
  185. }
  186.  
  187. .alert {
  188.     display: none;
  189.     position: absolute;
  190.     top: 15px;
  191.     right: 70px;
  192.     width: 85px;
  193.     height: 30px;
  194.     text-align: center;
  195.     line-height: 30px;
  196.     font-size: 14px;
  197.     border-radius: 3px;
  198.     color: #fff;
  199.     transition: all .5s ease;
  200.     background-color: #ff5c00;
  201. }
  202.  
  203. .alert .sj {
  204.     position: absolute;
  205.     top: 10px;
  206.     right: -8px;
  207.     width: 0;
  208.     height: 0;
  209.     border: 5px solid transparent;
  210.     border-color: transparent transparent transparent #ff5c00;
  211.     line-height: 0;
  212.     font-size: 0;
  213. }
  214.  
  215. .content .login_form {
  216.     display: block;
  217.     position: relative;
  218.     top: 50px;
  219.     width: 390px;
  220.     padding: 40px;
  221.     border-radius: 5px;
  222.     box-shadow: 0px 0px 20px 0px #e0e0e0;
  223. }
  224.  
  225. .title {
  226.     display: flex;
  227.     position: relative;
  228. }
  229.  
  230. .title a h3 {
  231.     margin-right: 10px;
  232.     padding: 4px 0;
  233.     color: #bbb;
  234. }
  235.  
  236. .title a:first-child h3 {
  237.     margin-left: 10px;
  238. }
  239.  
  240. .title a .hcolor {
  241.     color: #333;
  242.     transition: all .5s ease;
  243. }
  244.  
  245. .title a span {
  246.     position: absolute;
  247.     left: 10px;
  248.     height: 4px;
  249.     width: 37px;
  250.     border-radius: 2px;
  251.     background-color: #ff5c00;
  252.     transition: all .5s ease;
  253. }
  254.  
  255. .input {
  256.     position: relative;
  257. }
  258.  
  259. .input input {
  260.     position: relative;
  261.     width: 320px;
  262.     height: 25px;
  263.     padding: 20px;
  264.     margin: 20px 0 0 10px;
  265.     font-size: 16px;
  266.     border-radius: 5px;
  267.     background-color: #f9f9f9;
  268.     border: 1px solid transparent;
  269.     outline: none;
  270. }
  271.  
  272. .input input::-webkit-input-placeholder {
  273.     color: #bbb;
  274. }
  275.  
  276.  
  277. /* 兼容 */
  278.  
  279. input::-webkit-input-placeholder {
  280.     /* 兼容WebKit browsers（Chrome的内核） */
  281.     color: #bbb;
  282. }
  283.  
  284. input::-moz-placeholder {
  285.     /* Mozilla Firefox 4 to 18 */
  286.     color: #bbb;
  287. }
  288.  
  289. input::-moz-placeholder {
  290.     /* Mozilla Firefox 19+ */
  291.     color: #bbb;
  292. }
  293.  
  294. input::-ms-input-placeholder {
  295.     /* Internet Explorer 10+ */
  296.     color: #bbb;
  297. }
  298.  
  299. .input:first-child {
  300.     margin-top: 20px;
  301. }
  302.  
  303. .eyebox,
  304. .admin,
  305. .region,
  306. .telnumber,
  307. .idtfy {
  308.     position: relative;
  309. }
  310.  
  311. .input img {
  312.     position: absolute;
  313.     bottom: 20px;
  314.     right: 36px;
  315.     width: 25px;
  316.     cursor: pointer;
  317. }
  318.  
  319. .check {
  320.     display: flex;
  321.     padding: 10px 0;
  322.     margin: 30px 0 20px 20px;
  323.     font-size: 13px;
  324.     color: #bbb;
  325. }
  326.  
  327. .check span {
  328.     color: #333;
  329.     cursor: pointer;
  330. }
  331.  
  332. input[type="checkbox"] {
  333.     width: 18px;
  334.     height: 18px;
  335.     margin-right: 10px;
  336.     display: inline-block;
  337.     text-align: center;
  338.     vertical-align: middle;
  339.     position: relative;
  340. }
  341.  
  342. input[type="checkbox"]::before {
  343.     content: "";
  344.     position: absolute;
  345.     top: -1px;
  346.     left: -1px;
  347.     width: 100%;
  348.     height: 100%;
  349.     background-color: #f9f9f9;
  350.     border: 1px solid #ddd;
  351.     border-radius: 5px;
  352. }
  353.  
  354. input[type="checkbox"]:checked::before {
  355.     content: "\2713";
  356.     color: #fff;
  357.     /* 对号的转义符 √ */
  358.     position: absolute;
  359.     top: -1px;
  360.     left: -1px;
  361.     width: 100%;
  362.     height: 100%;
  363.     background-color: #ff6900;
  364.     border: 1px solid #ff6900;
  365.     border-radius: 5px;
  366. }
  367.  
  368. .check input:hover,
  369. .area {
  370.     cursor: pointer;
  371. }
  372.  
  373. .click button {
  374.     width: 355px;
  375.     height: 60px;
  376.     margin-left: 10px;
  377.     font-size: 17px;
  378.     color: #fff;
  379.     border: none;
  380.     background-color: #ff5c00;
  381.     border-radius: 5px;
  382.     cursor: pointer;
  383. }
  384.  
  385. button[disabled] {
  386.     background-color: #ffbe99;
  387.     opacity: 1
  388. }
  389.  
  390. .text {
  391.     overflow: hidden;
  392. }
  393.  
  394. .text p {
  395.     float: left;
  396.     color: #ff5c00;
  397.     font-size: 16px;
  398.     margin-top: 10px;
  399.     cursor: pointer;
  400. }
  401.  
  402. .text p:last-child {
  403.     float: right;
  404.     margin-right: 10px;
  405. }
  406.  
  407. .text p:first-child {
  408.     margin-left: 20px;
  409. }
  410.  
  411. .else p {
  412.     color: #aaa;
  413.     text-align: center;
  414.     margin: 20px 0;
  415. }
  416.  
  417. .contact img {
  418.     margin-left: 10px;
  419.     cursor: pointer;
  420. }
  421.  
  422. .footer {
  423.     position: absolute;
  424.     left: 50%;
  425.     bottom: 20px;
  426. }
  427.  
  428. .footer p {
  429.     text-align: center;
  430.     color: #999;
  431.     font-size: 12px;
  432. }
  433.  
  434. .login_body {
  435.     height: 483px;
  436.     transform: translateX(0px);
  437.     transition: all .5s ease;
  438. }
  439.  
  440. .register_body {
  441.     height: 570px;
  442.     opacity: 0;
  443.     transform: translateX(450px);
  444.     transition: all .5s ease;
  445. }
  446.  
  447. .position_login {
  448.     width: 370px;
  449.     position: absolute;
  450. }
  451.  
  452. .position_register {
  453.     position: absolute;
  454.     top: 70px;
  455. }
  456.  
  457. .register_body .input {
  458.     position: relative;
  459. }
  460.  
  461. .input .idtfy span {
  462.     position: absolute;
  463.     bottom: 25px;
  464.     right: 40px;
  465.     color: #ff6900;
  466.     font-size: 13px;
  467. }
  468.  
  469. .register_body .text p {
  470.     float: left;
  471. }
  472.  
  473. .input input.input_focus {
  474.     border: 1px solid #ff5c00;
  475.     box-shadow: 0px 0px 1px 2px #ffdecc;
  476.     background-color: #fff;
  477.     transition: all .3s ease;
  478. }
  479.  
  480. .input input.input_blur {
  481.     background-color: #fcf2f3;
  482. }
  483.  
  484. .input input.text_focus::placeholder {
  485.     position: absolute;
  486.     top: 5px;
  487.     left: 20px;
  488.     font-size: 12px;
  489.     color: #bbb;
  490.     transition: all .3s;
  491. }
  492.  
  493. .input input.text_blur::placeholder {
  494.     color: #f04645;
  495.     transition: all .3s;
  496. }
  497.  
  498. .input p {
  499.     display: none;
  500.     color: #f04645;
  501.     font-size: 12px;
  502.     margin: 10px 0 0 10px;
  503. }
  504.  
  505. .input i {
  506.     display: none;
  507.     position: absolute;
  508.     bottom: 44px;
  509.     left: 40px;
  510.     font-style: normal;
  511.     font-weight: 100;
  512.     font-size: 12px;
  513.     color: #bbb;
  514. }
  515.  
  516. .input .region i {
  517.     display: block;
  518. }
  519.  
  520. .input .region i::after {
  521.     content: '\e904';
  522.     font-family: 'icomoon';
  523.     color: #bbb;
  524.     font-size: 24px;
  525.     position: absolute;
  526.     top: 15px;
  527.     left: 300px;
  528. }
  529.  
  530. .input .region .tips {
  531.     display: none;
  532.     position: absolute;
  533.     top: 15px;
  534.     right: -295px;
  535.     width: 290px;
  536.     height: 75px;
  537.     transition: all .5s ease;
  538.     background-color: #fff;
  539.     border-radius: 5px;
  540.     box-shadow: 0 0 5px 3px #f3f3f3;
  541.     z-index: 9;
  542. }
  543.  
  544. .input .region .tips img {
  545.     width: 21px;
  546.     position: absolute;
  547.     top: 20px;
  548.     left: 10px;
  549. }
  550.  
  551. .input .region .tips em {
  552.     position: absolute;
  553.     top: 20px;
  554.     left: 10px;
  555.     padding: 0px 25px;
  556.     font-style: normal;
  557.     line-height: 20px;
  558.     font-size: 12px;
  559.     color: #333;
  560. }
  561.  
  562. .login_code {
  563.     display: none;
  564.     position: relative;
  565.     top: 50px;
  566.     width: 375px;
  567.     height: 460px;
  568.     padding: 40px;
  569.     background-color: #fff;
  570.     box-shadow: 0px 0px 20px 0px #e0e0e0;
  571.     text-align: center;
  572. }
  573.  
  574. .login_code img {
  575.     width: 180px;
  576.     margin: 30px 0;
  577. }
  578.  
  579. .login_code p {
  580.     font-size: 14px;
  581.     color: #333;
  582. }
  583.  
  584. .login_code .sport p {
  585.     color: #aaa;
  586.     text-align: center;
  587.     font-size: 16px;
  588.     margin: 70px 0 -20px;
  589. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/353503
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号