devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

网易严选首页重构_网易严选的首页的设置是什么

作者：很楠不爱3 | 2024-02-18 14:43:48

赞

踩

网易严选的首页的设置是什么

目录

一、运行效果：很莫名其妙有的gif违规

二.项目设计技术以及所用库

 三、源码

一、运行效果：

 

二.项目设计技术以及所用库

        1.技术：HTML+CSS+JavaScript

        2.库：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

                  iconfont-阿里巴巴矢量图标库

 三、源码

（1）main.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.   <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
  10.   <link rel="stylesheet" href="./css/main.css">
  11.   <link rel="stylesheet" href="./css/font_w9yzk39mtj/iconfont.css">
  12.   <link rel="stylesheet" href="./css/font_xm5gxugj7k/iconfont.css">
  13.   <link rel="stylesheet" href="./css/swiper-8.4.7/swiper/swiper-bundle.min.css">
  14. </head>
  15.  
  16. <body>
  17.   <!-- 头部导航栏 -->
  18.   <div class="nav">
  19.     <div class="nav_right">
  20.       <div class="right_menu">
  21.         <div class="item">
  22.           <a href="#">登录/注册</a>
  23.         </div>
  24.         <div class="item">
  25.           <a href="#">我的订单</a>
  26.         </div>
  27.         <div class="item">
  28.           <a href="#">甄选家</a>
  29.         </div>
  30.         <div class="item none">
  31.           <a href="#" style="color: red;">企业采购 <i class="iconfont icon-xiangxia"></i></a>
  32.           <!-- 二级菜单 -->
  33.           <div class="none">
  34.             <ul>
  35.               <li>
  36.                 <div class="arrow"></div>
  37.               </li>
  38.               <li><a href="#">企业购</a></li>
  39.               <li><a href="#">员工福利</a></li>
  40.               <li><a href="#">礼品卡</a></li>
  41.               <li><a href="#">联系我们</a></li>
  42.             </ul>
  43.           </div>
  44.         </div>
  45.         <div class="item none">
  46.           <a href="#">客服服务 <i class="iconfont icon-xiangxia"></i></a>
  47.           <!-- 二级菜单 -->
  48.           <div>
  49.             <ul>
  50.               <li>
  51.                 <div class="arrow"></div>
  52.               </li>
  53.               <li><a href="#">在线客服</a></li>
  54.               <li><a href="#">帮助中心</a></li>
  55.               <li><a href="#">商务合作</a></li>
  56.               <li><a href="#">开放平台</a></li>
  57.             </ul>
  58.           </div>
  59.         </div>
  60.         <div class="item none">
  61.           <a href="#"><i class="iconfont icon-shouji"></i> APP</a>
  62.           <div class="img">
  63.             <img src="./images/二维码.png" alt="">
  64.           </div>
  65.         </div>
  66.       </div>
  67.     </div>
  68.  
  69.   </div>
  70.   <!-- 头部搜索框 -->
  71.   <div class="logo_nav">
  72.     <div class="top">
  73.       <div class="logo"></div>
  74.       <div class="search">
  75.         <input type="text" placeholder="搜索">
  76.         <div></div>
  77.         <button>搜索</button>
  78.       </div>
  79.       <div class="shopcar">
  80.         <div class="icon_car">
  81.           <span class="car">购物车</span>
  82.           <span class="num">1</span>
  83.         </div>
  84.  
  85.       </div>
  86.     </div>
  87.  
  88.   </div>
  89.   <div class="bottom">
  90.     <div class="menu">
  91.       <img src="./images/logo.jpg" class="menu_logo">
  92.       <div class="item">
  93.         <a href="#">
  94.           <span style="color: #CC9756;  border-bottom: 3px solid #CC9756;">首页</span></a>
  95.       </div>
  96.       <div class="item none">
  97.         <a href="#"><span>居家生活</span></a>
  98.         <div class="none shop">
  99.           <div class="bedshop">
  100.             <div class="bs_top">
  101.               <h3>床品家纺</h3>
  102.               <h3>床垫床褥</h3>
  103.             </div>
  104.             <div class="bs_bottom">
  105.               <ul>
  106.                 <li>
  107.                   <img src="./images/bed-images/四件套.webp" alt="">
  108.                   <span>四件套</span>
  109.                 </li>
  110.                 <li>
  111.                   <img src="./images/bed-images/四季款.webp" alt="">
  112.                   <span>四季款</span>
  113.                 </li>
  114.                 <li>
  115.                   <img src="./images/bed-images/凉席蚊帐.webp" alt="">
  116.                   <span>凉席蚊帐</span>
  117.                 </li>
  118.                 <li>
  119.                   <img src="./images/bed-images/乳胶枕.webp" alt="">
  120.                   <span>乳胶枕</span>
  121.                 </li>
  122.                 <li>
  123.                   <img src="./images/bed-images/枕头.webp" alt="">
  124.                   <span>枕头</span>
  125.                 </li>
  126.                 <li>
  127.                   <img src="./images/bed-images/盖毯.webp" alt="">
  128.                   <span>盖毯</span>
  129.                 </li>
  130.                 <li>
  131.                   <img src="./images/bed-images/床笠枕套.webp" alt="">
  132.                   <span>床笠枕套</span>
  133.                 </li>
  134.                 <li>
  135.                   <img src="./images/bed-images/被子.webp" alt="">
  136.                   <span>被子</span>
  137.                 </li>
  138.                 <li>
  139.                   <img src="./images/bed-images/毯子.webp" alt="">
  140.                   <span>毯子</span>
  141.                 </li>
  142.               </ul>
  143.               <ul>
  144.                 <li>
  145.                   <img src="./images/bed-images/秋冬款.webp" alt="">
  146.                   <span>秋冬款</span>
  147.                 </li>
  148.                 <li>
  149.                   <img src="./images/bed-images/儿童床品.webp" alt="">
  150.                   <span>儿童床品</span>
  151.                 </li>
  152.               </ul>
  153.               <ul>
  154.                 <li>
  155.                   <img src="./images/bed-images/床垫.webp" alt="">
  156.                   <span>床垫</span>
  157.                 </li>
  158.                 <li>
  159.                   <img src="./images/bed-images/床褥.webp" alt="">
  160.                   <span>床褥</span>
  161.                 </li>
  162.                 <li>
  163.                   <img src="./images/bed-images/乳胶床垫.webp" alt="">
  164.                   <span>乳胶床垫</span>
  165.                 </li>
  166.               </ul>
  167.             </div>
  168.           </div>
  169.           <div class="mattress"></div>
  170.         </div>
  171.       </div>
  172.       <div class="item none">
  173.         <a href="#"><span>宠物生活</span></a>
  174.         <div class="none pet">
  175.           <div class="pet_top">
  176.             <h3>宠物食品</h3>
  177.             <h3>宠物用品</h3>
  178.           </div>
  179.           <div class="pet_bottom">
  180.             <ul>
  181.               <li>
  182.                 <img src="./images/petshop-images/猫粮.webp" alt="">
  183.                 <span>猫粮</span>
  184.               </li>
  185.               <li>
  186.                 <img src="./images/petshop-images/犬粮.webp" alt="">
  187.                 <span>犬粮</span>
  188.               </li>
  189.               <li>
  190.                 <img src="./images/petshop-images/零食罐头.webp" alt="">
  191.                 <span>零食罐头</span>
  192.               </li>
  193.             </ul>
  194.             <ul>
  195.               <li>
  196.                 <img src="./images/petshop-images/清洁美容.webp" alt="">
  197.                 <span>清洁美容</span>
  198.               </li>
  199.               <li>
  200.                 <img src="./images/petshop-images/宠物日用.webp" alt="">
  201.                 <span>宠物日用</span>
  202.               </li>
  203.               <li>
  204.                 <img src="./images/petshop-images/宠物药品.webp" alt="">
  205.                 <span>宠物药品</span>
  206.               </li>
  207.               <li>
  208.                 <img src="./images/petshop-images/宠物出行.webp" alt="">
  209.                 <span>玩具出行</span>
  210.               </li>
  211.               <li>
  212.                 <img src="./images/petshop-images/宠物厕所.webp" alt="">
  213.                 <span>宠物厕所</span>
  214.               </li>
  215.             </ul>
  216.           </div>
  217.         </div>
  218.       </div>
  219.       <div class="item none">
  220.         <a href="#"><span>服饰鞋包</span></a>
  221.         <div class="none colthes">
  222.           <div class="cs_top">
  223.             <h3>男士上衣</h3>
  224.             <h3>男士裤装</h3>
  225.             <h3>居家内搭</h3>
  226.             <h3>箱包</h3>
  227.             <h3>配饰配件</h3>
  228.             <h3>男士鞋靴</h3>
  229.           </div>
  230.           <div class="cs_bottom">
  231.             <ul>
  232.               <li>
  233.                 <img src="./images/manshop-images/男士T恤.webp" alt="">
  234.                 <span>男士T恤</span>
  235.               </li>
  236.               <li>
  237.                 <img src="./images/manshop-images/男士衬衫.webp" alt="">
  238.                 <span>男士衬衫</span>
  239.               </li>
  240.               <li>
  241.                 <img src="./images/manshop-images/户外衣.webp" alt="">
  242.                 <span style="display: inline-block;width: 70px;">户外衣/防晒服</span>
  243.               </li>
  244.               <li>
  245.                 <img src="./images/manshop-images/运动服.webp" alt="">
  246.                 <span>运动服</span>
  247.               </li>
  248.               <li>
  249.                 <img src="./images/manshop-images/男士外套.webp" alt="">
  250.                 <span>男士外套</span>
  251.               </li>
  252.               <li>
  253.                 <img src="./images/manshop-images/男士卫衣.webp" alt="">
  254.                 <span>男士卫衣</span>
  255.               </li>
  256.               <li>
  257.                 <img src="./images/manshop-images/针织毛衫.webp" alt="">
  258.                 <span>针织毛衫</span>
  259.               </li>
  260.               <li>
  261.                 <img src="./images/manshop-images/羽绒服.webp" alt="">
  262.                 <span>羽绒服</span>
  263.               </li>
  264.             </ul>
  265.             <ul>
  266.               <li>
  267.                 <img src="./images/manshop-images/男士短裤.webp" alt="">
  268.                 <span>男士短裤</span>
  269.               </li>
  270.               <li>
  271.                 <img src="./images/manshop-images/男运动裤.webp" alt="">
  272.                 <span>男运动裤</span>
  273.               </li>
  274.               <li>
  275.                 <img src="./images/manshop-images/牛仔裤.webp" alt="">
  276.                 <span>牛仔裤</span>
  277.               </li>
  278.             </ul>
  279.             <ul>
  280.               <li>
  281.                 <img src="./images/manshop-images/家居服.webp" alt="">
  282.                 <span>家居服</span>
  283.               </li>
  284.               <li>
  285.                 <img src="./images/manshop-images/男士内裤.webp" alt="">
  286.                 <span>男士内裤</span>
  287.               </li>
  288.               <li>
  289.                 <img src="./images/manshop-images/男袜.webp" alt="">
  290.                 <span>男袜</span>
  291.               </li>
  292.               <li>
  293.                 <img src="./images/manshop-images/内衣.webp" alt="">
  294.                 <span>内衣</span>
  295.               </li>
  296.               <li>
  297.                 <img src="./images/manshop-images/保暖内衣.webp" alt="">
  298.                 <span>保暖内衣</span>
  299.               </li>
  300.             </ul>
  301.             <ul>
  302.               <li>
  303.                 <img src="./images/manshop-images/商务包.webp" alt="">
  304.                 <span>商务包</span>
  305.               </li>
  306.               <li>
  307.                 <img src="./images/manshop-images/双肩包.webp" alt="">
  308.                 <span>双肩包</span>
  309.               </li>
  310.               <li>
  311.                 <img src="./images/manshop-images/斜挎包.webp" alt="">
  312.                 <span>斜挎包</span>
  313.               </li>
  314.               <li>
  315.                 <img src="./images/manshop-images/钱包.webp" alt="">
  316.                 <span>钱包</span>
  317.               </li>
  318.             </ul>
  319.             <ul>
  320.               <li>
  321.                 <img src="./images/manshop-images/墨镜.webp" alt="">
  322.                 <span>墨镜</span>
  323.               </li>
  324.               <li>
  325.                 <img src="./images/manshop-images/光学眼镜.webp" alt="">
  326.                 <span>光学眼镜</span>
  327.               </li>
  328.               <li>
  329.                 <img src="./images/manshop-images/手表.webp" alt="">
  330.                 <span>手表</span>
  331.               </li>
  332.               <li>
  333.                 <img src="./images/manshop-images/皮带领带.webp" alt="">
  334.                 <span>皮带领带</span>
  335.               </li>
  336.             </ul>
  337.             <ul>
  338.               <li>
  339.                 <img src="./images/manshop-images/休闲鞋.webp" alt="">
  340.                 <span>休闲鞋</span>
  341.               </li>
  342.               <li>
  343.                 <img src="./images/manshop-images/运动鞋.webp" alt="">
  344.                 <span>运动鞋</span>
  345.               </li>
  346.               <li>
  347.                 <img src="./images/manshop-images/商务鞋.webp" alt="">
  348.                 <span>商务鞋</span>
  349.               </li>
  350.             </ul>
  351.  
  352.           </div>
  353.         </div>
  354.       </div>
  355.       <div class="item none">
  356.         <a href="#"><span>美食酒水</span></a>
  357.         <div class="none beverage">
  358.           <div class="beverage_top">
  359.             <h3>乳品饮料</h3>
  360.             <h3>茗茶茶包</h3>
  361.             <h3>中外名酒</h3>
  362.           </div>
  363.           <div class="beverage_bottom">
  364.             <ul>
  365.               <li>
  366.                 <img src="./images/beverage-images/牛奶.webp" alt="">
  367.                 <span>牛奶</span>
  368.               </li>
  369.               <li>
  370.                 <img src="./images/beverage-images/饮料.webp" alt="">
  371.                 <span>饮料</span>
  372.               </li>
  373.               <li>
  374.                 <img src="./images/beverage-images/冲调.webp" alt="">
  375.                 <span>冲调饮品</span>
  376.               </li>
  377.               <li>
  378.                 <img src="./images/beverage-images/麦片.webp" alt="">
  379.                 <span>麦片谷物</span>
  380.               </li>
  381.               <li>
  382.                 <img src="./images/beverage-images/咖啡奶茶.webp" alt="">
  383.                 <span>咖啡奶茶</span>
  384.               </li>
  385.             </ul>
  386.             <ul>
  387.               <li>
  388.                 <img src="./images/beverage-images/绿茶.webp" alt="">
  389.                 <span>绿茶/红茶</span>
  390.               </li>
  391.               <li>
  392.                 <img src="./images/beverage-images/普洱.webp" alt="">
  393.                 <span>普洱/乌龙</span>
  394.               </li>
  395.               <li>
  396.                 <img src="./images/beverage-images/花茶茶包.webp" alt="">
  397.                 <span>花茶茶包</span>
  398.               </li>
  399.             </ul>
  400.             <ul>
  401.               <li>
  402.                 <img src="./images/beverage-images/白酒.webp" alt="">
  403.                 <span>白酒</span>
  404.               </li>
  405.               <li>
  406.                 <img src="./images/beverage-images/葡萄酒.webp" alt="">
  407.                 <span>葡萄酒</span>
  408.               </li>
  409.               <li>
  410.                 <img src="./images/beverage-images/啤酒.webp" alt="">
  411.                 <span>啤酒果酒</span>
  412.               </li>
  413.             </ul>
  414.           </div>
  415.         </div>
  416.       </div>
  417.       <div class="item none">
  418.         <a href="#"><span>个护清洁</span></a>
  419.         <div class="none cleaning">
  420.           <div class="cl_top">
  421.             <h3>洗衣护理</h3>
  422.             <h3>餐厨清洁</h3>
  423.             <h3>纸品清洁</h3>
  424.             <h3>除味除湿</h3>
  425.             <h3>清洁用品</h3>
  426.           </div>
  427.           <div class="cl_bottom">
  428.             <ul>
  429.               <li>
  430.                 <img src="./images/cleanshop-images/洗衣液.webp" alt="">
  431.                 <span>洗衣液</span>
  432.               </li>
  433.               <li>
  434.                 <img src="./images/cleanshop-images/洗衣凝珠.webp" alt="">
  435.                 <span>洗衣凝珠</span>
  436.               </li>
  437.               <li>
  438.                 <img src="./images/cleanshop-images/衣物护理.webp" alt="">
  439.                 <span>衣物护理</span>
  440.               </li>
  441.             </ul>
  442.             <ul>
  443.               <li>
  444.                 <img src="./images/cleanshop-images/餐具清洁.webp" alt="">
  445.                 <span>餐具清洁</span>
  446.               </li>
  447.               <li>
  448.                 <img src="./images/cleanshop-images/厨房纸品.webp" alt="">
  449.                 <span>厨房纸品</span>
  450.               </li>
  451.               <li>
  452.                 <img src="./images/cleanshop-images/清洁用具.webp" alt="">
  453.                 <span>清洁用具</span>
  454.               </li>
  455.             </ul>
  456.             <ul>
  457.               <li>
  458.                 <img src="./images/cleanshop-images/纸品.webp" alt="">
  459.                 <span>纸品</span>
  460.               </li>
  461.               <li>
  462.                 <img src="./images/cleanshop-images/面巾湿巾.webp" alt="">
  463.                 <span>面巾湿巾</span>
  464.               </li>
  465.             </ul>
  466.             <ul>
  467.               <li>
  468.                 <img src="./images/cleanshop-images/香氛除味.webp" alt="">
  469.                 <span>香氛除味</span>
  470.               </li>
  471.               <li>
  472.                 <img src="./images/cleanshop-images/除湿防霉.webp" alt="">
  473.                 <span>除湿防霉</span>
  474.               </li>
  475.             </ul>
  476.             <ul>
  477.               <li>
  478.                 <img src="./images/cleanshop-images/垃圾桶.webp" alt="">
  479.                 <span>垃圾桶</span>
  480.               </li>
  481.               <li>
  482.                 <img src="./images/cleanshop-images/扫把拖把.webp" alt="">
  483.                 <span>扫把拖把</span>
  484.               </li>
  485.               <li>
  486.                 <img src="./images/cleanshop-images/家清卫浴.webp" alt="">
  487.                 <span>家清卫浴</span>
  488.               </li>
  489.             </ul>
  490.           </div>
  491.         </div>
  492.       </div>
  493.       <div class="item none">
  494.         <a href="#"><span>母婴亲子</span></a>
  495.         <div class="none mb_supplies ">
  496.           <div class="mb_top">
  497.             <h3>婴童精选</h3>
  498.             <h3>洗护喂养</h3>
  499.             <h3>鞋服搭配</h3>
  500.             <h3>玩具出行</h3>
  501.             <h3>孕产妈咪</h3>
  502.             <h3>婴童寝居</h3>
  503.           </div>
  504.           <div class="mb_bottom">
  505.             <ul>
  506.               <li>
  507.                 <img src="./images/mb_supplies-images/母婴甄选.webp" alt="">
  508.                 <span>母婴甄选</span>
  509.               </li>
  510.             </ul>
  511.             <ul>
  512.               <li>
  513.                 <img src="./images/mb_supplies-images/尿裤纸品.webp" alt="">
  514.                 <span>尿裤纸品</span>
  515.               </li>
  516.               <li>
  517.                 <img src="./images/mb_supplies-images/洗护用品.webp" alt="">
  518.                 <span>洗护用品</span>
  519.               </li>
  520.               <li>
  521.                 <img src="./images/mb_supplies-images/喂养.webp" alt="">
  522.                 <span>喂养</span>
  523.               </li>
  524.             </ul>
  525.             <ul>
  526.               <li>
  527.                 <img src="./images/mb_supplies-images/T恤衬衫.webp" alt="">
  528.                 <span>T恤衬衫</span>
  529.               </li>
  530.               <li>
  531.                 <img src="./images/mb_supplies-images/居家内搭.webp" alt="">
  532.                 <span>居家内搭</span>
  533.               </li>
  534.               <li>
  535.                 <img src="./images/mb_supplies-images/外套.webp" alt="">
  536.                 <span>外套</span>
  537.               </li>
  538.               <li>
  539.                 <img src="./images/mb_supplies-images/裤装裙装.webp" alt="">
  540.                 <span>裤装裙装</span>
  541.               </li>
  542.               <li>
  543.                 <img src="./images/mb_supplies-images/婴幼服饰.webp" alt="">
  544.                 <span>婴幼服饰</span>
  545.               </li>
  546.               <li>
  547.                 <img src="./images/mb_supplies-images/童鞋.webp" alt="">
  548.                 <span>童鞋</span>
  549.               </li>
  550.               <li>
  551.                 <img src="./images/mb_supplies-images/童包配饰.webp" alt="">
  552.                 <span>童包配饰</span>
  553.               </li>
  554.             </ul>
  555.             <ul>
  556.               <li>
  557.                 <img src="./images/mb_supplies-images/出行用品.webp" alt="">
  558.                 <span>出行用品</span>
  559.               </li>
  560.               <li>
  561.                 <img src="./images/mb_supplies-images/玩具.webp" alt="">
  562.                 <span>玩具</span>
  563.               </li>
  564.             </ul>
  565.             <ul>
  566.               <li>
  567.                 <img src="./images/mb_supplies-images/妈咪用品.webp" alt="">
  568.                 <span>妈咪用品</span>
  569.               </li>
  570.               <li>
  571.                 <img src="./images/mb_supplies-images/孕妈服饰.webp" alt="">
  572.                 <span>孕妈服饰</span>
  573.               </li>
  574.             </ul>
  575.             <ul>
  576.               <li>
  577.                 <img src="./images/mb_supplies-images/儿童床品.webp" alt="">
  578.                 <span>儿童床品</span>
  579.               </li>
  580.               <li>
  581.                 <img src="./images/mb_supplies-images/家具收纳.webp" alt="">
  582.                 <span>家具收纳</span>
  583.               </li>
  584.             </ul>
  585.           </div>
  586.         </div>
  587.       </div>
  588.       <div class="item none">
  589.         <a href="#"><span>运动旅行</span></a>
  590.         <div class="none sports">
  591.           <div class="sports_top">
  592.             <h3>户外出行</h3>
  593.             <h3>健身塑形</h3>
  594.             <h3>户外鞋服</h3>
  595.           </div>
  596.           <div class="sports_bottom">
  597.             <ul>
  598.               <li>
  599.                 <img src="./images/sports-images/行李箱.webp" alt="">
  600.                 <span>行李箱</span>
  601.               </li>
  602.               <li>
  603.                 <img src="./images/sports-images/野餐露营.webp" alt="">
  604.                 <span>野餐露营</span>
  605.               </li>
  606.               <li>
  607.                 <img src="./images/sports-images/户外装备.webp" alt="">
  608.                 <span>户外装备</span>
  609.               </li>
  610.               <li>
  611.                 <img src="./images/sports-images/旅行用品.webp" alt="">
  612.                 <span>旅行用品</span>
  613.               </li>
  614.               <li>
  615.                 <img src="./images/sports-images/一次性用品.webp" alt="">
  616.                 <span>一次性用品</span>
  617.               </li>
  618.             </ul>
  619.             <ul>
  620.               <li>
  621.                 <img src="./images/sports-images/健身器械.webp" alt="">
  622.                 <span>健身器械</span>
  623.               </li>
  624.               <li>
  625.                 <img src="./images/sports-images/球类运动.webp" alt="">
  626.                 <span>球类运动</span>
  627.               </li>
  628.               <li>
  629.                 <img src="./images/sports-images/游泳.webp" alt="">
  630.                 <span>游泳</span>
  631.               </li>
  632.               <li>
  633.                 <img src="./images/sports-images/瑜伽美体.webp" alt="">
  634.                 <span>瑜伽美体</span>
  635.               </li>
  636.               <li>
  637.                 <img src="./images/sports-images/休闲运动.webp" alt="">
  638.                 <span>休闲运动</span>
  639.               </li>
  640.             </ul>
  641.             <ul>
  642.               <li>
  643.                 <img src="./images/sports-images/户外防晒.webp" alt="">
  644.                 <span>户外防晒</span>
  645.               </li>
  646.               <li>
  647.                 <img src="./images/sports-images/男户外服.webp" alt="">
  648.                 <span>男户外服</span>
  649.               </li>
  650.               <li>
  651.                 <img src="./images/sports-images/女户外服.webp" alt="">
  652.                 <span>女户外服</span>
  653.               </li>
  654.               <li>
  655.                 <img src="./images/sports-images/男运动服.webp" alt="">
  656.                 <span>男运动服</span>
  657.               </li>
  658.               <li>
  659.                 <img src="./images/sports-images/女运动服.webp" alt="">
  660.                 <span>女运动服</span>
  661.               </li>
  662.               <li>
  663.                 <img src="./images/sports-images/运动户外鞋.webp" alt="">
  664.                 <span>运动户外鞋</span>
  665.               </li>
  666.             </ul>
  667.           </div>
  668.         </div>
  669.       </div>
  670.       <div class="item none">
  671.         <a href="#"><span>数码家电</span></a>
  672.         <div class="none digital">
  673.           <div class="digital_top">
  674.             <h3>生活电器</h3>
  675.             <h3>按摩电器</h3>
  676.             <h3>个护电器</h3>
  677.             <h3>厨房电器</h3>
  678.             <h3>智能生活</h3>
  679.             <h3>两季电器</h3>
  680.             <h3>数码影音</h3>
  681.           </div>
  682.           <div class="digital_bottom">
  683.             <ul>
  684.               <li>
  685.                 <img src="./images/digital-images/清洁电器.webp" alt="">
  686.                 <span>清洁电器</span>
  687.               </li>
  688.               <li>
  689.                 <img src="./images/digital-images/衣物护理.webp" alt="">
  690.                 <span>衣物护理</span>
  691.               </li>
  692.               <li>
  693.                 <img src="./images/digital-images/空气调节.webp" alt="">
  694.                 <span>空气调节</span>
  695.               </li>
  696.               <li>
  697.                 <img src="./images/digital-images/洗地机.webp" alt="">
  698.                 <span style="display: inline-block;width: 70px;">洗地机/吸尘器</span>
  699.               </li>
  700.               <li>
  701.                 <img src="./images/digital-images/智能马桶.webp" alt="">
  702.                 <span>智能马桶</span>
  703.               </li>
  704.               <li>
  705.                 <img src="./images/digital-images/两季电器2.webp" alt="">
  706.                 <span>两季电器</span>
  707.               </li>
  708.             </ul>
  709.             <ul>
  710.               <li>
  711.                 <img src="./images/digital-images/腰靠.webp" alt="">
  712.                 <span style="display: inline-block;width: 70px;">腰靠/按摩肩带</span>
  713.               </li>
  714.               <li>
  715.                 <img src="./images/digital-images/按摩椅.webp" alt="">
  716.                 <span>按摩椅</span>
  717.               </li>
  718.             </ul>
  719.             <ul>
  720.               <li>
  721.                 <img src="./images/digital-images/头发护理.webp" alt="">
  722.                 <span>头发护理</span>
  723.               </li>
  724.               <li>
  725.                 <img src="./images/digital-images/口腔护理.webp" alt="">
  726.                 <span>口腔护理</span>
  727.               </li>
  728.               <li>
  729.                 <img src="./images/digital-images/面部护理.webp" alt="">
  730.                 <span>面部护理</span>
  731.               </li>
  732.               <li>
  733.                 <img src="./images/digital-images/身体护理.webp" alt="">
  734.                 <span>身体护理</span>
  735.               </li>
  736.             </ul>
  737.             <ul>
  738.               <li>
  739.                 <img src="./images/digital-images/厨房电器.webp" alt="">
  740.                 <span>厨房电器</span>
  741.               </li>
  742.             </ul>
  743.             <ul>
  744.               <li>
  745.                 <img src="./images/digital-images/智能出行.webp" alt="">
  746.                 <span>智能出行</span>
  747.               </li>
  748.             </ul>
  749.             <ul>
  750.               <li>
  751.                 <img src="./images/digital-images/取暖电器.webp" alt="">
  752.                 <span>取暖电器</span>
  753.               </li>
  754.               <li>
  755.                 <img src="./images/digital-images/两季电器.webp" alt="">
  756.                 <span>两季电器</span>
  757.               </li>
  758.             </ul>
  759.             <ul>
  760.               <li>
  761.                 <img src="./images/digital-images/3C数码.webp" alt="">
  762.                 <span>3C数码</span>
  763.               </li>
  764.               <li>
  765.                 <img src="./images/digital-images/手机配件.webp" alt="">
  766.                 <span>手机配件</span>
  767.               </li>
  768.               <li>
  769.                 <img src="./images/digital-images/影音娱乐.webp" alt="">
  770.                 <span>影音娱乐</span>
  771.               </li>
  772.               <li>
  773.                 <img src="./images/digital-images/车载用品.webp" alt="">
  774.                 <span>车载用品</span>
  775.               </li>
  776.             </ul>
  777.           </div>
  778.         </div>
  779.       </div>
  780.       <div class="item none">
  781.         <a href="#"><span>严选全球</span></a>
  782.         <div class="none world">
  783.           <div class="world_top">
  784.             <h3>新品尝鲜</h3>
  785.             <h3>居家日用</h3>
  786.             <h3>大牌补贴</h3>
  787.           </div>
  788.           <div class="world_bottom">
  789.             <ul>
  790.               <li>
  791.                 <img src="./images/world-images/新品速递.webp" alt="">
  792.                 <span>新品速递</span>
  793.               </li>
  794.             </ul>
  795.             <ul>
  796.               <li>
  797.                 <img src="./images/world-images/明星乳胶.webp" alt="">
  798.                 <span>明星乳胶</span>
  799.               </li>
  800.             </ul>
  801.             <ul>
  802.               <li>
  803.                 <img src="./images/world-images/大牌补贴.webp" alt="">
  804.                 <span>大牌补贴</span>
  805.               </li>
  806.             </ul>
  807.           </div>
  808.         </div>
  809.       </div>
  810.       <div class="item">
  811.         <a href="#"><span>为你严选</span></a>
  812.       </div>
  813.       <div class="item">
  814.         <a href="#"><span>众筹</span></a>
  815.       </div>
  816.       <div class="menu_icon">
  817.         <div class="menu_sousuo">
  818.           <img src="./images/搜索小.png" alt="">
  819.         </div>
  820.         <div class="menu_man">
  821.           <img src="./images/用户-角色-用户名-单人_jurassic.png" alt="">
  822.         </div>
  823.         <div class="menu_car">
  824.           <img src="./images/购物车.png" alt="">
  825.           <div class="subscript">0</div>
  826.         </div>
  827.       </div>
  828.  
  829.     </div>
  830.   </div>
  831.   <!-- 中部广告 -->
  832.   <div class="advertisement"></div>
  833.   <!-- 侧边栏+新品首发 -->
  834.   <div class="sale_list">
  835.     <ul>
  836.       <li class="top">-热销榜-</li>
  837.       <li>
  838.         <img src="./images/热销榜/全站热销榜.webp" alt="">
  839.         <span>全站<br>热销榜</span>
  840.       </li>
  841.       <li>
  842.         <img src="./images/热销榜/居家.webp" alt="">
  843.         <span>居家<br>生活榜</span>
  844.       </li>
  845.       <li>
  846.         <img src="./images/热销榜/服饰.webp" alt="">
  847.         <span>服饰<br>鞋包榜</span>
  848.       </li>
  849.       <li>
  850.         <img src="./images/热销榜/美食.webp" alt="">
  851.         <span>美食<br>酒水榜</span>
  852.       </li>
  853.       <li>
  854.         <img src="./images/热销榜/数码.webp" alt="">
  855.         <span>数码<br>家电榜</span>
  856.       </li>
  857.       <li>
  858.         <img src="./images/热销榜/个护.webp" alt="">
  859.         <span>个护<br>清洁榜</span>
  860.       </li>
  861.       <li>
  862.         <img src="./images/热销榜/运动.webp" alt="">
  863.         <span>运动<br>旅行榜</span>
  864.       </li>
  865.       <li>
  866.         <img src="./images/热销榜/母婴.webp" alt="">
  867.         <span>母婴<br>亲子榜</span>
  868.       </li>
  869.       <li>
  870.         <img src="./images/热销榜/全球.webp" alt="">
  871.         <span>全球<br>特色榜</span>
  872.       </li>
  873.  
  874.     </ul>
  875.   </div>
  876.   <div class="list_right">
  877.     <ul>
  878.       <li>
  879.         <img src="./images/新人红包二维码.png" alt="">
  880.         <span>扫码领<br>APP大额<br>新人红包</span>
  881.       </li>
  882.       <li>
  883.         <div class="dingyue"></div>
  884.         <p>订阅电子刊</p>
  885.       </li>
  886.       <li>
  887.         <div class="zaixiankefu"></div>
  888.         <p>在线客服</p>
  889.       </li>
  890.     </ul>
  891.   </div>
  892.   <div class="new">
  893.     <div class="newshop">
  894.       <div class="newshop_top">
  895.         <h3>新品首发</h3>
  896.         <span>为你寻觅时间好物</span>
  897.         <span class="end">更多新品 ></span>
  898.       </div>
  899.       <div class="newshop_bottom">
  900.         <div class="swiper mySwiper">
  901.           <div class="swiper-wrapper">
  902.             <div class="swiper-slide">
  903.               <div class="sw_content">
  904.                 <div class="ct_img one"></div>
  905.                 <div class="ct_introduce">
  906.                   <p>榛果拿铁新薄脆，慕斯夹心
  907.                     咖啡饼干</p>
  908.                   <p>￥17.9<span>￥25.8</span></p>
  909.                 </div>
  910.               </div>
  911.  
  912.             </div>
  913.             <div class="swiper-slide">
  914.               <div class="sw_content">
  915.                 <div class="ct_img two"></div>
  916.                 <div class="ct_introduce">
  917.                   <p>【洁厕系列】抑菌去污香氛
  918.                     马桶洁厕剂500g</p>
  919.                   <p>￥14.9<span>￥19.9</span></p>
  920.                 </div>
  921.               </div>
  922.             </div>
  923.             <div class="swiper-slide">
  924.               <div class="sw_content">
  925.                 <div class="ct_img three"></div>
  926.                 <div class="ct_introduce">
  927.                   <p>迪士尼正版520ml双饮吸管
  928.                     杯儿童水杯</p>
  929.                   <p>￥39<span>￥49</span></p>
  930.                 </div>
  931.               </div>
  932.             </div>
  933.             <div class="swiper-slide">
  934.               <div class="sw_content">
  935.                 <div class="ct_img four"></div>
  936.                 <div class="ct_introduce">
  937.                   <p>宠物冰垫降温猫窝夏季狗狗
  938.                     凉席睡垫凉垫狗窝</p>
  939.                   <p>￥20.8</p>
  940.                 </div>
  941.               </div>
  942.             </div>
  943.             <div class="swiper-slide">
  944.               <div class="sw_content">
  945.                 <div class="ct_img one"></div>
  946.                 <div class="ct_introduce">
  947.                   <p>榛果拿铁新薄脆，慕斯夹心
  948.                     咖啡饼干</p>
  949.                   <p>￥17.9<span>￥25.8</span></p>
  950.                 </div>
  951.               </div>
  952.  
  953.             </div>
  954.             <div class="swiper-slide">
  955.               <div class="sw_content">
  956.                 <div class="ct_img two"></div>
  957.                 <div class="ct_introduce">
  958.                   <p>【洁厕系列】抑菌去污香氛
  959.                     马桶洁厕剂500g</p>
  960.                   <p>￥14.9<span>￥19.9</span></p>
  961.                 </div>
  962.               </div>
  963.             </div>
  964.             <div class="swiper-slide">
  965.               <div class="sw_content">
  966.                 <div class="ct_img three"></div>
  967.                 <div class="ct_introduce">
  968.                   <p>迪士尼正版520ml双饮吸管
  969.                     杯儿童水杯</p>
  970.                   <p>￥39<span>￥49</span></p>
  971.                 </div>
  972.               </div>
  973.             </div>
  974.             <div class="swiper-slide">
  975.               <div class="sw_content">
  976.                 <div class="ct_img four"></div>
  977.                 <div class="ct_introduce">
  978.                   <p>宠物冰垫降温猫窝夏季狗狗
  979.                     凉席睡垫凉垫狗窝</p>
  980.                   <p>￥20.8</p>
  981.                 </div>
  982.               </div>
  983.             </div>
  984.  
  985.  
  986.  
  987.  
  988.           </div>
  989.           <div class="swiper-button-next"></div>
  990.           <div class="swiper-button-prev"></div>
  991.           <div class="swiper-pagination"></div>
  992.         </div>
  993.       </div>
  994.     </div>
  995.  
  996.  
  997.   </div>
  998.  
  999.   <!-- 人气推荐 -->
  1000.   <div class="recommendation">
  1001.     <div class="rd">
  1002.       <div class="rd_top">
  1003.         <h3>人气推荐</h3>
  1004.         <ul>
  1005.           <li><a class="current">编辑推荐</a></li>
  1006.           <li><a>热销总榜</a></li>
  1007.         </ul>
  1008.         <span>更多推荐 ></span>
  1009.       </div>
  1010.       <div class="rd_bottom">
  1011.         <div class="rd_common" style="display: block;">
  1012.           <div class="rdc_left">
  1013.             <div class="rdcl_top">
  1014.               <img src="./images/人气推荐/bj-1.webp" alt="">
  1015.             </div>
  1016.  
  1017.             <h4>小团圆蛋黄酥礼盒奶黄流心味<br> 53g*6枚</h4>
  1018.             <p>￥32.8<span>￥38</span></p>
  1019.           </div>
  1020.           <div class="rdc_right">
  1021.             <div class="rdcr_common">
  1022.               <div class="rdcr_top">
  1023.                 <img src="./images/人气推荐/bj-2.webp" alt="">
  1024.               </div>
  1025.               <h4>能除臭的空气浴室香<br>氛，空气香薰持久留香</h4>
  1026.               <p>￥16.9<span>￥19.9</span></p>
  1027.             </div>
  1028.             <div class="rdcr_common">
  1029.               <div class="rdcr_top">
  1030.                 <img src="./images/人气推荐/bj-3.webp" alt="">
  1031.               </div>
  1032.  
  1033.               <h4>清新英国梨香强力去污<br>酵素洗衣液3kg/1kg</h4>
  1034.               <p>￥9.9</p>
  1035.             </div>
  1036.             <div class="rdcr_common">
  1037.               <div class="rdcr_top">
  1038.                 <img src="./images/人气推荐/bj-4.webp" alt="">
  1039.               </div>
  1040.  
  1041.               <h4>皮酥肉嫩易脱骨，虎皮<br>凤爪175g(香辣味)</h4>
  1042.               <p>￥26</p>
  1043.             </div>
  1044.             <div class="rdcr_common">
  1045.               <div class="rdcr_top">
  1046.                 <img src="./images/人气推荐/bj-5.webp" alt="">
  1047.               </div>
  1048.  
  1049.               <h4>≥20%纯牛乳，云朵吐<br>司巧克力味400g</h4>
  1050.               <p>￥19<span>￥25</span></p>
  1051.             </div>
  1052.             <div class="rdcr_common">
  1053.               <div class="rdcr_top">
  1054.                 <img src="./images/人气推荐/bj-6.webp" alt="">
  1055.               </div>
  1056.  
  1057.               <h4>添加茂金属更强韧，家<br>用金属色垃圾袋</h4>
  1058.               <p>￥19<span>￥25</span></p>
  1059.             </div>
  1060.             <div class="rdcr_common">
  1061.               <div class="rdcr_top">
  1062.                 <img src="./images/人气推荐/bj-7.webp" alt="">
  1063.               </div>
  1064.  
  1065.               <h4>可以吃的“薄脆冻干咖<br>啡”，咖啡饼干</h4>
  1066.               <p>￥15.9<span>￥19.9</span></p>
  1067.             </div>
  1068.           </div>
  1069.         </div>
  1070.         <div class="rd_common">
  1071.           <div class="rdc_left">
  1072.             <div class="rdcl_top">
  1073.               <img src="./images/人气推荐/rx-1.webp" alt="">
  1074.             </div>
  1075.  
  1076.             <h4>擦除99.9%细菌，加大加厚可<br> 冲散湿厕纸</h4>
  1077.             <p>￥3.9<span>￥4.9</span></p>
  1078.           </div>
  1079.           <div class="rdc_right">
  1080.             <div class="rdcr_common">
  1081.               <div class="rdcr_top">
  1082.                 <img src="./images/人气推荐/rx-2.webp" alt="">
  1083.               </div>
  1084.               <h4>清新英国梨香强力去污<br>酵素洗衣液3kg/1kg</h4>
  1085.               <p>￥9.9</p>
  1086.             </div>
  1087.             <div class="rdcr_common">
  1088.               <div class="rdcr_top">
  1089.                 <img src="./images/人气推荐/rx-3.webp" alt="">
  1090.               </div>
  1091.  
  1092.               <h4>告别啃食尴尬，秘制无<br>骨凤爪108g(藤椒味)</h4>
  1093.               <p>￥9.9</p>
  1094.             </div>
  1095.             <div class="rdcr_common">
  1096.               <div class="rdcr_top">
  1097.                 <img src="./images/人气推荐/rx-4.webp" alt="">
  1098.               </div>
  1099.  
  1100.               <h4>玩趣彩虹四季拖鞋轻盈<br>柔软抗菌防滑</h4>
  1101.               <p>￥25.9<span> ￥35.9</span></p>
  1102.             </div>
  1103.             <div class="rdcr_common">
  1104.               <div class="rdcr_top">
  1105.                 <img src="./images/人气推荐/rx-5.webp" alt="">
  1106.               </div>
  1107.  
  1108.               <h4>含40%散养鸡蛋，芝士<br>蛋糕300g</h4>
  1109.               <p>￥16.8<span>￥19</span></p>
  1110.             </div>
  1111.             <div class="rdcr_common">
  1112.               <div class="rdcr_top">
  1113.                 <img src="./images/人气推荐/rx-6.webp" alt="">
  1114.               </div>
  1115.  
  1116.               <h4>无添加蔗糖，苏打饼干<br>360g</h4>
  1117.               <p>￥17.9<span>￥19.9</span></p>
  1118.             </div>
  1119.             <div class="rdcr_common">
  1120.               <div class="rdcr_top">
  1121.                 <img src="./images/人气推荐/rx-7.webp" alt="">
  1122.               </div>
  1123.  
  1124.               <h4>每一口都有九种肉,全<br>价猫粮</h4>
  1125.               <p>￥8<span>￥9.9</span></p>
  1126.             </div>
  1127.           </div>
  1128.         </div>
  1129.       </div>
  1130.     </div>
  1131.   </div>
  1132.   <!-- 床品 -->
  1133.   <div class="bedding common">
  1134.     <div class="cm">
  1135.       <div class="cm_top">
  1136.         <h3>
  1137.           床品
  1138.         </h3>
  1139.         <ul>
  1140.           <li>四季款</li>
  1141.           <li>/</li>
  1142.           <li>乳胶床垫</li>
  1143.           <li>/</li>
  1144.           <li>乳胶枕</li>
  1145.           <li>/</li>
  1146.           <li>凉席蚊帐</li>
  1147.           <li>/</li>
  1148.           <li>四件套</li>
  1149.           <li>/</li>
  1150.           <li>秋冬款</li>
  1151.           <li>/</li>
  1152.           <li>四季床品</li>
  1153.           <li><a href="javascript">查看更多 ></a></li>
  1154.  
  1155.         </ul>
  1156.  
  1157.       </div>
  1158.       <div class="cm_bottom">
  1159.         <div class="big ">
  1160.           <img src="./images/床品/big.webp" alt="">
  1161.         </div>
  1162.         <div class="small">
  1163.           <div class="sm_all">
  1164.             <div class="img one"></div>
  1165.             <h4>原创调色珠光色铸铁珐琅锅<br>22cm</h4>
  1166.             <p>￥179<span>￥288</span> </p>
  1167.           </div>
  1168.           <div class="sm_all">
  1169.             <div class="img two"></div>
  1170.             <h4>温润凉感三峡水牛皮，奢华<br>头层牛皮席</h4>
  1171.             <p>￥1499<span>￥1999</span> </p>
  1172.           </div>
  1173.           <div class="sm_all">
  1174.             <div class="img three"></div>
  1175.             <h4>裸睡亲肤经典A类针织四件<br>套</h4>
  1176.             <p>￥205<span>￥259</span> </p>
  1177.           </div>
  1178.           <div class="sm_all">
  1179.             <div class="img four"></div>
  1180.             <h4>每—口都有九种肉，全价猫<br>粮</h4>
  1181.             <p>￥8 <span>￥9.9</span> </p>
  1182.           </div>
  1183.         </div>
  1184.       </div>
  1185.     </div>
  1186.   </div>
  1187.   <!-- 男装 -->
  1188.   <div class="manclothes common">
  1189.     <div class="cm">
  1190.       <div class="cm_top">
  1191.         <h3>男装</h3>
  1192.         <ul>
  1193.           <li>男士衬衫</li>
  1194.           <li>/</li>
  1195.           <li>男士短裤</li>
  1196.           <li>/</li>
  1197.           <li>男士外套</li>
  1198.           <li>/</li>
  1199.           <li>男士卫衣</li>
  1200.           <li>/</li>
  1201.           <li>运动服</li>
  1202.           <li>/</li>
  1203.           <li>钱包</li>
  1204.           <li>/</li>
  1205.           <li>牛仔裤</li>
  1206.           <li><a href="javascript">查看更多 ></a></li>
  1207.  
  1208.         </ul>
  1209.  
  1210.       </div>
  1211.       <div class="cm_bottom">
  1212.         <div class="big ">
  1213.           <img src="./images/男装/big-1.webp" alt="">
  1214.         </div>
  1215.         <div class="small">
  1216.           <div class="sm_all">
  1217.             <div class="img one"></div>
  1218.             <h4>女式天丝绵柔中腰小腿裤</h4>
  1219.             <p>￥39<span>￥199</span> </p>
  1220.           </div>
  1221.           <div class="sm_all">
  1222.             <div class="img two"></div>
  1223.             <h4>妥帖包裹，男式基础平角内<br>裤</h4>
  1224.             <p>￥43.9<span>￥59</span> </p>
  1225.           </div>
  1226.           <div class="sm_all">
  1227.             <div class="img three"></div>
  1228.             <h4>原创调色珠光色铸铁珐琅锅<br>22cm</h4>
  1229.             <p>￥179<span>￥288</span> </p>
  1230.           </div>
  1231.           <div class="sm_all">
  1232.             <div class="img four"></div>
  1233.             <h4>原创调色珠光色铸铁珐琅锅<br>22cm</h4>
  1234.             <p>￥179<span>￥288</span> </p>
  1235.           </div>
  1236.         </div>
  1237.       </div>
  1238.     </div>
  1239.   </div>
  1240.   <!-- 乳饮酒水 -->
  1241.   <div class="drink common">
  1242.     <div class="cm">
  1243.       <div class="cm_top">
  1244.         <h3>乳饮酒水</h3>
  1245.         <ul>
  1246.           <li>国产酒</li>
  1247.           <li>/</li>
  1248.           <li>名酒馆</li>
  1249.           <li>/</li>
  1250.           <li>进口酒</li>
  1251.           <li>/</li>
  1252.           <li>啤酒</li>
  1253.           <li>/</li>
  1254.           <li>牛奶</li>
  1255.           <li>/</li>
  1256.           <li>白酒</li>
  1257.           <li>/</li>
  1258.           <li>蜂蜜</li>
  1259.           <li><a href="javascript">查看更多 ></a></li>
  1260.  
  1261.         </ul>
  1262.  
  1263.       </div>
  1264.       <div class="cm_bottom">
  1265.         <div class="big ">
  1266.           <img src="./images/乳饮酒水/big.webp" alt="">
  1267.         </div>
  1268.         <div class="small">
  1269.           <div class="sm_all">
  1270.             <div class="img one"></div>
  1271.             <h4>可以即食干吃，坚果亚麻籽<br>谷物燕麦片600g</h4>
  1272.             <p>￥45<span>￥58</span> </p>
  1273.           </div>
  1274.           <div class="sm_all">
  1275.             <div class="img two"></div>
  1276.             <h4>宛如鲜炖，冻干银耳汤15g*<br>10袋</h4>
  1277.             <p>￥33.9<span> ￥49</span></p>
  1278.           </div>
  1279.           <div class="sm_all">
  1280.             <div class="img three"></div>
  1281.             <h4>—口咬到阳光的味道，大片<br>芒果干</h4>
  1282.             <p>￥16</p>
  1283.           </div>
  1284.           <div class="sm_all"></div>
  1285.         </div>
  1286.       </div>
  1287.     </div>
  1288.   </div>
  1289.   <!-- 家庭清洁 -->
  1290.   <div class="homeclean common">
  1291.     <div class="cm">
  1292.       <div class="cm_top">
  1293.         <h3>家庭清洁</h3>
  1294.         <ul>
  1295.           <li>洗衣液</li>
  1296.           <li>/</li>
  1297.           <li>洗衣凝珠</li>
  1298.           <li>/</li>
  1299.           <li>餐具清洁</li>
  1300.           <li>/</li>
  1301.           <li>衣物护理</li>
  1302.           <li>/</li>
  1303.           <li>香氛除味</li>
  1304.           <li>/</li>
  1305.           <li>家清卫浴</li>
  1306.           <li>/</li>
  1307.           <li>厨房纸品</li>
  1308.           <li><a href="javascript">查看更多 ></a></li>
  1309.  
  1310.         </ul>
  1311.  
  1312.       </div>
  1313.       <div class="cm_bottom">
  1314.         <div class="big ">
  1315.           <img src="./images/家庭清洁/big.webp" alt="">
  1316.         </div>
  1317.         <div class="small">
  1318.           <div class="sm_all">
  1319.             <div class="img one"></div>
  1320.             <h4>肌初水嫩/盈润乳液120ml<br>(原活颜保湿乳)</h4>
  1321.             <p>￥109<span>￥139</span> </p>
  1322.           </div>
  1323.           <div class="sm_all">
  1324.             <div class="img two"></div>
  1325.             <h4>看得见的吸水力速干防潮天<br>然硅藻土地垫</h4>
  1326.             <p>￥49.9<span> ￥79.9</span> </p>
  1327.           </div>
  1328.           <div class="sm_all">
  1329.             <div class="img three"></div>
  1330.             <h4>谷风—木3层软抽面巾纸6<br>包/提</h4>
  1331.             <p>￥17.9<span>￥19.9</span> </p>
  1332.           </div>
  1333.           <div class="sm_all">
  1334.             <div class="img four"></div>
  1335.             <h4>时刻照亮你的美指触式LED<br>子母化妆镜</h4>
  1336.             <p>￥109</p>
  1337.           </div>
  1338.         </div>
  1339.       </div>
  1340.     </div>
  1341.   </div>
  1342.   <!-- 宠物生活 -->
  1343.   <div class="petlife common">
  1344.     <div class="cm">
  1345.       <div class="cm_top">
  1346.         <h3>宠物生活</h3>
  1347.         <ul>
  1348.           <li>热销单品</li>
  1349.           <li>/</li>
  1350.           <li>新品尝鲜</li>
  1351.           <li>/</li>
  1352.           <li>猫粮</li>
  1353.           <li>/</li>
  1354.           <li>犬粮</li>
  1355.           <li>/</li>
  1356.           <li>零食罐头</li>
  1357.           <li>/</li>
  1358.           <li>冻干零食</li>
  1359.           <li>/</li>
  1360.           <li>肉类零食</li>
  1361.           <li><a href="javascript">查看更多 ></a></li>
  1362.  
  1363.         </ul>
  1364.  
  1365.       </div>
  1366.       <div class="cm_bottom">
  1367.         <div class="big ">
  1368.           <img src="./images/宠物生活/big.webp" alt="">
  1369.         </div>
  1370.         <div class="small">
  1371.           <div class="sm_all">
  1372.             <div class="img one"></div>
  1373.             <h4>过亿爆品，全价冻干双拼猫<br>粮</h4>
  1374.             <p>￥8<span>￥12</span> </p>
  1375.           </div>
  1376.           <div class="sm_all">
  1377.             <div class="img two"></div>
  1378.             <h4>除臭抑菌，四合一混合猫砂<br>升级款</h4>
  1379.             <p>￥22.9<span>￥29</span> </p>
  1380.           </div>
  1381.           <div class="sm_all">
  1382.             <div class="img three"></div>
  1383.             <h4>五种口味，满足不同挑嘴<br>猫，海陆空盛宴猫条</h4>
  1384.             <p>￥9.9<span>￥14</span> </p>
  1385.           </div>
  1386.           <div class="sm_all">
  1387.             <div class="img four"></div>
  1388.             <h4>细腻肉糜，浓汤享受，猫用<br>浓汤红肉罐头</h4>
  1389.             <p>￥5.9<span>￥9.9</span> </p>
  1390.           </div>
  1391.         </div>
  1392.       </div>
  1393.     </div>
  1394.   </div>
  1395.   <!-- 母婴亲子 -->
  1396.   <div class="mz common">
  1397.     <div class="cm">
  1398.       <div class="cm_top">
  1399.         <h3>母婴亲子</h3>
  1400.         <ul>
  1401.           <li>黑马好物</li>
  1402.           <li>/</li>
  1403.           <li>拉拉裤</li>
  1404.           <li>/</li>
  1405.           <li>母婴甄选</li>
  1406.           <li>/</li>
  1407.           <li>洗发液/沐浴液</li>
  1408.           <li>/</li>
  1409.           <li>纸巾/湿巾</li>
  1410.           <li>/</li>
  1411.           <li>童装</li>
  1412.           <li>/</li>
  1413.           <li>年末狂欢季</li>
  1414.           <li><a href="javascript">查看更多 ></a></li>
  1415.  
  1416.         </ul>
  1417.  
  1418.       </div>
  1419.       <div class="cm_bottom">
  1420.         <div class="big ">
  1421.           <img src="./images/母婴亲子/big.webp" alt="">
  1422.         </div>
  1423.         <div class="small">
  1424.           <div class="sm_all">
  1425.             <div class="img one"></div>
  1426.             <h4>极致清仓底价，海量鲸吸婴<br>儿纸尿裤尿不湿</h4>
  1427.             <p>￥60<span>￥95</span> </p>
  1428.           </div>
  1429.           <div class="sm_all">
  1430.             <div class="img two"></div>
  1431.             <h4>敏感宝宝肌可用，日本乳霜<br>纸巾100抽</h4>
  1432.             <p>￥17.9<span>￥19</span> </p>
  1433.           </div>
  1434.           <div class="sm_all">
  1435.             <div class="img three"></div>
  1436.             <h4>经典爆款升级，毛毛虫儿童<br>运动鞋23-35码</h4>
  1437.             <p>￥109<span> ￥299</span> </p>
  1438.           </div>
  1439.           <div class="sm_all">
  1440.             <div class="img four"></div>
  1441.             <h4>雪地无忧，毛毛虫儿童加绒<br>运动靴26-35码</h4>
  1442.             <p>￥199<span> ￥399</span> </p>
  1443.           </div>
  1444.         </div>
  1445.       </div>
  1446.     </div>
  1447.   </div>
  1448.   <!-- 运动旅行 -->
  1449.   <div class="sptravel common">
  1450.     <div class="cm">
  1451.       <div class="cm_top">
  1452.         <h3>运动旅行</h3>
  1453.         <ul>
  1454.           <li>行李箱</li>
  1455.           <li>/</li>
  1456.           <li>野餐露营</li>
  1457.           <li>/</li>
  1458.           <li>运动附件</li>
  1459.           <li>/</li>
  1460.           <li>雨具雨伞</li>
  1461.           <li>/</li>
  1462.           <li>瑜伽美体</li>
  1463.           <li>/</li>
  1464.           <li>男士运动T恤</li>
  1465.           <li>/</li>
  1466.           <li>男士运动外套</li>
  1467.           <li><a href="javascript">查看更多 ></a></li>
  1468.  
  1469.         </ul>
  1470.  
  1471.       </div>
  1472.       <div class="cm_bottom">
  1473.         <div class="big ">
  1474.           <img src="./images/运动旅行/big.webp" alt="">
  1475.         </div>
  1476.         <div class="small">
  1477.           <div class="sm_all">
  1478.             <div class="img one"></div>
  1479.             <h4>严选经典蒸汽热敷眼罩10<br>片/盒</h4>
  1480.             <p>￥49<span>￥89</span> </p>
  1481.           </div>
  1482.           <div class="sm_all">
  1483.             <div class="img two"></div>
  1484.             <h4>携带登机，出行好友，20寸<br>纯PC小金刚行李箱</h4>
  1485.             <p>￥269<span>￥499</span> </p>
  1486.           </div>
  1487.           <div class="sm_all">
  1488.             <div class="img three"></div>
  1489.             <h4>小胖墩单手可拎20寸纯PC<br>拉链拉杆箱</h4>
  1490.             <p>￥299<span>￥359</span> </p>
  1491.           </div>
  1492.           <div class="sm_all"></div>
  1493.         </div>
  1494.       </div>
  1495.     </div>
  1496.   </div>
  1497.   <!-- 数码家电 -->
  1498.   <div class="home_appliances common">
  1499.     <div class="cm">
  1500.       <div class="cm_top">
  1501.         <h3>数码家电</h3>
  1502.         <ul>
  1503.           <li>品质尖货</li>
  1504.           <li>/</li>
  1505.           <li>洗地机</li>
  1506.           <li>/</li>
  1507.           <li>生活防护小电器</li>
  1508.           <li>/</li>
  1509.           <li>电动牙刷/冲牙器</li>
  1510.           <li>/</li>
  1511.           <li>智能马桶</li>
  1512.           <li>/</li>
  1513.           <li>吸尘器/除螨仪</li>
  1514.           <li>/</li>
  1515.           <li>吹风机</li>
  1516.           <li><a href="javascript">查看更多 ></a></li>
  1517.  
  1518.         </ul>
  1519.  
  1520.       </div>
  1521.       <div class="cm_bottom">
  1522.         <div class="big ">
  1523.           <img src="./images/数码家电/big.webp" alt="">
  1524.         </div>
  1525.         <div class="small">
  1526.           <div class="sm_all">
  1527.             <div class="img one"></div>
  1528.             <h4>时刻照亮你的美指触式LED<br>子母化妆镜</h4>
  1529.             <p>￥109</p>
  1530.           </div>
  1531.           <div class="sm_all">
  1532.             <div class="img two"></div>
  1533.             <h4>【礼盒】经典爆款仿真人手<br>按摩腰靠日式减压</h4>
  1534.             <p>￥156.9<span> ￥219</span> </p>
  1535.           </div>
  1536.           <div class="sm_all">
  1537.             <div class="img three"></div>
  1538.             <h4>全净皓齿变速声波电动牙刷<br>【升级款】</h4>
  1539.             <p>￥155<span>￥219</span> </p>
  1540.           </div>
  1541.           <div class="sm_all">
  1542.             <div class="img four"></div>
  1543.             <h4>加湿香薰夜灯三合一，日式<br>超声波香薰机</h4>
  1544.             <p>￥129<span>￥199</span> </p>
  1545.           </div>
  1546.         </div>
  1547.       </div>
  1548.     </div>
  1549.   </div>
  1550.   <!-- 严选全球 -->
  1551.   <div class="yxworld common">
  1552.     <div class="cm">
  1553.       <div class="cm_top">
  1554.         <h3>严选全球</h3>
  1555.         <ul>
  1556.           <li>新品速递</li>
  1557.           <li>/</li>
  1558.           <li>明星乳胶</li>
  1559.           <li>/</li>
  1560.           <li>大牌补贴</li>
  1561.           <li><a href="javascript">查看更多 ></a></li>
  1562.  
  1563.         </ul>
  1564.  
  1565.       </div>
  1566.       <div class="cm_bottom">
  1567.         <div class="big ">
  1568.           <img src="./images/严选全球/big.webp" alt="">
  1569.         </div>
  1570.         <div class="small">
  1571.           <div class="sm_all">
  1572.             <div class="img one"></div>
  1573.             <h4>睡着按摩颈椎泰国93%含量<br>天然乳胶按摩枕</h4>
  1574.             <p>￥109<span>￥149</span> </p>
  1575.           </div>
  1576.           <div class="sm_all">
  1577.             <div class="img two"></div>
  1578.             <h4>严选礼品卡 100元面值</h4>
  1579.             <p>￥100</p>
  1580.           </div>
  1581.           <div class="sm_all">
  1582.             <div class="img three"></div>
  1583.             <h4>【大牌补贴】任天堂Switch<br>续航增强版国行</h4>
  1584.             <p>￥2320<span>￥2598</span> </p>
  1585.           </div>
  1586.           <div class="sm_all">
  1587.             <div class="img four"></div>
  1588.             <h4>泰国进口原液90%天然乳胶<br>枕高低调节儿童枕</h4>
  1589.             <p>￥99<span>￥169</span> </p>
  1590.           </div>
  1591.         </div>
  1592.       </div>
  1593.     </div>
  1594.   </div>
  1595.  
  1596.   <!-- 甄选家 -->
  1597.   <div class="selector">
  1598.     <div class="selector_main">
  1599.       <div class="selector_top">
  1600.         <h3>甄选家</h3>
  1601.         <span>我们在寻找，对生活有态度的你</span>
  1602.       </div>
  1603.       <div class="selector_bottom">
  1604.         <img src="./images/甄选家/1.webp" alt="">
  1605.         <img src="./images/甄选家/2.webp" alt="">
  1606.         <img src="./images/甄选家/3.webp" alt="">
  1607.       </div>
  1608.     </div>
  1609.  
  1610.   </div>
  1611.   <!-- 大家都在说 -->
  1612.   <div class="all_speaking">
  1613.     <div class="aspeaking">
  1614.       <div class="as_top">
  1615.         <h3>大家都在说</h3>
  1616.         <span>生活，没有统一标准</span>
  1617.       </div>
  1618.       <div class="as_bottom">
  1619.         <div class="swiper mySwiper">
  1620.           <div class="swiper-wrapper">
  1621.             <div class="swiper-slide">
  1622.               <div class="sw_content">
  1623.                 <div class="ct_img">
  1624.                   <img src="./images/大家都在说/1.webp" alt="">
  1625.                 </div>
  1626.                 <div class="ct_introduce">
  1627.                   <p>严***1<span>2023-05-07 14:05</span> </p>
  1628.                   <h3>严选小蛮腰系列腰背分区支撑人体工学椅</h3>
  1629.                   <span class="money">￥899</span>
  1630.                   <p class="pinglun">颜值在线</p>
  1631.                 </div>
  1632.               </div>
  1633.  
  1634.             </div>
  1635.             <div class="swiper-slide">
  1636.               <div class="sw_content">
  1637.                 <div class="ct_img">
  1638.                   <img src="./images/大家都在说/2.webp" alt="">
  1639.                 </div>
  1640.                 <div class="ct_introduce">
  1641.                   <p>一***你<span>2023-05-25 18:01</span> </p>
  1642.                   <h3>【囤货装】除臭抑菌双效升级，冰箱除味盒</h3>
  1643.                   <span class="money">￥64.9</span>
  1644.                   <p class="pinglun">冰箱除味盒收到，日期新鲜，发货快，味道好闻，香香的柚子味，已经使用上了，用了几天了，祛冰箱异味效果明显，真心满意</p>
  1645.                 </div>
  1646.               </div>
  1647.  
  1648.             </div>
  1649.             <div class="swiper-slide">
  1650.               <div class="sw_content">
  1651.                 <div class="ct_img">
  1652.                   <img src="./images/大家都在说/3.webp" alt="">
  1653.                 </div>
  1654.                 <div class="ct_introduce">
  1655.                   <p>嘉***姐<span>2023-05-23 09:18</span> </p>
  1656.                   <h3>【洁厕系列】抑菌去污香氛马桶洁厕剂500g</h3>
  1657.                   <span class="money">￥69.9</span>
  1658.                   <p class="pinglun">第一次买，挺好用的,一百还会购买</p>
  1659.                 </div>
  1660.               </div>
  1661.  
  1662.             </div>
  1663.             <div class="swiper-slide">
  1664.               <div class="sw_content">
  1665.                 <div class="ct_img">
  1666.                   <img src="./images/大家都在说/4.webp" alt="">
  1667.                 </div>
  1668.                 <div class="ct_introduce">
  1669.                   <p>Q***M<span>2023-04-07 09:31</span> </p>
  1670.                   <h3>23新品Camp!ng°一室一厅速开便携露营帐篷</h3>
  1671.                   <span class="money">￥599</span>
  1672.                   <p class="pinglun">还可以，够高，空间够大，还没出去露营，家里打开检查了下，感觉还不错，如果之前没买天幕，就可以买一套了，哈哈哈哈哈哈哈哈哈哈哈哈。</p>
  1673.                 </div>
  1674.               </div>
  1675.  
  1676.             </div>
  1677.             <div class="swiper-slide">
  1678.               <div class="sw_content">
  1679.                 <div class="ct_img">
  1680.                   <img src="./images/大家都在说/5.webp" alt="">
  1681.                 </div>
  1682.                 <div class="ct_introduce">
  1683.                   <p>1***2<span>2023-05-20 21:48</span> </p>
  1684.                   <h3>臻语竹韵3层本色抽纸/卷纸</h3>
  1685.                   <span class="money">￥18.9</span>
  1686.                   <p class="pinglun">超大—袋，纸张柔软，没有漂白、自然色。用着放心</p>
  1687.                 </div>
  1688.               </div>
  1689.  
  1690.             </div>
  1691.             <div class="swiper-slide">
  1692.               <div class="sw_content">
  1693.                 <div class="ct_img">
  1694.                   <img src="./images/大家都在说/6.webp" alt="">
  1695.                 </div>
  1696.                 <div class="ct_introduce">
  1697.                   <p>A***2<span>2023-05-31 20:49</span> </p>
  1698.                   <h3>沙丘”运动舒缓情侣外穿拖鞋整鞋抗菌</h3>
  1699.                   <span class="money">￥149</span>
  1700.                   <p class="pinglun">穿了很舒服，这款鞋子设计我太喜欢了，穿了好多天了弄的有点脏了，确实不错，硬中带软很舒适</p>
  1701.                 </div>
  1702.               </div>
  1703.  
  1704.             </div>
  1705.             <div class="swiper-slide">
  1706.               <div class="sw_content">
  1707.                 <div class="ct_img">
  1708.                   <img src="./images/大家都在说/7.webp" alt="">
  1709.                 </div>
  1710.                 <div class="ct_introduce">
  1711.                   <p>刘***鸭<span>2023-06-01 01:34</span> </p>
  1712.                   <h3>草本萃取,日本制造和草汉润喉糖</h3>
  1713.                   <span class="money">￥25.9</span>
  1714.                   <p class="pinglun">还没吃，先好评吧，对物流很不满意，那么大一个箱子，不给送上门，费了老大劲才搬回去，严选就这种服务吗</p>
  1715.                 </div>
  1716.               </div>
  1717.  
  1718.             </div>
  1719.           </div>
  1720.           <div class="swiper-button-next"></div>
  1721.           <div class="swiper-button-prev"></div>
  1722.           <div class="swiper-pagination"></div>
  1723.         </div>
  1724.       </div>
  1725.     </div>
  1726.   </div>
  1727.   <!-- footer-top-->
  1728.   <div class="footer-top">
  1729.     <div class="ft_nr">
  1730.       <div class="ft one">
  1731.         <h4>客服服务</h4>
  1732.         <div>
  1733.           <img src="./images/客服.png" alt="">
  1734.           <p>在线客服</p>
  1735.         </div>
  1736.         <div>
  1737.           <img src="./images/信息.png" alt="">
  1738.           <p>用户反馈</p>
  1739.         </div>
  1740.       </div>
  1741.       <div class="ft">
  1742.         <div class="two">
  1743.           <h4>何为网易严选</h4>
  1744.           <p>网易严选是深受新中产喜爱的生活方式品牌, 为消费者提供一站式、全品类、全方位的美好生活解决方案。我们通过简约、实用、舒适的美学设计,
  1745.             不断带来高品质灵感好物,陪伴3000万新中产用户「活出自己喜欢的样子」,共同倡导多元化的生活价值主张——每个人都可以把生活的选择权交还给自己。</p>
  1746.           <div class="attention">
  1747.             <span>关注我们:</span>
  1748.             <img src="./images/weibo.png" alt="">
  1749.             <img src="./images/微信.png" alt="">
  1750.             <img src="./images/douyin.jpg" alt="">
  1751.           </div>
  1752.  
  1753.         </div>
  1754.  
  1755.       </div>
  1756.       <div class="ft">
  1757.         <div class="three">
  1758.           <h4>扫码下载严选APP</h4>
  1759.           <img src="./images/二维码.png" alt="">
  1760.           <p>下载领大额新人红包</p>
  1761.         </div>
  1762.       </div>
  1763.     </div>
  1764.   </div>
  1765.  
  1766.   <!-- footer-bottom -->
  1767.   <div class="footer-bottom">
  1768.     <div class="fb">
  1769.       <div class="fb_top">
  1770.         <div>
  1771.           <img src="./images/易.jpg" alt="">
  1772.           <span>网易自营电商</span>
  1773.         </div>
  1774.         <div>
  1775.           <img src="./images/安全.jpg" alt="">
  1776.           <span>30天无忧退换货</span>
  1777.         </div>
  1778.         <div>
  1779.           <img src="./images/免邮费.jpg" alt="">
  1780.           <span>满99元免邮费</span>
  1781.         </div>
  1782.         <div>
  1783.           <img src="./images/品质.jpg" alt="">
  1784.           <span>品质保证</span>
  1785.         </div>
  1786.       </div>
  1787.       <div class="fb_bottom">
  1788.         <ul class="one">
  1789.           <li>关于我们</li>
  1790.           <li>帮助中心</li>
  1791.           <li>售后服务</li>
  1792.           <li>配送与验收</li>
  1793.           <li>商务合作</li>
  1794.           <li>企业采购</li>
  1795.           <li>开放平台</li>
  1796.           <li>搜索推荐</li>
  1797.           <li>友情链接</li>
  1798.           <li>廉正举报</li>
  1799.         </ul>
  1800.         <ul>
  1801.           <li>食品经营许可证:JY13301080111719</li>
  1802.           <li>出版物经营许可证:新出发滨字第012号</li>
  1803.           <li>妙得CP证号:ICP证浙B2-20160106 </li>
  1804.           <li>浙杭食药监械经营备20171029号</li>
  1805.           <li>营业执照</li>
  1806.           <li>网易公司版权所有◎1997-2023</li>
  1807.         </ul>
  1808.         <ul>
  1809.           <li>无线电发射设备销售备案:4220201109655</li>
  1810.           <li>互联网药品信息服务资格证:(浙)-经营性-2022-075</li>
  1811.           <li>医疗器械网络交易第三方平台备案:(浙)网械平台备字[2020)第00029号</li>
  1812.         </ul>
  1813.         <ul>
  1814.           <li>(浙杭)网械企备字[2019]第00119号</li>
  1815.           <li>(粤）网械平台备字(2019）第00004号</li>
  1816.           <li>(粤)-非经营性-2016-0023进口冷链食品管理承诺书</li>
  1817.         </ul>
  1818.         <ul>
  1819.           <li>食品经营许可证:JY14207050007694 </li>
  1820.           <li>浙江省网络食品销售第三方平台提供者备案:浙网食A33010009</li>
  1821.           <li>单用途商业预付卡备案证:33010OAACOO024
  1822.             <img src="./images/网络工商.gif" alt="">
  1823.           </li>
  1824.         </ul>
  1825.         <ul>
  1826.           <li>出版物网络交易平台服务经营备案:新出发浙备字第2021006号</li>
  1827.         </ul>
  1828.       </div>
  1829.     </div>
  1830.  
  1831.   </div>
  1832.   <script src="./js/main.js"></script>
  1833.   <script src="./css/swiper-8.4.7/swiper/swiper-bundle.min.js"></script>
  1834.   <script>
  1835.     var swiper = new Swiper(".mySwiper", {
  1836.       slidesPerView: 3,
  1837.       spaceBetween: 30,
  1838.       slidesPerGroup: 3,
  1839.       loop: true,
  1840.       loopFillGroupWithBlank: true,
  1841.       pagination: {
  1842.         el: ".swiper-pagination",
  1843.         clickable: true,
  1844.       },
  1845.       autoplay: {
  1846.         delay: 2500,
  1847.         disableOnInteraction: false,
  1848.       },
  1849.       navigation: {
  1850.         nextEl: ".swiper-button-next",
  1851.         prevEl: ".swiper-button-prev",
  1852.       },
  1853.     });
  1854.  
  1855.   </script>
  1856. </body>
  1857.  
  1858. </html>

(2)main.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   list-style: none;
  5.   text-decoration: none;
  6.   font-family: "微软雅黑";
  7. }
  8. a {
  9.   cursor: pointer;
  10. }
  11. .nav {
  12.   width: 100%;
  13.   height: 36px;
  14.   background-color: #333;
  15.   margin: auto;
  16.   position: relative;
  17. }
  18. .nav .nav_right {
  19.   width: 1200px;
  20.   margin: auto;
  21. }
  22. .nav .nav_right .right_menu {
  23.   float: right;
  24. }
  25. .nav .nav_right .right_menu .item {
  26.   float: left;
  27.   line-height: 36px;
  28. }
  29. .nav .nav_right .right_menu .item a {
  30.   color: #ccc;
  31.   padding: 0 10px;
  32.   border-right: 1px solid #ccc;
  33.   font-size: 12px;
  34. }
  35. .nav .nav_right .right_menu .item a:hover {
  36.   color: white;
  37. }
  38. .nav .nav_right .right_menu .item div {
  39.   position: relative;
  40.   height: 160px;
  41.   text-align: center;
  42.   border: 1px solid #ccc;
  43.   display: none;
  44.   background-color: #fff;
  45.   z-index: 100;
  46. }
  47. .nav .nav_right .right_menu .item div ul li .arrow {
  48.   display: block;
  49.   width: 15px;
  50.   height: 15px;
  51.   background: url(../images/icon-yxtop.webp);
  52.   background-repeat: no-repeat;
  53.   background-position: -5px -1410px;
  54.   border: 0;
  55.   position: absolute;
  56.   left: 30px;
  57.   top: -10px;
  58. }
  59. .nav .nav_right .right_menu .item div ul li a {
  60.   border-bottom: 1px solid #ccc;
  61.   padding: 6px 10px;
  62.   border-right: 0;
  63. }
  64. .nav .nav_right .right_menu .item div ul li a:hover {
  65.   color: red;
  66. }
  67. .nav .nav_right .right_menu .item .img {
  68.   background-color: #fff;
  69.   margin-left: -20px;
  70.   width: 30px;
  71.   height: 30px;
  72. }
  73. .nav .nav_right::after {
  74.   display: block;
  75.   content: "";
  76.   clear: both;
  77. }
  78. .logo_nav {
  79.   width: 1200px;
  80.   height: 140px;
  81.   margin: auto;
  82. }
  83. .logo_nav .top {
  84.   width: 1200px;
  85.   height: 100px;
  86.   margin: auto;
  87.   position: relative;
  88. }
  89. .logo_nav .top .logo {
  90.   position: absolute;
  91.   top: 20px;
  92.   left: 20px;
  93.   width: 200px;
  94.   height: 60px;
  95.   background: url(../images/icon-yxtop.webp);
  96.   background-position: 5px -950px;
  97.   background-repeat: no-repeat;
  98. }
  99. .logo_nav .top .search {
  100.   position: absolute;
  101.   top: 40px;
  102.   left: 350px;
  103.   width: 532px;
  104. }
  105. .logo_nav .top .search input {
  106.   width: 442px;
  107.   height: 38px;
  108.   border-radius: 15px;
  109.   border: 1px solid #CC9756;
  110.   padding: 0 35px;
  111. }
  112. .logo_nav .top .search div {
  113.   position: absolute;
  114.   top: -1px;
  115.   left: 5px;
  116.   width: 40px;
  117.   height: 35px;
  118.   background: url(../images/icon-yxtop.webp);
  119.   background-repeat: no-repeat;
  120.   background-position: 0 -1030px;
  121. }
  122. .logo_nav .top .search input:focus {
  123.   outline: none;
  124. }
  125. .logo_nav .top .search button {
  126.   position: absolute;
  127.   left: 430px;
  128.   width: 90px;
  129.   height: 40px;
  130.   background-color: #CC9756;
  131.   color: white;
  132.   border: 0 ;
  133.   border-radius: 15px;
  134. }
  135. .logo_nav .top .shopcar {
  136.   position: absolute;
  137.   top: 40px;
  138.   right: 10px;
  139.   border: 1px solid #CC9756;
  140.   width: 150px;
  141.   height: 40px;
  142.   border-radius: 15px;
  143. }
  144. .logo_nav .top .shopcar .icon_car {
  145.   display: inline-block;
  146.   width: 50px;
  147.   height: 40px;
  148.   margin-left: 10px;
  149.   background: url(../images/icon-yxtop.webp);
  150.   background-position: 0 -350px;
  151. }
  152. .logo_nav .top .shopcar .icon_car .car {
  153.   position: absolute;
  154.   top: 10px;
  155.   left: 60px;
  156. }
  157. .logo_nav .top .shopcar .icon_car .num {
  158.   position: absolute;
  159.   top: 10px;
  160.   left: 20px;
  161.   width: 20px;
  162.   height: 20px;
  163.   text-align: center;
  164.   border-radius: 50%;
  165.   background-color: #CC9756;
  166.   color: white;
  167. }
  168. .logo_nav .top .shopcar .num {
  169.   margin-left: 100px;
  170. }
  171. .bottom {
  172.   background-color: #fff;
  173.   position: absolute;
  174.   z-index: 20;
  175.   width: 100%;
  176.   height: 40px;
  177.   top: 135px;
  178. }
  179. .bottom .menu {
  180.   display: flex;
  181.   width: 1200px;
  182.   height: 40px;
  183.   margin: auto;
  184.   line-height: 40px;
  185. }
  186. .bottom .menu .menu_logo {
  187.   display: none;
  188. }
  189. .bottom .menu .item {
  190.   float: left;
  191.   z-index: 20;
  192. }
  193. .bottom .menu .item .none {
  194.   background-color: #fff;
  195. }
  196. .bottom .menu .item a {
  197.   color: #333;
  198.   font-size: 14px;
  199.   font-weight: bolder;
  200.   padding: 0 20px 3px;
  201. }
  202. .bottom .menu .item a:hover span {
  203.   color: #CC9756;
  204.   border-bottom: 3px solid #CC9756;
  205. }
  206. .bottom .menu .item .shop {
  207.   display: none;
  208.   position: absolute;
  209.   left: 20px;
  210.   width: 500px;
  211.   height: 650px;
  212.   border: 1px solid #ddd;
  213. }
  214. .bottom .menu .item .shop .bedshop .bs_top {
  215.   width: 460px ;
  216.   margin: auto;
  217. }
  218. .bottom .menu .item .shop .bedshop .bs_top h3 {
  219.   font-size: 16px;
  220.   font-weight: 700;
  221.   display: inline-block;
  222.   margin-top: 10px;
  223. }
  224. .bottom .menu .item .shop .bedshop .bs_top h3:nth-child(1) {
  225.   width: 280px;
  226.   border-bottom: 1px solid #ddd;
  227. }
  228. .bottom .menu .item .shop .bedshop .bs_top h3:nth-child(2) {
  229.   width: 150px;
  230.   margin-left: 10px;
  231.   border-bottom: 1px solid #ddd;
  232.   z-index: 1;
  233. }
  234. .bottom .menu .item .shop .bedshop .bs_bottom {
  235.   width: 460px;
  236.   margin: auto;
  237.   display: flex;
  238. }
  239. .bottom .menu .item .shop .bedshop .bs_bottom ul li {
  240.   margin-top: 10px;
  241. }
  242. .bottom .menu .item .shop .bedshop .bs_bottom ul img {
  243.   width: 57px;
  244.   height: 57px;
  245.   vertical-align: middle;
  246. }
  247. .bottom .menu .item .shop .bedshop .bs_bottom ul span {
  248.   vertical-align: middle;
  249. }
  250. .bottom .menu .item .shop .bedshop .bs_bottom ul:nth-child(2) {
  251.   margin-left: 30px;
  252. }
  253. .bottom .menu .item .shop .bedshop .bs_bottom ul:nth-child(3) {
  254.   margin-left: 20px;
  255. }
  256. .bottom .menu .item .pet {
  257.   display: none;
  258.   position: absolute;
  259.   left: 50px;
  260.   width: 400px;
  261.   height: 450px;
  262.   border: 1px solid #ddd;
  263. }
  264. .bottom .menu .item .pet .pet_top {
  265.   width: 360px;
  266.   margin: auto;
  267. }
  268. .bottom .menu .item .pet .pet_top h3 {
  269.   font-size: 16px;
  270.   font-weight: 700;
  271.   display: inline-block;
  272.   margin-top: 10px;
  273. }
  274. .bottom .menu .item .pet .pet_top h3:nth-child(1) {
  275.   width: 200px;
  276.   border-bottom: 1px solid #ddd;
  277. }
  278. .bottom .menu .item .pet .pet_top h3:nth-child(2) {
  279.   width: 140px;
  280.   margin-left: 10px;
  281.   border-bottom: 1px solid #ddd;
  282.   z-index: 1;
  283. }
  284. .bottom .menu .item .pet .pet_bottom {
  285.   width: 360px;
  286.   display: flex;
  287.   margin: auto;
  288. }
  289. .bottom .menu .item .pet .pet_bottom ul li {
  290.   margin-top: 15px;
  291. }
  292. .bottom .menu .item .pet .pet_bottom ul img {
  293.   width: 57px;
  294.   height: 57px;
  295.   vertical-align: middle;
  296. }
  297. .bottom .menu .item .pet .pet_bottom ul span {
  298.   vertical-align: middle;
  299. }
  300. .bottom .menu .item .pet .pet_bottom ul:nth-child(2) {
  301.   margin-left: 90px;
  302. }
  303. .bottom .menu .item .colthes {
  304.   display: none;
  305.   position: absolute;
  306.   left: 20px;
  307.   width: 800px;
  308.   height: 640px;
  309.   border: 1px solid #ddd;
  310. }
  311. .bottom .menu .item .colthes .cs_top {
  312.   width: 760px;
  313.   margin: auto;
  314. }
  315. .bottom .menu .item .colthes .cs_top h3 {
  316.   display: inline-block;
  317.   width: 105px;
  318.   margin-right: 15px;
  319.   font-size: 16px;
  320.   font-weight: 700;
  321.   border-bottom: 1px solid #ddd;
  322. }
  323. .bottom .menu .item .colthes .cs_bottom {
  324.   width: 760px;
  325.   margin: auto;
  326.   display: flex;
  327. }
  328. .bottom .menu .item .colthes .cs_bottom ul li {
  329.   margin-top: 15px;
  330. }
  331. .bottom .menu .item .colthes .cs_bottom ul img {
  332.   width: 57px;
  333.   height: 57px;
  334.   vertical-align: middle;
  335. }
  336. .bottom .menu .item .colthes .cs_bottom ul span {
  337.   vertical-align: middle;
  338. }
  339. .bottom .menu .item .beverage {
  340.   display: none;
  341.   position: absolute;
  342.   left: 180px;
  343.   width: 580px;
  344.   height: 440px;
  345.   border: 1px solid #ddd;
  346. }
  347. .bottom .menu .item .beverage .beverage_top {
  348.   width: 540px;
  349.   display: flex;
  350.   justify-content: space-around;
  351.   margin: auto;
  352. }
  353. .bottom .menu .item .beverage .beverage_top h3 {
  354.   font-size: 16px;
  355.   font-weight: 700;
  356.   display: inline-block;
  357.   width: 130px;
  358.   border-bottom: 1px solid #ddd;
  359. }
  360. .bottom .menu .item .beverage .beverage_bottom {
  361.   width: 540px;
  362.   margin: auto;
  363.   display: flex;
  364.   justify-content: space-around;
  365. }
  366. .bottom .menu .item .beverage .beverage_bottom ul li {
  367.   margin-top: 15px;
  368. }
  369. .bottom .menu .item .beverage .beverage_bottom ul img {
  370.   width: 57px;
  371.   height: 57px;
  372.   vertical-align: middle;
  373. }
  374. .bottom .menu .item .beverage .beverage_bottom ul span {
  375.   vertical-align: middle;
  376. }
  377. .bottom .menu .item .cleaning {
  378.   display: none;
  379.   position: absolute;
  380.   left: 120px;
  381.   width: 910px;
  382.   height: 300px;
  383.   border: 1px solid #ddd;
  384. }
  385. .bottom .menu .item .cleaning .cl_top {
  386.   width: 870px;
  387.   display: flex;
  388.   justify-content: space-around;
  389.   margin: auto;
  390. }
  391. .bottom .menu .item .cleaning .cl_top h3 {
  392.   display: inline-block;
  393.   width: 150px;
  394.   border-bottom: 1px solid #ddd;
  395.   font-size: 16px;
  396.   font-weight: 700;
  397. }
  398. .bottom .menu .item .cleaning .cl_bottom {
  399.   display: flex;
  400.   justify-content: space-around;
  401.   width: 870px;
  402.   margin: auto;
  403. }
  404. .bottom .menu .item .cleaning .cl_bottom ul li {
  405.   margin-top: 15px;
  406. }
  407. .bottom .menu .item .cleaning .cl_bottom ul img {
  408.   width: 57px;
  409.   height: 57px;
  410.   vertical-align: middle;
  411. }
  412. .bottom .menu .item .cleaning .cl_bottom ul span {
  413.   vertical-align: middle;
  414. }
  415. .bottom .menu .item .mb_supplies {
  416.   display: none;
  417.   position: absolute;
  418.   left: 110px;
  419.   width: 1000px;
  420.   height: 540px;
  421.   border: 1px solid #ddd;
  422. }
  423. .bottom .menu .item .mb_supplies .mb_top {
  424.   width: 960px;
  425.   margin: auto;
  426.   display: flex;
  427.   justify-content: space-around;
  428. }
  429. .bottom .menu .item .mb_supplies .mb_top h3 {
  430.   font-size: 16px;
  431.   font-weight: 700;
  432.   display: inline-block;
  433.   width: 120px;
  434.   border-bottom: 1px solid #ddd;
  435. }
  436. .bottom .menu .item .mb_supplies .mb_bottom {
  437.   width: 960px;
  438.   margin: auto;
  439.   display: flex;
  440.   justify-content: space-around;
  441. }
  442. .bottom .menu .item .mb_supplies .mb_bottom ul li {
  443.   margin-top: 15px;
  444. }
  445. .bottom .menu .item .mb_supplies .mb_bottom ul img {
  446.   width: 57px;
  447.   height: 57px;
  448.   vertical-align: middle;
  449. }
  450. .bottom .menu .item .mb_supplies .mb_bottom ul span {
  451.   vertical-align: middle;
  452. }
  453. .bottom .menu .item .sports {
  454.   display: none;
  455.   position: absolute;
  456.   left: 400px;
  457.   width: 580px;
  458.   height: 510px;
  459.   border: 1px solid #ddd;
  460. }
  461. .bottom .menu .item .sports .sports_top {
  462.   width: 540px;
  463.   margin: auto;
  464.   display: flex;
  465.   justify-content: space-around;
  466. }
  467. .bottom .menu .item .sports .sports_top h3 {
  468.   font-size: 16px;
  469.   font-weight: 700;
  470.   display: inline-block;
  471.   width: 150px;
  472.   border-bottom: 1px solid #ddd;
  473. }
  474. .bottom .menu .item .sports .sports_bottom {
  475.   width: 540px;
  476.   margin: auto;
  477.   display: flex;
  478.   justify-content: space-around;
  479. }
  480. .bottom .menu .item .sports .sports_bottom ul li {
  481.   margin-top: 15px;
  482. }
  483. .bottom .menu .item .sports .sports_bottom ul img {
  484.   width: 57px;
  485.   height: 57px;
  486.   vertical-align: middle;
  487. }
  488. .bottom .menu .item .sports .sports_bottom ul span {
  489.   vertical-align: middle;
  490. }
  491. .bottom .menu .item .digital {
  492.   display: none;
  493.   position: absolute;
  494.   left: 0;
  495.   width: 1200px;
  496.   height: 510px;
  497.   border: 1px solid #ddd;
  498. }
  499. .bottom .menu .item .digital .digital_top {
  500.   width: 1160px;
  501.   margin: auto;
  502.   display: flex;
  503.   justify-content: space-around;
  504. }
  505. .bottom .menu .item .digital .digital_top h3 {
  506.   font-size: 16px;
  507.   font-weight: 700;
  508.   display: inline-block;
  509.   width: 130px;
  510.   border-bottom: 1px solid #ddd;
  511. }
  512. .bottom .menu .item .digital .digital_bottom {
  513.   width: 1160px;
  514.   margin: auto;
  515.   display: flex;
  516.   justify-content: space-around;
  517. }
  518. .bottom .menu .item .digital .digital_bottom ul li {
  519.   margin-top: 15px;
  520. }
  521. .bottom .menu .item .digital .digital_bottom ul img {
  522.   width: 57px;
  523.   height: 57px;
  524.   vertical-align: middle;
  525. }
  526. .bottom .menu .item .digital .digital_bottom ul span {
  527.   vertical-align: middle;
  528. }
  529. .bottom .menu .item .world {
  530.   display: none ;
  531.   position: absolute;
  532.   right: 0;
  533.   width: 570px;
  534.   height: 150px;
  535.   border: 1px solid #ddd;
  536. }
  537. .bottom .menu .item .world .world_top {
  538.   width: 530px;
  539.   margin: auto;
  540.   display: flex;
  541.   justify-content: space-around;
  542. }
  543. .bottom .menu .item .world .world_top h3 {
  544.   font-size: 16px;
  545.   font-weight: 700;
  546.   display: inline-block;
  547.   width: 150px;
  548.   border-bottom: 1px solid #ddd;
  549. }
  550. .bottom .menu .item .world .world_bottom {
  551.   width: 530px;
  552.   margin: auto;
  553.   display: flex;
  554.   justify-content: space-around;
  555. }
  556. .bottom .menu .item .world .world_bottom ul li {
  557.   margin-top: 15px;
  558. }
  559. .bottom .menu .item .world .world_bottom ul img {
  560.   width: 57px;
  561.   height: 57px;
  562.   vertical-align: middle;
  563. }
  564. .bottom .menu .item .world .world_bottom ul span {
  565.   vertical-align: middle;
  566. }
  567. .bottom .menu .item:nth-child(10) {
  568.   border-right: 1px solid #ddd;
  569. }
  570. .bottom .menu .menu_icon {
  571.   display: none;
  572. }
  573. .bottom .menu .menu_icon .menu_sousuo,
  574. .bottom .menu .menu_icon .menu_man,
  575. .bottom .menu .menu_icon .menu_car {
  576.   display: inline-block;
  577.   margin-left: 40px;
  578.   margin-top: 5px;
  579. }
  580. .bottom .menu .menu_icon .menu_sousuo img,
  581. .bottom .menu .menu_icon .menu_man img,
  582. .bottom .menu .menu_icon .menu_car img {
  583.   width: 20px;
  584.   height: 20px;
  585. }
  586. .bottom .menu .menu_icon .menu_car {
  587.   position: relative;
  588. }
  589. .bottom .menu .menu_icon .menu_car .subscript {
  590.   width: 15px;
  591.   height: 15px;
  592.   position: absolute;
  593.   top: 0;
  594.   left: 12px;
  595.   border-radius: 50%;
  596.   background-color: red;
  597.   color: #fff;
  598.   text-align: center;
  599.   line-height: 15px;
  600. }
  601. .bottom .menu::after {
  602.   display: block;
  603.   content: "";
  604.   clear: both;
  605. }
  606. .advertisement {
  607.   width: 100%;
  608.   height: 420px;
  609.   background: url(../images/广告.webp);
  610.   background-repeat: no-repeat;
  611.   margin: auto;
  612. }
  613. .new {
  614.   position: relative;
  615.   width: 100%;
  616.   height: 510px;
  617. }
  618. .new .newshop {
  619.   width: 1200px;
  620.   height: 430px;
  621.   margin: 25px auto;
  622. }
  623. .new .newshop .newshop_top {
  624.   width: 100%;
  625.   height: 48px;
  626.   margin-bottom: 20px;
  627. }
  628. .new .newshop .newshop_top h3 {
  629.   display: inline;
  630.   font-size: 28px;
  631.   font-weight: 700;
  632.   margin-right: 20px;
  633.   line-height: 48px;
  634. }
  635. .new .newshop .newshop_top h3:hover {
  636.   cursor: pointer;
  637.   color: #BC3B3B;
  638. }
  639. .new .newshop .newshop_top span {
  640.   font-size: 14px;
  641.   line-height: 1;
  642. }
  643. .new .newshop .newshop_top .end {
  644.   float: right;
  645.   margin-top: 25px;
  646. }
  647. .new .newshop .newshop_top span:hover {
  648.   cursor: pointer;
  649.   color: #CC9756;
  650. }
  651. .new .newshop .newshop_bottom {
  652.   width: 100%;
  653.   height: 370px;
  654. }
  655. .new .newshop .newshop_bottom .swiper {
  656.   width: 100%;
  657.   height: 370px;
  658. }
  659. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content {
  660.   width: 265px;
  661.   height: 362px;
  662.   margin: auto;
  663. }
  664. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content .ct_img {
  665.   width: 265px;
  666.   height: 265px;
  667. }
  668. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content .ct_introduce {
  669.   width: 265px;
  670.   height: 97px;
  671.   margin: auto;
  672. }
  673. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content .ct_introduce p {
  674.   cursor: pointer;
  675.   margin: auto;
  676.   padding: 10px 0;
  677.   width: 156px;
  678.   text-align: center;
  679.   font-size: 13px;
  680.   font-weight: 700;
  681. }
  682. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content .ct_introduce p:nth-child(2) {
  683.   font-weight: normal;
  684.   color: #D4282D;
  685. }
  686. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content .ct_introduce span {
  687.   color: #999999;
  688.   font-size: 12px;
  689.   text-decoration: line-through;
  690. }
  691. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content .one {
  692.   background: url(../images/swiper-images/榛果拿铁.webp);
  693.   background-color: #F4F4F4;
  694. }
  695. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content .two {
  696.   background: url(../images/swiper-images/洁厕系列.webp);
  697.   background-color: #F4F4F4;
  698. }
  699. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content .three {
  700.   background: url(../images/swiper-images/迪士尼正版.webp);
  701.   background-color: #F4F4F4;
  702. }
  703. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content .four {
  704.   background: url(../images/swiper-images/宠物冰垫.webp);
  705.   background-color: #F4F4F4;
  706. }
  707. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content:hover .ct_introduce {
  708.   background-color: #F4F0EA;
  709. }
  710. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content:hover .one {
  711.   background: url(../images/swiper-images/榛果拿铁2.webp);
  712. }
  713. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content:hover .two {
  714.   background: url(../images/swiper-images/洁厕系列2.webp);
  715. }
  716. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content:hover .three {
  717.   background: url(../images/swiper-images/迪士尼正版2.webp);
  718. }
  719. .new .newshop .newshop_bottom .swiper .swiper-slide .sw_content:hover .four {
  720.   background: url(../images/swiper-images/宠物冰垫2.webp);
  721. }
  722. .sale_list {
  723.   float: left;
  724.   margin-left: 30px;
  725.   margin-top: 40px;
  726.   width: 110px;
  727.   height: 363px;
  728.   position: sticky;
  729.   top: 40px;
  730.   border: 1px solid #ddd;
  731. }
  732. .sale_list ul {
  733.   display: flex;
  734.   flex-direction: column;
  735.   background-color: #fff;
  736. }
  737. .sale_list ul .top {
  738.   text-align: center;
  739.   color: #BB3343;
  740.   font-size: 16px;
  741.   font-weight: 700;
  742.   height: 35px;
  743.   line-height: 35px;
  744.   background: url(../images/热销榜/bg.webp);
  745.   border-bottom: 1px solid #ddd;
  746. }
  747. .sale_list ul li:not(.top) {
  748.   display: block;
  749.   width: 85px;
  750.   margin: auto;
  751.   height: 35px;
  752.   border-bottom: 1px solid #ddd;
  753. }
  754. .sale_list ul li:not(.top) img {
  755.   color: #BB3343;
  756.   display: inline;
  757.   width: 30px;
  758.   height: 30px;
  759.   vertical-align: middle;
  760. }
  761. .sale_list ul li:not(.top) span {
  762.   float: right;
  763.   margin-right: 10px;
  764.   display: table-cell;
  765.   vertical-align: middle;
  766.   font-size: 12px;
  767. }
  768. .sale_list ul li:hover span {
  769.   cursor: pointer;
  770.   color: #BB3343;
  771. }
  772. .list_right {
  773.   float: right;
  774.   margin-top: 40px;
  775.   width: 110px;
  776.   height: 363px;
  777.   position: sticky;
  778.   top: 40px;
  779.   border: 1px solid #ddd;
  780. }
  781. .list_right ul {
  782.   display: flex;
  783.   flex-direction: column;
  784.   background-color: #fff;
  785. }
  786. .list_right ul li {
  787.   display: block;
  788.   width: 90px;
  789.   margin: auto;
  790.   padding: 10px 0;
  791.   text-align: center;
  792.   border-bottom: 1px solid #ddd;
  793. }
  794. .list_right ul li img {
  795.   display: block;
  796.   width: 70px;
  797.   height: 70px;
  798.   margin: auto;
  799. }
  800. .list_right ul li span {
  801.   color: #BC3B3B;
  802.   font-size: 12PX;
  803. }
  804. .list_right ul li p {
  805.   font-size: 14px;
  806.   color: #666666;
  807. }
  808. .list_right ul li .dingyue {
  809.   width: 52px;
  810.   height: 52px;
  811.   background: url(../images/icon-yxfixedtool.webp);
  812.   background-repeat: no-repeat;
  813.   background-position: 0 -1055px;
  814.   margin: auto;
  815. }
  816. .list_right ul li .zaixiankefu {
  817.   width: 65px;
  818.   height: 70px;
  819.   background: url(../images/icon-yxfixedtool.webp);
  820.   background-repeat: no-repeat;
  821.   background-position: 0 -250px;
  822.   margin: auto;
  823. }
  824. .recommendation {
  825.   width: 100%;
  826.   height: 740px;
  827.   background-color: #F4F0EA;
  828.   display: flex;
  829.   justify-content: center;
  830.   align-items: center;
  831. }
  832. .recommendation .rd {
  833.   width: 1200px;
  834.   height: 620px;
  835. }
  836. .recommendation .rd .rd_top {
  837.   width: 100%;
  838.   height: 48px;
  839.   display: flex;
  840. }
  841. .recommendation .rd .rd_top h3 {
  842.   font-size: 28px;
  843.   margin-right: 20px;
  844.   line-height: 48px;
  845. }
  846. .recommendation .rd .rd_top ul {
  847.   height: 48px;
  848.   display: flex;
  849. }
  850. .recommendation .rd .rd_top ul li {
  851.   line-height: 48px;
  852.   margin-right: 50px ;
  853. }
  854. .recommendation .rd .rd_top ul li a {
  855.   padding: 0 5px 5px 5px;
  856. }
  857. .recommendation .rd .rd_top ul li .current {
  858.   color: #b4a078;
  859.   border-bottom: 1px solid #b4a078;
  860. }
  861. .recommendation .rd .rd_top span {
  862.   margin-left: 738px;
  863.   line-height: 48px;
  864. }
  865. .recommendation .rd .rd_bottom {
  866.   width: 100%;
  867.   height: 552px;
  868.   margin-top: 20px;
  869. }
  870. .recommendation .rd .rd_bottom .rd_common {
  871.   position: relative;
  872.   display: none;
  873. }
  874. .recommendation .rd .rd_bottom .rd_common h4:hover {
  875.   color: #B4A078;
  876. }
  877. .recommendation .rd .rd_bottom .rd_common .rdc_left {
  878.   width: 390px;
  879.   height: 552px;
  880.   background-color: #fff;
  881. }
  882. .recommendation .rd .rd_bottom .rd_common .rdc_left .rdcl_top {
  883.   width: 390px;
  884.   height: 400px;
  885.   border-bottom: 1px solid #ccc;
  886. }
  887. .recommendation .rd .rd_bottom .rd_common .rdc_left .rdcl_top img {
  888.   width: 320px;
  889.   height: 320px;
  890.   margin: 40px 35px;
  891. }
  892. .recommendation .rd .rd_bottom .rd_common .rdc_left .rdcl_top img:hover {
  893.   transform: scale(1.1);
  894.   transition: 0.5s ease;
  895. }
  896. .recommendation .rd .rd_bottom .rd_common .rdc_left h4 {
  897.   margin-top: 30px;
  898.   text-align: center;
  899. }
  900. .recommendation .rd .rd_bottom .rd_common .rdc_left p {
  901.   font-size: 18px;
  902.   color: #D4282D;
  903.   text-align: center;
  904.   margin-top: 30px;
  905. }
  906. .recommendation .rd .rd_bottom .rd_common .rdc_left p span {
  907.   font-size: 14px;
  908.   color: #999999;
  909.   text-decoration: line-through;
  910.   margin-left: 5px;
  911. }
  912. .recommendation .rd .rd_bottom .rd_common .rdc_right {
  913.   position: absolute;
  914.   top: 0;
  915.   left: 390px;
  916.   display: flex;
  917.   flex-wrap: wrap;
  918.   width: 810px;
  919.   height: 552px;
  920. }
  921. .recommendation .rd .rd_bottom .rd_common .rdc_right .rdcr_common {
  922.   background-color: #fff;
  923.   margin-left: 30px;
  924.   margin-right: 5px;
  925.   width: 220px;
  926.   height: 270px;
  927. }
  928. .recommendation .rd .rd_bottom .rd_common .rdc_right .rdcr_common .rdcr_top {
  929.   width: 220px;
  930.   height: 180px;
  931.   border-bottom: 1px solid #ccc;
  932. }
  933. .recommendation .rd .rd_bottom .rd_common .rdc_right .rdcr_common .rdcr_top img {
  934.   width: 180px;
  935.   height: 180px;
  936.   margin-left: 20px;
  937. }
  938. .recommendation .rd .rd_bottom .rd_common .rdc_right .rdcr_common .rdcr_top img:hover {
  939.   transform: scale(1.1);
  940.   transition: 0.5s ease;
  941. }
  942. .recommendation .rd .rd_bottom .rd_common .rdc_right .rdcr_common h4 {
  943.   font-size: 14px;
  944.   text-align: center;
  945.   margin-top: 10px;
  946. }
  947. .recommendation .rd .rd_bottom .rd_common .rdc_right .rdcr_common p {
  948.   font-size: 13px;
  949.   color: #D4282D;
  950.   text-align: center;
  951.   margin-top: 10px;
  952. }
  953. .recommendation .rd .rd_bottom .rd_common .rdc_right .rdcr_common p span {
  954.   font-size: 10px;
  955.   color: #999999;
  956.   text-decoration: line-through;
  957.   margin-left: 5px;
  958. }
  959. .common {
  960.   width: 100%;
  961.   height: 940px;
  962.   display: flex;
  963.   justify-content: center;
  964.   align-items: center;
  965. }
  966. .common .cm {
  967.   width: 1200px;
  968.   height: 820px;
  969. }
  970. .common .cm .cm_top {
  971.   width: 100%;
  972.   height: 48px;
  973.   display: flex;
  974.   margin-bottom: 15px;
  975. }
  976. .common .cm .cm_top h3 {
  977.   font-size: 28px;
  978.   margin-right: 20px;
  979.   line-height: 48px;
  980. }
  981. .common .cm .cm_top ul {
  982.   height: 48px;
  983.   display: flex;
  984.   margin-left: 400px;
  985. }
  986. .common .cm .cm_top ul li {
  987.   line-height: 48px;
  988.   padding: 0 10px 0 10px;
  989.   font-size: 14px;
  990. }
  991. .common .cm .cm_top ul li a {
  992.   color: #333;
  993. }
  994. .common .cm .cm_bottom {
  995.   width: 100%;
  996.   height: 757px;
  997. }
  998. .common .cm .cm_bottom .big {
  999.   width: 100%;
  1000.   height: 310px;
  1001.   margin-bottom: 30px;
  1002. }
  1003. .common .cm .cm_bottom .big img {
  1004.   width: 100%;
  1005.   height: 311px;
  1006. }
  1007. .common .cm .cm_bottom .small {
  1008.   width: 100%;
  1009.   height: 400px;
  1010.   display: flex;
  1011.   justify-content: space-between;
  1012. }
  1013. .common .cm .cm_bottom .small div {
  1014.   width: 265px;
  1015.   height: 100%;
  1016. }
  1017. .common .cm .cm_bottom .small div .img {
  1018.   width: 265px;
  1019.   height: 265px;
  1020.   background-color: #F4F4F4;
  1021. }
  1022. .common .cm .cm_bottom .small div h4 {
  1023.   text-align: center;
  1024.   margin-top: 30px;
  1025. }
  1026. .common .cm .cm_bottom .small div h4:hover {
  1027.   color: #B4A078;
  1028. }
  1029. .common .cm .cm_bottom .small div p {
  1030.   font-size: 13px;
  1031.   color: #D4282D;
  1032.   text-align: center;
  1033.   margin-top: 15px;
  1034. }
  1035. .common .cm .cm_bottom .small div p span {
  1036.   font-size: 12px;
  1037.   color: #999999;
  1038.   text-decoration: line-through;
  1039.   margin-left: 5px;
  1040. }
  1041. .common .cm .cm_bottom .small div:hover {
  1042.   background-color: #F4F0EA;
  1043. }
  1044. .bedding .cm_bottom .small .one {
  1045.   background: url(../images/床品/原创1.webp);
  1046.   background-repeat: no-repeat;
  1047. }
  1048. .bedding .cm_bottom .small .two {
  1049.   background: url(../images/床品/温润1.webp);
  1050.   background-repeat: no-repeat;
  1051. }
  1052. .bedding .cm_bottom .small .three {
  1053.   background: url(../images/床品/裸睡1.webp);
  1054.   background-repeat: no-repeat;
  1055. }
  1056. .bedding .cm_bottom .small .four {
  1057.   background: url(../images/床品/每一口.webp);
  1058.   background-repeat: no-repeat;
  1059. }
  1060. .bedding .cm_bottom .small .sm_all:hover .one {
  1061.   background: url(../images/床品/原创2.webp);
  1062. }
  1063. .bedding .cm_bottom .small .sm_all:hover .two {
  1064.   background: url(../images/床品/温润2.webp);
  1065. }
  1066. .bedding .cm_bottom .small .sm_all:hover .three {
  1067.   background: url(../images/床品/裸睡2.webp);
  1068. }
  1069. .bedding .cm_bottom .small .sm_all:hover .four {
  1070.   background: url(../images/床品/每一口2.webp);
  1071. }
  1072. .manclothes .cm_bottom .small .one {
  1073.   background: url(../images/男装/女式1.webp);
  1074.   background-repeat: no-repeat;
  1075. }
  1076. .manclothes .cm_bottom .small .two {
  1077.   background: url(../images/男装/32-1.webp);
  1078.   background-repeat: no-repeat;
  1079. }
  1080. .manclothes .cm_bottom .small .three {
  1081.   background: url(../images/男装/行之语1.webp);
  1082.   background-repeat: no-repeat;
  1083. }
  1084. .manclothes .cm_bottom .small .four {
  1085.   background: url(../images/男装/凉透1.webp);
  1086.   background-repeat: no-repeat;
  1087. }
  1088. .manclothes .cm_bottom .small .sm_all:hover .one {
  1089.   background: url(../images/男装/女式2.webp);
  1090. }
  1091. .manclothes .cm_bottom .small .sm_all:hover .two {
  1092.   background: url(../images/男装/32-2.webp);
  1093. }
  1094. .manclothes .cm_bottom .small .sm_all:hover .three {
  1095.   background: url(../images/男装/行之语2.webp);
  1096. }
  1097. .manclothes .cm_bottom .small .sm_all:hover .four {
  1098.   background: url(../images/男装/凉透2.webp);
  1099. }
  1100. .drink .cm_top ul a {
  1101.   margin-left: 43px;
  1102. }
  1103. .drink .cm_bottom .small .one {
  1104.   background: url(../images/乳饮酒水/可以1.webp);
  1105.   background-repeat: no-repeat;
  1106. }
  1107. .drink .cm_bottom .small .two {
  1108.   background: url(../images/乳饮酒水/宛如1.webp);
  1109.   background-repeat: no-repeat;
  1110. }
  1111. .drink .cm_bottom .small .three {
  1112.   background: url(../images/乳饮酒水/一口1.webp);
  1113.   background-repeat: no-repeat;
  1114. }
  1115. .drink .cm_bottom .small .sm_all:hover .one {
  1116.   background: url(../images/乳饮酒水/可以2.webp);
  1117. }
  1118. .drink .cm_bottom .small .sm_all:hover .two {
  1119.   background: url(../images/乳饮酒水/宛如2.webp);
  1120. }
  1121. .drink .cm_bottom .small .sm_all:hover .three {
  1122.   background: url(../images/乳饮酒水/一口2.webp);
  1123. }
  1124. .homeclean.common .cm_top ul {
  1125.   margin-left: 250px;
  1126. }
  1127. .homeclean.common .cm_top ul a {
  1128.   margin-left: 53px;
  1129. }
  1130. .homeclean.common .cm_bottom .small .one {
  1131.   background: url(../images/家庭清洁/肌初1.webp);
  1132.   background-repeat: no-repeat;
  1133. }
  1134. .homeclean.common .cm_bottom .small .two {
  1135.   background: url(../images/家庭清洁/看得见1.webp);
  1136.   background-repeat: no-repeat;
  1137. }
  1138. .homeclean.common .cm_bottom .small .three {
  1139.   background: url(../images/家庭清洁/谷风1.webp);
  1140.   background-repeat: no-repeat;
  1141. }
  1142. .homeclean.common .cm_bottom .small .four {
  1143.   background: url(../images/家庭清洁/时刻1.webp);
  1144.   background-repeat: no-repeat;
  1145. }
  1146. .homeclean.common .cm_bottom .small .sm_all:hover .one {
  1147.   background: url(../images/家庭清洁/肌初2.webp);
  1148. }
  1149. .homeclean.common .cm_bottom .small .sm_all:hover .two {
  1150.   background: url(../images/家庭清洁/看得见2.webp);
  1151. }
  1152. .homeclean.common .cm_bottom .small .sm_all:hover .three {
  1153.   background: url(../images/家庭清洁/谷风2.webp);
  1154. }
  1155. .homeclean.common .cm_bottom .small .sm_all:hover .four {
  1156.   background: url(../images/家庭清洁/时刻2.webp);
  1157. }
  1158. .petlife.common .cm_top ul {
  1159.   margin-left: 345px;
  1160. }
  1161. .petlife.common .cm_bottom .small .one {
  1162.   background: url(../images/宠物生活/过亿1.webp);
  1163.   background-repeat: no-repeat;
  1164. }
  1165. .petlife.common .cm_bottom .small .two {
  1166.   background: url(../images/宠物生活/除臭1.webp);
  1167.   background-repeat: no-repeat;
  1168. }
  1169. .petlife.common .cm_bottom .small .three {
  1170.   background: url(../images/宠物生活/五种1.webp);
  1171.   background-repeat: no-repeat;
  1172. }
  1173. .petlife.common .cm_bottom .small .four {
  1174.   background: url(../images/宠物生活/细腻1.webp);
  1175.   background-repeat: no-repeat;
  1176. }
  1177. .petlife.common .cm_bottom .small .sm_all:hover .one {
  1178.   background: url(../images/宠物生活/过亿2.webp);
  1179. }
  1180. .petlife.common .cm_bottom .small .sm_all:hover .two {
  1181.   background: url(../images/宠物生活/除臭2.webp);
  1182. }
  1183. .petlife.common .cm_bottom .small .sm_all:hover .three {
  1184.   background: url(../images/宠物生活/五种2.webp);
  1185. }
  1186. .petlife.common .cm_bottom .small .sm_all:hover .four {
  1187.   background: url(../images/宠物生活/细腻2.webp);
  1188. }
  1189. .mz.common .cm_top ul {
  1190.   margin-left: 277px;
  1191. }
  1192. .mz.common .cm_bottom .small .one {
  1193.   background: url(../images/母婴亲子/极致1.webp);
  1194.   background-repeat: no-repeat;
  1195. }
  1196. .mz.common .cm_bottom .small .two {
  1197.   background: url(../images/母婴亲子/敏感1.webp);
  1198.   background-repeat: no-repeat;
  1199. }
  1200. .mz.common .cm_bottom .small .three {
  1201.   background: url(../images/母婴亲子/经典1.webp);
  1202.   background-repeat: no-repeat;
  1203. }
  1204. .mz.common .cm_bottom .small .four {
  1205.   background: url(../images/母婴亲子/雪地1.webp);
  1206.   background-repeat: no-repeat;
  1207. }
  1208. .mz.common .cm_bottom .small .sm_all:hover .one {
  1209.   background: url(../images/母婴亲子/极致2.webp);
  1210. }
  1211. .mz.common .cm_bottom .small .sm_all:hover .two {
  1212.   background: url(../images/母婴亲子/敏感2.webp);
  1213. }
  1214. .mz.common .cm_bottom .small .sm_all:hover .three {
  1215.   background: url(../images/母婴亲子/经典2.webp);
  1216. }
  1217. .mz.common .cm_bottom .small .sm_all:hover .four {
  1218.   background: url(../images/母婴亲子/雪地2.webp);
  1219. }
  1220. .sptravel.common .cm_top ul {
  1221.   margin-left: 253px;
  1222. }
  1223. .sptravel.common .cm_bottom .small .one {
  1224.   background: url(../images/运动旅行/严选1.webp);
  1225.   background-repeat: no-repeat;
  1226. }
  1227. .sptravel.common .cm_bottom .small .two {
  1228.   background: url(../images/运动旅行/携带1.webp);
  1229.   background-repeat: no-repeat;
  1230. }
  1231. .sptravel.common .cm_bottom .small .three {
  1232.   background: url(../images/运动旅行/小胖1.webp);
  1233.   background-repeat: no-repeat;
  1234. }
  1235. .sptravel.common .cm_bottom .small .sm_all:hover .one {
  1236.   background: url(../images/运动旅行/严选2.webp);
  1237. }
  1238. .sptravel.common .cm_bottom .small .sm_all:hover .two {
  1239.   background: url(../images/运动旅行/携带2.webp);
  1240. }
  1241. .sptravel.common .cm_bottom .small .sm_all:hover .three {
  1242.   background: url(../images/运动旅行/小胖2.webp);
  1243. }
  1244. .home_appliances.common .cm_top ul {
  1245.   margin-left: 193px;
  1246. }
  1247. .home_appliances.common .cm_bottom .small .one {
  1248.   background: url(../images/数码家电/时刻1.webp);
  1249.   background-repeat: no-repeat;
  1250. }
  1251. .home_appliances.common .cm_bottom .small .two {
  1252.   background: url(../images/数码家电/礼盒1.webp);
  1253.   background-repeat: no-repeat;
  1254. }
  1255. .home_appliances.common .cm_bottom .small .three {
  1256.   background: url(../images/数码家电/全净1.webp);
  1257.   background-repeat: no-repeat;
  1258. }
  1259. .home_appliances.common .cm_bottom .small .four {
  1260.   background: url(../images/数码家电/加湿1.webp);
  1261.   background-repeat: no-repeat;
  1262. }
  1263. .home_appliances.common .cm_bottom .small .sm_all:hover .one {
  1264.   background: url(../images/数码家电/时刻2.webp);
  1265. }
  1266. .home_appliances.common .cm_bottom .small .sm_all:hover .two {
  1267.   background: url(../images/数码家电/礼盒2.webp);
  1268. }
  1269. .home_appliances.common .cm_bottom .small .sm_all:hover .three {
  1270.   background: url(../images/数码家电/全净2.webp);
  1271. }
  1272. .home_appliances.common .cm_bottom .small .sm_all:hover .four {
  1273.   background: url(../images/数码家电/加湿2.webp);
  1274. }
  1275. .yxworld.common .cm_top ul {
  1276.   margin-left: 697px;
  1277. }
  1278. .yxworld.common .cm_bottom .small .one {
  1279.   background: url(../images/严选全球/睡着1.webp);
  1280.   background-repeat: no-repeat;
  1281. }
  1282. .yxworld.common .cm_bottom .small .two {
  1283.   background: url(../images/严选全球/严选1.webp);
  1284.   background-repeat: no-repeat;
  1285. }
  1286. .yxworld.common .cm_bottom .small .three {
  1287.   background: url(../images/严选全球/大牌1.webp);
  1288.   background-repeat: no-repeat;
  1289. }
  1290. .yxworld.common .cm_bottom .small .four {
  1291.   background: url(../images/严选全球/泰国1.webp);
  1292.   background-repeat: no-repeat;
  1293. }
  1294. .yxworld.common .cm_bottom .small .sm_all:hover .one {
  1295.   background: url(../images/严选全球/睡着2.webp);
  1296. }
  1297. .yxworld.common .cm_bottom .small .sm_all:hover .two {
  1298.   background: url(../images/严选全球/严选2.webp);
  1299. }
  1300. .yxworld.common .cm_bottom .small .sm_all:hover .three {
  1301.   background: url(../images/严选全球/大牌2.webp);
  1302. }
  1303. .yxworld.common .cm_bottom .small .sm_all:hover .four {
  1304.   background: url(../images/严选全球/泰国2.webp);
  1305. }
  1306. .recommend {
  1307.   background-color: #F4F0EA;
  1308. }
  1309. .selector {
  1310.   width: 100%;
  1311.   height: 430px;
  1312.   display: flex;
  1313.   justify-content: center;
  1314.   align-items: center;
  1315. }
  1316. .selector .selector_main {
  1317.   width: 1200px;
  1318.   height: 430px;
  1319. }
  1320. .selector .selector_main .selector_top {
  1321.   width: 100%;
  1322.   height: 28px;
  1323.   margin-bottom: 30px;
  1324. }
  1325. .selector .selector_main .selector_top h3 {
  1326.   display: inline-block;
  1327.   font-size: 28px;
  1328. }
  1329. .selector .selector_main .selector_top span {
  1330.   font-size: 14px;
  1331.   margin-left: 30px;
  1332. }
  1333. .selector .selector_main .selector_bottom {
  1334.   position: relative;
  1335. }
  1336. .selector .selector_main .selector_bottom img:nth-child(1) {
  1337.   width: 800px;
  1338.   height: 370px;
  1339. }
  1340. .selector .selector_main .selector_bottom img:nth-child(2) {
  1341.   position: absolute;
  1342.   top: 0;
  1343.   left: 805px;
  1344.   width: 390px;
  1345.   height: 180px;
  1346. }
  1347. .selector .selector_main .selector_bottom img:nth-chid(3) {
  1348.   width: 390px;
  1349.   height: 180px;
  1350. }
  1351. .all_speaking {
  1352.   width: 100%;
  1353.   height: 610px;
  1354.   display: flex;
  1355.   justify-content: center;
  1356.   align-items: center;
  1357.   background-color: #F4F0EA;
  1358.   margin-top: 80px;
  1359. }
  1360. .all_speaking .aspeaking {
  1361.   width: 1200px;
  1362.   height: 500px;
  1363. }
  1364. .all_speaking .aspeaking .as_top {
  1365.   width: 100%;
  1366.   height: 28px;
  1367.   margin-bottom: 20px;
  1368. }
  1369. .all_speaking .aspeaking .as_top h3 {
  1370.   display: inline-block;
  1371.   font-size: 28px;
  1372.   font-weight: 700;
  1373. }
  1374. .all_speaking .aspeaking .as_top span {
  1375.   margin-left: 30px;
  1376.   font-size: 14px;
  1377. }
  1378. .all_speaking .aspeaking .as_bottom {
  1379.   width: 100%;
  1380.   height: 452px ;
  1381. }
  1382. .all_speaking .aspeaking .as_bottom .swiper {
  1383.   width: 100%;
  1384.   height: 452px;
  1385.   position: relative;
  1386. }
  1387. .all_speaking .aspeaking .as_bottom .swiper .swiper-slide .sw_content {
  1388.   width: 300px;
  1389.   height: 452px;
  1390.   margin: auto;
  1391.   background-color: #fff;
  1392.   border: 1px solid #ccc;
  1393. }
  1394. .all_speaking .aspeaking .as_bottom .swiper .swiper-slide .sw_content .ct_img {
  1395.   width: 300px;
  1396.   height: 355px;
  1397.   overflow: hidden;
  1398. }
  1399. .all_speaking .aspeaking .as_bottom .swiper .swiper-slide .sw_content .ct_img img {
  1400.   width: 300px;
  1401.   height: 355px;
  1402. }
  1403. .all_speaking .aspeaking .as_bottom .swiper .swiper-slide .sw_content .ct_img img:hover {
  1404.   transform: scale(1.1);
  1405.   transition: 0.5s ease;
  1406. }
  1407. .all_speaking .aspeaking .as_bottom .swiper .swiper-slide .sw_content .ct_introduce {
  1408.   position: absolute;
  1409.   top: 252px;
  1410.   left: 49px;
  1411.   z-index: 2;
  1412.   background-color: #fff;
  1413.   width: 280px;
  1414.   height: 200px;
  1415.   margin: auto;
  1416. }
  1417. .all_speaking .aspeaking .as_bottom .swiper .swiper-slide .sw_content .ct_introduce p:nth-child(1) {
  1418.   padding: 10px 0 10px 10px;
  1419.   font-size: 13px;
  1420.   color: #999999;
  1421. }
  1422. .all_speaking .aspeaking .as_bottom .swiper .swiper-slide .sw_content .ct_introduce p:nth-child(1) span {
  1423.   margin-left: 15px;
  1424. }
  1425. .all_speaking .aspeaking .as_bottom .swiper .swiper-slide .sw_content .ct_introduce .pinglun {
  1426.   width: 260px;
  1427.   height: 80px;
  1428.   margin-top: 20px;
  1429.   margin-left: 10px;
  1430.   font-size: 13px;
  1431. }
  1432. .all_speaking .aspeaking .as_bottom .swiper .swiper-slide .sw_content .ct_introduce h3 {
  1433.   margin-left: 10px;
  1434.   height: 18px;
  1435.   font-size: 16px;
  1436.   overflow: hidden;
  1437.   max-width: 200px;
  1438.   text-overflow: ellipsis;
  1439.   white-space: nowrap;
  1440. }
  1441. .all_speaking .aspeaking .as_bottom .swiper .swiper-slide .sw_content .ct_introduce .money {
  1442.   float: right;
  1443.   margin-top: -16px;
  1444.   margin-right: 10px;
  1445.   font-size: 13px;
  1446.   color: #B4A078;
  1447. }
  1448. .footer-top {
  1449.   width: 100%;
  1450.   height: 300px;
  1451.   display: flex;
  1452.   justify-content: center;
  1453.   align-items: center;
  1454. }
  1455. .footer-top .ft_nr {
  1456.   width: 1200px;
  1457.   height: 204px;
  1458.   display: flex;
  1459.   justify-content: center;
  1460.   align-items: center;
  1461. }
  1462. .footer-top .ft_nr .ft {
  1463.   width: 370px;
  1464.   height: 204px;
  1465.   border-right: 1px solid #ddd;
  1466. }
  1467. .footer-top .ft_nr .ft h4 {
  1468.   font-size: 16px;
  1469.   font-weight: 400;
  1470.   margin-bottom: 28px;
  1471.   text-align: center;
  1472. }
  1473. .footer-top .ft_nr .one div {
  1474.   cursor: pointer;
  1475.   display: inline-block;
  1476.   text-align: center;
  1477.   padding: 30px 0 0 0;
  1478.   width: 100px;
  1479.   height: 100px;
  1480.   border: 1px solid #ddd;
  1481.   margin-left: 55px;
  1482. }
  1483. .footer-top .ft_nr .two {
  1484.   padding: 0 37px;
  1485. }
  1486. .footer-top .ft_nr .two p {
  1487.   text-align: left;
  1488.   font-size: 12px;
  1489.   line-height: 18px;
  1490.   margin-bottom: 20px;
  1491. }
  1492. .footer-top .ft_nr .two .attention span {
  1493.   vertical-align: middle;
  1494.   font-size: 14px;
  1495. }
  1496. .footer-top .ft_nr .two .attention img {
  1497.   vertical-align: middle;
  1498.   cursor: pointer;
  1499.   margin-left: 10px;
  1500.   width: 32px;
  1501.   height: 32px;
  1502. }
  1503. .footer-top .ft_nr .three {
  1504.   text-align: center;
  1505. }
  1506. .footer-top .ft_nr .three img {
  1507.   width: 104px;
  1508.   height: 104px;
  1509. }
  1510. .footer-top .ft_nr .three p {
  1511.   margin-top: 3px;
  1512.   font-size: 12px;
  1513.   color: #B4A078;
  1514. }
  1515. .footer-bottom {
  1516.   width: 100%;
  1517.   height: 350px;
  1518.   background-color: #414141;
  1519. }
  1520. .footer-bottom .fb {
  1521.   width: 1200px;
  1522.   height: 350px;
  1523.   margin: auto;
  1524. }
  1525. .footer-bottom .fb .fb_top {
  1526.   height: 120px;
  1527.   border-bottom: 1px solid #4F4F4F;
  1528.   display: flex;
  1529.   justify-content: space-around;
  1530.   align-items: center;
  1531. }
  1532. .footer-bottom .fb .fb_top div {
  1533.   height: 51px;
  1534. }
  1535. .footer-bottom .fb .fb_top div img {
  1536.   width: 50px;
  1537.   height: 50px;
  1538.   vertical-align: middle;
  1539. }
  1540. .footer-bottom .fb .fb_top div span {
  1541.   vertical-align: middle;
  1542.   margin-left: 15px;
  1543.   font-size: 18px;
  1544.   color: #fff;
  1545. }
  1546. .footer-bottom .fb .fb_bottom {
  1547.   width: 1200px;
  1548.   color: #999;
  1549.   text-align: center;
  1550.   font-size: 12px;
  1551. }
  1552. .footer-bottom .fb .fb_bottom ul {
  1553.   margin-top: 15px;
  1554. }
  1555. .footer-bottom .fb .fb_bottom ul li {
  1556.   cursor: pointer;
  1557.   display: inline;
  1558.   padding: 0 10px 0 10px;
  1559. }
  1560. .footer-bottom .fb .fb_bottom ul li img {
  1561.   vertical-align: middle;
  1562.   width: 23px;
  1563.   height: 25px;
  1564. }
  1565. .footer-bottom .fb .fb_bottom ul li:hover {
  1566.   color: #fff;
  1567. }
  1568. .footer-bottom .fb .fb_bottom ul:nth-child(1) {
  1569.   margin-top: 40px;
  1570. }
  1571. .footer-bottom .fb .fb_bottom ul:nth-child(1) li {
  1572.   border-right: 1px solid #999;
  1573. }

(3)main.less

  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4.   list-style: none;
  5.   text-decoration: none;
  6.   font-family: "微软雅黑";
  7. }
  8. a{
  9.   cursor: pointer;
  10. }
  11. .nav{
  12.   width: 100%;
  13.   height: 36px;
  14.   background-color: #333;
  15.   margin: auto;
  16.   position: relative;
  17.   .nav_right{
  18.     width: 1200px;
  19.     margin: auto;
  20.     .right_menu{
  21.       float: right;
  22.       .item{
  23.         float: left;
  24.         line-height: 36px;
  25.         a{
  26.           color: #ccc;
  27.           padding: 0 10px;
  28.           border-right: 1px solid #ccc;
  29.           font-size: 12px;
  30.         }
  31.         a:hover{
  32.           color: white;
  33.         }
  34.         div{
  35.           position: relative;
  36.           height: 160px;
  37.           text-align: center;
  38.           border: 1px solid #ccc;
  39.           display: none;
  40.           background-color: #fff;
  41.           z-index: 100;
  42.           ul{
  43.             li{
  44.               .arrow{
  45.                 display: block;
  46.                 width: 15px;
  47.                 height: 15px;
  48.                 background: url(../images/icon-yxtop.webp);
  49.                 background-repeat: no-repeat;
  50.                 background-position: -5px -1410px;
  51.                 border: 0;
  52.                 position: absolute;
  53.                 left: 30px;
  54.                 top: -10px;
  55.               }
  56.               a{
  57.                 border-bottom: 1px solid #ccc;
  58.                 padding: 6px 10px;
  59.                 border-right:0;
  60.               }
  61.               a:hover{
  62.                 color: red;
  63.               }
  64.             }
  65.           }
  66.           
  67.         };
  68.         .img{
  69.           background-color: #fff;
  70.           margin-left: -20px;
  71.           width: 30px;
  72.           height: 30px;
  73.         }
  74.       }
  75.     }
  76.     
  77.     
  78.   }
  79.   .nav_right::after{
  80.     display: block;
  81.     content: "";
  82.     clear: both;
  83.   }
  84.   
  85. }
  86. .logo_nav{
  87.   width: 1200px;
  88.   height: 140px;
  89.   margin: auto;
  90.   
  91.   .top{
  92.     width: 1200px;
  93.     height: 100px;
  94.     margin: auto;
  95.     position: relative;
  96.     .logo{
  97.       position: absolute;
  98.       top: 20px;
  99.       left: 20px;
  100.       width: 200px;
  101.       height: 60px;
  102.       background: url(../images/icon-yxtop.webp);
  103.       background-position: 5px -950px;
  104.       background-repeat: no-repeat;
  105.     }
  106.     .search{
  107.       position: absolute;
  108.       top: 40px;
  109.       left: 350px;
  110.       width: 532px;
  111.       input{
  112.         width: 442px;
  113.         height: 38px;
  114.         border-radius: 15px;
  115.         border: 1px solid #CC9756;
  116.         padding: 0 35px;
  117.       }
  118.       div{
  119.         position: absolute;
  120.         top: -1px;
  121.         left: 5px;
  122.         width: 40px;
  123.         height: 35px;
  124.         background: url(../images/icon-yxtop.webp);
  125.         background-repeat: no-repeat;
  126.         background-position: 0 -1030px;
  127.       }
  128.       input:focus{
  129.         outline: none;
  130.       }
  131.       button{
  132.         position: absolute;
  133.         left: 430px;
  134.         width: 90px;
  135.         height: 40px;
  136.         background-color: #CC9756;
  137.         color: white;
  138.         border: 0 ;
  139.         border-radius: 15px;
  140.       }
  141.     }
  142.     .shopcar{
  143.       position: absolute;
  144.       top: 40px;
  145.       right: 10px;
  146.       border: 1px solid #CC9756;
  147.       width: 150px;
  148.       height: 40px;
  149.       border-radius: 15px;
  150.       .icon_car{
  151.         display: inline-block;
  152.         width: 50px;
  153.         height:40px;
  154.         margin-left: 10px;
  155.         background: url(../images/icon-yxtop.webp);
  156.         background-position: 0 -350px;
  157.         .car{
  158.           position: absolute;
  159.           top: 10px;
  160.           left: 60px;
  161.         }
  162.         .num{
  163.           position: absolute;
  164.           top: 10px;
  165.           left: 20px;
  166.           width: 20px;
  167.           height: 20px;
  168.           text-align: center;
  169.           border-radius: 50%;
  170.           background-color: #CC9756;
  171.           color: white;
  172.         }
  173.       }
  174.       .num{
  175.         margin-left: 100px;
  176.       }
  177.  
  178.     }
  179.   } 
  180. }
  181. .bottom{
  182.   background-color: #fff;
  183.   position: absolute;
  184.   z-index: 20;
  185.   width: 100%;
  186.   height: 40px;
  187.   top: 135px;
  188.  
  189.   .menu{
  190.     display: flex;
  191.     width: 1200px;
  192.     height: 40px;
  193.     margin: auto;
  194.     line-height: 40px;
  195.     .menu_logo{
  196.       display: none;
  197.     }
  198.     .item{
  199.       float: left;
  200.       z-index: 20;
  201.       .none{
  202.         background-color: #fff;
  203.       }
  204.       a{
  205.         color: #333;
  206.         font-size: 14px;
  207.         font-weight: bolder;
  208.         padding: 0 20px 3px;
  209.       }
  210.       a:hover span{
  211.         color: #CC9756;
  212.         border-bottom: 3px solid #CC9756;
  213.       }
  214.       .shop{
  215.         display: none;
  216.         position: absolute;
  217.         left:20px;
  218.         width: 500px;
  219.         height: 650px;
  220.         border: 1px solid #ddd;
  221.         .bedshop{
  222.           .bs_top{
  223.             width:460px ;
  224.             margin: auto;
  225.             h3{
  226.               font-size: 16px;
  227.               font-weight: 700;
  228.               display: inline-block;
  229.               margin-top: 10px;
  230.             }
  231.             h3:nth-child(1){
  232.               width: 280px;
  233.               border-bottom: 1px solid #ddd;
  234.             }
  235.             h3:nth-child(2){
  236.               width: 150px;
  237.               margin-left: 10px;
  238.               border-bottom: 1px solid #ddd;
  239.               z-index: 1;
  240.  
  241.             }
  242.           }
  243.           .bs_bottom{
  244.             width: 460px;
  245.             margin: auto;
  246.             display: flex;
  247.             ul{
  248.               li{
  249.                 margin-top: 10px;
  250.               }
  251.               img{
  252.                 width: 57px;
  253.                 height: 57px;
  254.                 vertical-align: middle;
  255.               }
  256.               span{
  257.                 vertical-align: middle;
  258.               }
  259.             }
  260.             ul:nth-child(2){
  261.               margin-left: 30px;
  262.             }
  263.             ul:nth-child(3){
  264.               margin-left: 20px;
  265.             }
  266.           }
  267.         }
  268.         
  269.       }
  270.       .pet{
  271.         display: none;
  272.         position: absolute;
  273.         left: 50px;
  274.         width: 400px;
  275.         height: 450px;
  276.         border: 1px solid #ddd;
  277.         .pet_top{
  278.           width: 360px;
  279.           margin: auto;
  280.           h3{
  281.             font-size: 16px;
  282.             font-weight: 700;
  283.             display: inline-block;
  284.             margin-top: 10px;
  285.           }
  286.           h3:nth-child(1){
  287.             width: 200px;
  288.             border-bottom: 1px solid #ddd;
  289.           }
  290.           h3:nth-child(2){
  291.             width: 140px;
  292.             margin-left: 10px;
  293.             border-bottom: 1px solid #ddd;
  294.             z-index: 1;
  295.  
  296.           }
  297.         }
  298.         .pet_bottom{
  299.           width: 360px;
  300.           display: flex;
  301.           margin: auto;
  302.           ul{
  303.             li{
  304.               margin-top: 15px;
  305.             }
  306.             img{
  307.               width: 57px;
  308.               height: 57px;
  309.               vertical-align: middle;
  310.             }
  311.             span{
  312.               vertical-align: middle;
  313.             }
  314.           }
  315.           ul:nth-child(2){
  316.             margin-left:90px;
  317.           }
  318.         }
  319.       }
  320.       .colthes{
  321.         display: none;
  322.         position: absolute;
  323.         left: 20px;
  324.         width: 800px;
  325.         height: 640px;
  326.         border: 1px solid #ddd;
  327.         .cs_top{
  328.           width: 760px;
  329.           margin: auto;
  330.           h3{
  331.             display: inline-block;
  332.             width: 105px;
  333.             margin-right: 15px;
  334.             font-size: 16px;
  335.             font-weight: 700;
  336.             border-bottom: 1px solid #ddd;
  337.           }
  338.         }
  339.         .cs_bottom{
  340.           width: 760px;
  341.           margin: auto;
  342.           display: flex;
  343.            ul{
  344.             li{
  345.               margin-top: 15px;
  346.             }
  347.             img{
  348.               width: 57px;
  349.               height: 57px;
  350.               vertical-align: middle;
  351.             }
  352.             span{
  353.               vertical-align: middle;
  354.             }
  355.           }
  356.         }
  357.       }
  358.       .beverage{
  359.         display: none;
  360.         position: absolute;
  361.         left: 180px;
  362.         width: 580px;
  363.         height: 440px;
  364.         border: 1px solid #ddd;
  365.         .beverage_top{
  366.           width: 540px;
  367.           display: flex;
  368.           justify-content: space-around;
  369.           margin: auto;
  370.           h3{
  371.             font-size: 16px;
  372.             font-weight: 700;
  373.             display: inline-block;
  374.             width: 130px;
  375.             border-bottom: 1px solid #ddd;
  376.           }
  377.         }
  378.         .beverage_bottom{
  379.           width: 540px;
  380.           margin: auto;
  381.           display: flex;
  382.           justify-content: space-around;
  383.           ul{
  384.             li{
  385.               margin-top: 15px;
  386.             }
  387.             img{
  388.               width: 57px;
  389.               height: 57px;
  390.               vertical-align: middle;
  391.             }
  392.             span{
  393.               vertical-align: middle;
  394.             }
  395.           }
  396.         }
  397.       }
  398.       .cleaning{
  399.         display: none;
  400.         position: absolute;
  401.         left: 120px;
  402.         width: 910px;
  403.         height: 300px;
  404.         border: 1px solid #ddd;
  405.         .cl_top{
  406.           width: 870px;
  407.           display: flex;
  408.           justify-content: space-around;
  409.           margin: auto;
  410.           h3{
  411.             display: inline-block;
  412.             width: 150px;
  413.             border-bottom: 1px solid #ddd;
  414.             font-size: 16px;
  415.             font-weight: 700;
  416.           }
  417.         }
  418.         .cl_bottom{
  419.           display: flex;
  420.           justify-content: space-around;
  421.           width: 870px;
  422.           margin: auto;
  423.           ul{
  424.             li{
  425.               margin-top: 15px;
  426.             }
  427.             img{
  428.               width: 57px;
  429.               height: 57px;
  430.               vertical-align: middle;
  431.             }
  432.             span{
  433.               vertical-align: middle;
  434.             }
  435.           }
  436.         }
  437.       }
  438.       .mb_supplies{
  439.         display: none;
  440.         position: absolute;
  441.         left: 110px;
  442.         width: 1000px;
  443.         height: 540px;
  444.         border: 1px solid #ddd;
  445.         .mb_top{
  446.           width: 960px;
  447.           margin: auto;
  448.           display: flex;
  449.           justify-content: space-around;
  450.           h3{
  451.             font-size: 16px;
  452.             font-weight: 700;
  453.             display: inline-block;
  454.             width: 120px;
  455.             border-bottom: 1px solid #ddd;
  456.           }
  457.         }
  458.         .mb_bottom{
  459.           width: 960px;
  460.           margin: auto;
  461.           display: flex;
  462.           justify-content: space-around;
  463.            ul{
  464.             li{
  465.               margin-top: 15px;
  466.             }
  467.             img{
  468.               width: 57px;
  469.               height: 57px;
  470.               vertical-align: middle;
  471.             }
  472.             span{
  473.               vertical-align: middle;
  474.             }
  475.           }
  476.         }
  477.       }
  478.       .sports{
  479.         display: none;
  480.         position: absolute;
  481.         left: 400px;
  482.         width: 580px;
  483.         height: 510px;
  484.         border: 1px solid #ddd;
  485.         .sports_top{
  486.           width: 540px;
  487.           margin: auto;
  488.           display: flex;
  489.           justify-content: space-around;
  490.           h3{
  491.             font-size: 16px;
  492.             font-weight: 700;
  493.             display: inline-block;
  494.             width: 150px;
  495.             border-bottom: 1px solid #ddd;
  496.           }
  497.         }
  498.         .sports_bottom{
  499.           width: 540px;
  500.           margin: auto;
  501.           display: flex;
  502.           justify-content: space-around;
  503.           ul{
  504.             li{
  505.               margin-top: 15px;
  506.             }
  507.             img{
  508.               width: 57px;
  509.               height: 57px;
  510.               vertical-align: middle;
  511.             }
  512.             span{
  513.               vertical-align: middle;
  514.             }
  515.           }
  516.         }
  517.       }
  518.       .digital{
  519.         display: none;
  520.         position: absolute;
  521.         left: 0;
  522.         width: 1200px;
  523.         height: 510px;
  524.         border: 1px solid #ddd;
  525.         .digital_top{
  526.           width: 1160px;
  527.           margin: auto;
  528.           display: flex;
  529.           justify-content: space-around;
  530.           h3{
  531.             font-size: 16px;
  532.             font-weight: 700;
  533.             display: inline-block;
  534.             width: 130px;
  535.             border-bottom: 1px solid #ddd;
  536.           }
  537.         }
  538.         .digital_bottom{
  539.           width: 1160px;
  540.           margin: auto;
  541.           display: flex;
  542.           justify-content: space-around;
  543.           ul{
  544.             li{
  545.               margin-top: 15px;
  546.             }
  547.             img{
  548.               width: 57px;
  549.               height: 57px;
  550.               vertical-align: middle;
  551.             }
  552.             span{
  553.               vertical-align: middle;
  554.             }
  555.           }
  556.         }
  557.         
  558.       }
  559.       .world{
  560.         display:none ;
  561.         position: absolute;
  562.         right: 0;
  563.         width: 570px;
  564.         height: 150px;
  565.         border: 1px solid #ddd;
  566.         .world_top{
  567.           width: 530px;
  568.           margin: auto;
  569.           display: flex;
  570.           justify-content: space-around;
  571.           h3{
  572.             font-size: 16px;
  573.             font-weight: 700;
  574.             display: inline-block;
  575.             width: 150px;
  576.             border-bottom: 1px solid #ddd;
  577.           }
  578.         }
  579.         .world_bottom{
  580.           width: 530px;
  581.           margin: auto;
  582.           display: flex;
  583.           justify-content: space-around;
  584.           ul{
  585.             li{
  586.               margin-top: 15px;
  587.             }
  588.             img{
  589.               width: 57px;
  590.               height: 57px;
  591.               vertical-align: middle;
  592.             }
  593.             span{
  594.               vertical-align: middle;
  595.             }
  596.           }
  597.         }
  598.       }
  599.     }
  600.     .item:nth-child(10){
  601.       border-right: 1px solid #ddd;
  602.     }
  603.     .menu_icon{
  604.       display: none;
  605.       .menu_sousuo,.menu_man,.menu_car{
  606.         display: inline-block;
  607.         margin-left: 40px;
  608.         margin-top: 5px;
  609.         img{
  610.           width: 20px;
  611.           height: 20px;
  612.         }
  613.       }
  614.       .menu_car{
  615.         position: relative;
  616.         .subscript{
  617.           width: 15px;
  618.           height: 15px;
  619.           position: absolute;
  620.           top: 0;
  621.           left: 12px;
  622.           border-radius: 50%;
  623.           background-color: red;
  624.           color: #fff;
  625.           text-align: center;
  626.           line-height: 15px;
  627.         }
  628.       } 
  629.     }
  630.     
  631.   }
  632.   .menu::after{
  633.     display: block;
  634.     content: "";
  635.     clear: both;
  636.   }
  637. }
  638. .advertisement{
  639.   width: 100%;
  640.   height: 420px;
  641.   background: url(../images/广告.webp);
  642.   background-repeat: no-repeat;
  643.   margin: auto;
  644. }
  645. .new{
  646.   position: relative;
  647.   width: 100%;
  648.   height: 510px;
  649.   .newshop{
  650.     width: 1200px;
  651.     height: 430px;
  652.     margin:  25px auto;
  653.     .newshop_top{
  654.       width: 100%;
  655.       height: 48px;
  656.       margin-bottom: 20px;
  657.       h3{
  658.         display: inline;
  659.         font-size: 28px;
  660.         font-weight: 700;
  661.         margin-right: 20px;
  662.         line-height: 48px;
  663.       }
  664.       h3:hover{
  665.         cursor: pointer;
  666.         color: #BC3B3B;
  667.       }
  668.       span{
  669.         font-size: 14px;
  670.         line-height: 1;
  671.       }
  672.       .end{
  673.         float: right;
  674.         margin-top: 25px;
  675.       }
  676.       span:hover{
  677.         cursor: pointer;
  678.         color: #CC9756;
  679.       }
  680.     }
  681.     .newshop_bottom{
  682.       width: 100%;
  683.       height: 370px;
  684.       .swiper{
  685.         width: 100%;
  686.         height: 370px;
  687.         .swiper-slide{
  688.           .sw_content{
  689.             width: 265px;
  690.             height: 362px;
  691.             margin: auto;
  692.             .ct_img{
  693.               width: 265px;
  694.               height: 265px;
  695.             }
  696.             .ct_introduce{
  697.               width: 265px;
  698.               height: 97px;
  699.               margin:auto;
  700.               p{
  701.                 cursor: pointer;
  702.                 margin: auto;
  703.                 padding: 10px 0;
  704.                 width: 156px;
  705.                 text-align: center;
  706.                 font-size: 13px;
  707.                 font-weight: 700;
  708.               }
  709.               p:nth-child(2){
  710.                 font-weight: normal;
  711.                 color: #D4282D;
  712.               }
  713.               span{
  714.                 color: #999999;
  715.                 font-size: 12px;
  716.                 text-decoration: line-through;
  717.               }
  718.             }
  719.             
  720.             .one{
  721.               background: url(../images/swiper-images/榛果拿铁.webp);
  722.               background-color: #F4F4F4;
  723.             }
  724.             .two{
  725.               background: url(../images/swiper-images/洁厕系列.webp);
  726.               background-color: #F4F4F4;
  727.             }
  728.             .three{
  729.               background: url(../images/swiper-images/迪士尼正版.webp);
  730.               background-color: #F4F4F4;
  731.             }
  732.             .four{
  733.               background: url(../images/swiper-images/宠物冰垫.webp);
  734.               background-color: #F4F4F4;
  735.             }
  736.           }
  737.           .sw_content:hover .ct_introduce{
  738.             background-color: #F4F0EA;
  739.           }
  740.           .sw_content:hover .one{
  741.               background: url(../images/swiper-images/榛果拿铁2.webp);
  742.           }
  743.           .sw_content:hover .two{
  744.             background: url(../images/swiper-images/洁厕系列2.webp);
  745.           }
  746.           .sw_content:hover .three{
  747.             background: url(../images/swiper-images/迪士尼正版2.webp);
  748.           }
  749.           .sw_content:hover .four{
  750.             background: url(../images/swiper-images/宠物冰垫2.webp);
  751.           }
  752.         }
  753.       }
  754.     }
  755.   }
  756. }
  757. .sale_list{
  758.   float: left;
  759.   margin-left: 30px;
  760.   margin-top: 40px;
  761.   width: 110px;
  762.   height: 363px;
  763.   position: sticky;
  764.   top: 40px;
  765.   border: 1px solid #ddd;
  766.   ul{
  767.     display: flex;
  768.     flex-direction: column;
  769.     background-color: #fff;
  770.     .top{
  771.       text-align: center;
  772.       color: #BB3343;
  773.       font-size: 16px;
  774.       font-weight: 700;
  775.       height: 35px;
  776.       line-height: 35px;
  777.       background: url(../images/热销榜/bg.webp);
  778.       border-bottom: 1px solid #ddd;
  779.     }
  780.     li:not(.top){
  781.       display: block;
  782.       width: 85px;
  783.       margin: auto;
  784.       height: 35px;
  785.       border-bottom: 1px solid #ddd;
  786.       img{
  787.         color: #BB3343;
  788.         display: inline;
  789.         width: 30px;
  790.         height: 30px;
  791.         vertical-align: middle;
  792.       }
  793.       span{
  794.         float: right;
  795.         margin-right: 10px;
  796.         display: table-cell;
  797.         vertical-align: middle;
  798.         font-size: 12px;
  799.       }
  800.       
  801.     }
  802.     li:hover span{
  803.       cursor: pointer;
  804.       color: #BB3343;
  805.     }
  806.   }
  807. }
  808. .list_right{
  809.   float: right;
  810.   margin-top:40px;
  811.   width: 110px;
  812.   height: 363px;
  813.   position: sticky;
  814.   top: 40px;
  815.   border: 1px solid #ddd;
  816.   ul{
  817.     display: flex;
  818.     flex-direction: column;
  819.     background-color: #fff;
  820.     li{
  821.       display: block;
  822.       width: 90px;
  823.       margin: auto;
  824.       padding: 10px 0;
  825.       text-align: center;
  826.       border-bottom: 1px solid #ddd;
  827.       
  828.       img{
  829.         display: block;
  830.         width: 70px;
  831.         height: 70px;
  832.         margin: auto;
  833.       }
  834.       span{
  835.         
  836.         color: #BC3B3B;
  837.         font-size: 12PX;
  838.       }
  839.       p{
  840.         font-size: 14px;
  841.         color: #666666;
  842.       }
  843.       .dingyue{
  844.         width: 52px;
  845.         height: 52px;
  846.         background: url(../images/icon-yxfixedtool.webp);
  847.         background-repeat: no-repeat;
  848.         background-position: 0 -1055px;
  849.         margin: auto;
  850.       }
  851.       .zaixiankefu{
  852.         width: 65px;
  853.         height: 70px;
  854.         background: url(../images/icon-yxfixedtool.webp);
  855.         background-repeat: no-repeat;
  856.         background-position: 0 -250px;
  857.         margin: auto;
  858.       }
  859.     }
  860.   }
  861. }
  862. .recommendation{
  863.   width: 100%;
  864.   height: 740px;
  865.   background-color: #F4F0EA;
  866.   display: flex;
  867.   justify-content: center;
  868.   align-items: center;
  869.   .rd{
  870.     width: 1200px;
  871.     height: 620px;
  872.     .rd_top{
  873.       width: 100%;
  874.       height: 48px;
  875.       display: flex;
  876.       h3{
  877.         font-size: 28px;
  878.         margin-right: 20px;
  879.         line-height: 48px;
  880.       }
  881.       ul{
  882.         height: 48px;
  883.         display: flex;
  884.         li{
  885.           line-height: 48px;
  886.           margin-right:50px ;
  887.           a{
  888.             padding: 0 5px 5px 5px;
  889.           }
  890.           .current{
  891.             color: #b4a078;
  892.             border-bottom: 1px solid #b4a078;
  893.             
  894.           }
  895.         }
  896.         
  897.     }
  898.     span{
  899.       margin-left: 738px;
  900.       line-height: 48px;
  901.     }
  902.     }
  903.     .rd_bottom{
  904.       width: 100%;
  905.       height: 552px;
  906.       margin-top: 20px;
  907.       .rd_common{
  908.         position: relative;
  909.         display: none;
  910.         h4:hover{
  911.           color:#B4A078;
  912.         }
  913.         .rdc_left{
  914.           width: 390px;
  915.           height: 552px;
  916.           background-color: #fff;
  917.           .rdcl_top{
  918.             width: 390px;
  919.             height: 400px;
  920.             border-bottom: 1px solid #ccc;
  921.             img{
  922.               width: 320px;
  923.               height: 320px;
  924.               margin: 40px 35px;
  925.             }
  926.             img:hover{
  927.               transform: scale(1.1);
  928.               transition: 0.5s ease;
  929.             }
  930.           }
  931.           
  932.           h4{
  933.             margin-top: 30px;
  934.             text-align: center;
  935.           }
  936.           p{
  937.             font-size: 18px;
  938.             color: #D4282D;
  939.             text-align: center;
  940.             margin-top: 30px;
  941.             span{
  942.               font-size: 14px;
  943.               color: #999999;
  944.               text-decoration: line-through;
  945.               margin-left: 5px;
  946.             }
  947.           }
  948.         }
  949.         .rdc_right{
  950.           position: absolute;
  951.           top: 0;
  952.           left: 390px;
  953.           display: flex;
  954.           flex-wrap: wrap;
  955.           width: 810px;
  956.           height: 552px;
  957.           .rdcr_common{
  958.             background-color: #fff;
  959.             margin-left: 30px;
  960.             margin-right: 5px;
  961.             width: 220px;
  962.             height: 270px;
  963.             .rdcr_top{
  964.               width: 220px;
  965.               height: 180px;
  966.               border-bottom: 1px solid #ccc;
  967.               img{
  968.                 width: 180px;
  969.                 height: 180px;
  970.                 margin-left: 20px;
  971.               }
  972.               img:hover{
  973.                 transform: scale(1.1);
  974.                 transition: 0.5s ease;
  975.               }
  976.             }
  977.             h4{
  978.               font-size: 14px;
  979.               text-align: center;
  980.               margin-top: 10px;
  981.             }
  982.             p{
  983.               font-size: 13px;
  984.               color: #D4282D;
  985.               text-align: center;
  986.               margin-top: 10px;
  987.               span{
  988.                 font-size: 10px;
  989.                 color: #999999;
  990.                 text-decoration: line-through;
  991.                 margin-left: 5px;
  992.               }
  993.             }
  994.           }
  995.         }
  996.       }
  997.     }
  998.  }
  999. }
  1000. .common{
  1001.   width: 100%;
  1002.   height: 940px;
  1003.   display: flex;
  1004.   justify-content: center;
  1005.   align-items: center;
  1006.   .cm{
  1007.     width: 1200px;
  1008.     height: 820px;
  1009.     .cm_top{
  1010.       width: 100%;
  1011.       height: 48px;
  1012.       display: flex;
  1013.       margin-bottom: 15px;
  1014.       h3{
  1015.         font-size: 28px;
  1016.         margin-right: 20px;
  1017.         line-height: 48px;
  1018.       }
  1019.       ul{
  1020.         height: 48px;
  1021.         display: flex;
  1022.         margin-left: 400px;
  1023.         li{
  1024.           line-height: 48px;
  1025.           padding: 0 10px 0 10px;
  1026.           font-size: 14px;
  1027.           a{
  1028.             color: #333;
  1029.           }
  1030.         }
  1031.       }
  1032.     }
  1033.     .cm_bottom{
  1034.       width: 100%;
  1035.       height: 757px;
  1036.       .big{
  1037.         width: 100%;
  1038.         height: 310px;
  1039.         margin-bottom: 30px;
  1040.         img{
  1041.           width: 100%;
  1042.           height: 311px;
  1043.         }
  1044.       }
  1045.       .small{
  1046.         width: 100%;
  1047.         height: 400px;
  1048.         display: flex;
  1049.         justify-content: space-between;
  1050.         div{
  1051.           width: 265px;
  1052.           height: 100%;   
  1053.           .img{
  1054.             width: 265px;
  1055.             height: 265px;
  1056.             background-color: #F4F4F4;
  1057.           }
  1058.           
  1059.           h4{
  1060.             text-align: center;
  1061.             margin-top: 30px;
  1062.           }
  1063.           h4:hover{
  1064.             color: #B4A078;
  1065.           }
  1066.           p{
  1067.             font-size: 13px;
  1068.             color: #D4282D;
  1069.             text-align: center;
  1070.             margin-top: 15px;
  1071.             span{
  1072.               font-size: 12px;
  1073.               color: #999999;
  1074.               text-decoration: line-through;
  1075.               margin-left: 5px;
  1076.             }
  1077.           }
  1078.         }
  1079.         div:hover{
  1080.           background-color: #F4F0EA;
  1081.  
  1082.         }
  1083.       }
  1084.     }
  1085.   }
  1086. }
  1087. .bedding{
  1088.   .cm_bottom{
  1089.     .small{
  1090.       .one{
  1091.         background: url(../images/床品/原创1.webp);
  1092.         background-repeat: no-repeat;
  1093.       }
  1094.       .two{
  1095.         background: url(../images/床品/温润1.webp);
  1096.         background-repeat: no-repeat;
  1097.       }
  1098.       .three{
  1099.         background: url(../images/床品/裸睡1.webp);
  1100.         background-repeat: no-repeat;
  1101.       }
  1102.       .four{
  1103.         background: url(../images/床品/每一口.webp);
  1104.         background-repeat: no-repeat;
  1105.       }
  1106.       .sm_all:hover .one{
  1107.         background: url(../images/床品/原创2.webp);
  1108.       }
  1109.       .sm_all:hover .two{
  1110.         background: url(../images/床品/温润2.webp);
  1111.       }
  1112.       .sm_all:hover .three{
  1113.         background: url(../images/床品/裸睡2.webp);
  1114.       }
  1115.       .sm_all:hover .four{
  1116.         background: url(../images/床品/每一口2.webp);
  1117.       }
  1118.     }
  1119.     
  1120.   }
  1121. }
  1122. .manclothes{
  1123.   .cm_bottom{
  1124.     .small{
  1125.       .one{
  1126.         background: url(../images/男装/女式1.webp);
  1127.         background-repeat: no-repeat;
  1128.       }
  1129.       .two{
  1130.         background: url(../images/男装/32-1.webp);
  1131.         background-repeat: no-repeat;
  1132.       }
  1133.       .three{
  1134.         background: url(../images/男装/行之语1.webp);
  1135.         background-repeat: no-repeat;
  1136.       }
  1137.       .four{
  1138.         background: url(../images/男装/凉透1.webp);
  1139.         background-repeat: no-repeat;
  1140.       }
  1141.       .sm_all:hover .one{
  1142.         background: url(../images/男装/女式2.webp);
  1143.       }
  1144.       .sm_all:hover .two{
  1145.         background: url(../images/男装/32-2.webp);
  1146.       }
  1147.       .sm_all:hover .three{
  1148.         background: url(../images/男装/行之语2.webp);
  1149.       }
  1150.       .sm_all:hover .four{
  1151.         background: url(../images/男装/凉透2.webp);
  1152.       }
  1153.     }
  1154.     
  1155.   }
  1156. }
  1157. .drink{
  1158.   .cm_top{
  1159.     ul{
  1160.       a{
  1161.         margin-left: 43px;
  1162.       }
  1163.     }
  1164.   }
  1165.   .cm_bottom{
  1166.     .small{
  1167.       .one{
  1168.         background: url(../images/乳饮酒水/可以1.webp);
  1169.         background-repeat: no-repeat;
  1170.       }
  1171.       .two{
  1172.         background: url(../images/乳饮酒水/宛如1.webp);
  1173.         background-repeat: no-repeat;
  1174.       }
  1175.       .three{
  1176.         background: url(../images/乳饮酒水/一口1.webp);
  1177.         background-repeat: no-repeat;
  1178.       }
  1179.       
  1180.       .sm_all:hover .one{
  1181.         background: url(../images/乳饮酒水/可以2.webp);
  1182.       }
  1183.       .sm_all:hover .two{
  1184.         background: url(../images/乳饮酒水/宛如2.webp);
  1185.       }
  1186.       .sm_all:hover .three{
  1187.         background: url(../images/乳饮酒水/一口2.webp);
  1188.       }
  1189.     }
  1190.     
  1191.   }
  1192. }
  1193. .homeclean.common{
  1194.   .cm_top{
  1195.     ul{
  1196.       margin-left: 250px;
  1197.       a{
  1198.         margin-left: 53px;
  1199.       }
  1200.     }
  1201.   }
  1202.   .cm_bottom{
  1203.     .small{
  1204.       .one{
  1205.         background: url(../images/家庭清洁/肌初1.webp);
  1206.         background-repeat: no-repeat;
  1207.       }
  1208.       .two{
  1209.         background: url(../images/家庭清洁/看得见1.webp);
  1210.         background-repeat: no-repeat;
  1211.       }
  1212.       .three{
  1213.         background: url(../images/家庭清洁/谷风1.webp);
  1214.         background-repeat: no-repeat;
  1215.       }
  1216.       .four{
  1217.         background: url(../images/家庭清洁/时刻1.webp);
  1218.         background-repeat: no-repeat;
  1219.       }
  1220.       .sm_all:hover .one{
  1221.         background: url(../images/家庭清洁/肌初2.webp);
  1222.       }
  1223.       .sm_all:hover .two{
  1224.         background: url(../images/家庭清洁/看得见2.webp);
  1225.       }
  1226.       .sm_all:hover .three{
  1227.         background: url(../images/家庭清洁/谷风2.webp);
  1228.       }
  1229.       .sm_all:hover .four{
  1230.         background: url(../images/家庭清洁/时刻2.webp);
  1231.       }
  1232.     }
  1233.     
  1234.   }
  1235. }
  1236. .petlife.common{
  1237.   .cm_top{
  1238.     ul{
  1239.       margin-left: 345px;
  1240.       
  1241.     }
  1242.   }
  1243.   .cm_bottom{
  1244.     .small{
  1245.       .one{
  1246.         background: url(../images/宠物生活/过亿1.webp);
  1247.         background-repeat: no-repeat;
  1248.       }
  1249.       .two{
  1250.         background: url(../images/宠物生活/除臭1.webp);
  1251.         background-repeat: no-repeat;
  1252.       }
  1253.       .three{
  1254.         background: url(../images/宠物生活/五种1.webp);
  1255.         background-repeat: no-repeat;
  1256.       }
  1257.       .four{
  1258.         background: url(../images/宠物生活/细腻1.webp);
  1259.         background-repeat: no-repeat;
  1260.       }
  1261.       .sm_all:hover .one{
  1262.         background: url(../images/宠物生活/过亿2.webp);
  1263.       }
  1264.       .sm_all:hover .two{
  1265.         background: url(../images/宠物生活/除臭2.webp);
  1266.       }
  1267.       .sm_all:hover .three{
  1268.         background: url(../images/宠物生活/五种2.webp);
  1269.       }
  1270.       .sm_all:hover .four{
  1271.         background: url(../images/宠物生活/细腻2.webp);
  1272.       }
  1273.     }
  1274.     
  1275.   }
  1276. }
  1277. .mz.common{
  1278.   .cm_top{
  1279.     ul{
  1280.       margin-left: 277px;
  1281.       
  1282.     }
  1283.   }
  1284.   .cm_bottom{
  1285.     .small{
  1286.       .one{
  1287.         background: url(../images/母婴亲子/极致1.webp);
  1288.         background-repeat: no-repeat;
  1289.       }
  1290.       .two{
  1291.         background: url(../images/母婴亲子/敏感1.webp);
  1292.         background-repeat: no-repeat;
  1293.       }
  1294.       .three{
  1295.         background: url(../images/母婴亲子/经典1.webp);
  1296.         background-repeat: no-repeat;
  1297.       }
  1298.       .four{
  1299.         background: url(../images/母婴亲子/雪地1.webp);
  1300.         background-repeat: no-repeat;
  1301.       }
  1302.       .sm_all:hover .one{
  1303.         background: url(../images/母婴亲子/极致2.webp);
  1304.       }
  1305.       .sm_all:hover .two{
  1306.         background: url(../images/母婴亲子/敏感2.webp);
  1307.       }
  1308.       .sm_all:hover .three{
  1309.         background: url(../images/母婴亲子/经典2.webp);
  1310.       }
  1311.       .sm_all:hover .four{
  1312.         background: url(../images/母婴亲子/雪地2.webp);
  1313.       }
  1314.     }
  1315.     
  1316.   }
  1317. }
  1318. .sptravel.common{
  1319.   .cm_top{
  1320.     ul{
  1321.       margin-left: 253px;
  1322.       
  1323.     }
  1324.   }
  1325.   .cm_bottom{
  1326.     .small{
  1327.       .one{
  1328.         background: url(../images/运动旅行/严选1.webp);
  1329.         background-repeat: no-repeat;
  1330.       }
  1331.       .two{
  1332.         background: url(../images/运动旅行/携带1.webp);
  1333.         background-repeat: no-repeat;
  1334.       }
  1335.       .three{
  1336.         background: url(../images/运动旅行/小胖1.webp);
  1337.         background-repeat: no-repeat;
  1338.       }
  1339.       .sm_all:hover .one{
  1340.         background: url(../images/运动旅行/严选2.webp);
  1341.       }
  1342.       .sm_all:hover .two{
  1343.         background: url(../images/运动旅行/携带2.webp);
  1344.       }
  1345.       .sm_all:hover .three{
  1346.         background: url(../images/运动旅行/小胖2.webp);
  1347.       }
  1348.     }
  1349.     
  1350.   }
  1351. }
  1352. .home_appliances.common{
  1353.  .cm_top{ 
  1354.     ul{
  1355.       margin-left: 193px;
  1356.       
  1357.     }
  1358.   }
  1359.   .cm_bottom{
  1360.     .small{
  1361.       .one{
  1362.         background: url(../images/数码家电/时刻1.webp);
  1363.         background-repeat: no-repeat;
  1364.       }
  1365.       .two{
  1366.         background: url(../images/数码家电/礼盒1.webp);
  1367.         background-repeat: no-repeat;
  1368.       }
  1369.       .three{
  1370.         background: url(../images/数码家电/全净1.webp);
  1371.         background-repeat: no-repeat;
  1372.       }
  1373.       .four{
  1374.         background: url(../images/数码家电/加湿1.webp);
  1375.         background-repeat: no-repeat;
  1376.       }
  1377.       .sm_all:hover .one{
  1378.         background: url(../images/数码家电/时刻2.webp);
  1379.       }
  1380.       .sm_all:hover .two{
  1381.         background: url(../images/数码家电/礼盒2.webp);
  1382.       }
  1383.       .sm_all:hover .three{
  1384.         background: url(../images/数码家电/全净2.webp);
  1385.       }
  1386.       .sm_all:hover .four{
  1387.         background: url(../images/数码家电/加湿2.webp);
  1388.       }
  1389.     }
  1390.     
  1391.   }
  1392. }
  1393. .yxworld.common{
  1394.   .cm_top{ 
  1395.     ul{
  1396.       margin-left: 697px;
  1397.       
  1398.     }
  1399.   }
  1400.   .cm_bottom{
  1401.     .small{
  1402.       .one{
  1403.         background: url(../images/严选全球/睡着1.webp);
  1404.         background-repeat: no-repeat;
  1405.       }
  1406.       .two{
  1407.         background: url(../images/严选全球/严选1.webp);
  1408.         background-repeat: no-repeat;
  1409.       }
  1410.       .three{
  1411.         background: url(../images/严选全球/大牌1.webp);
  1412.         background-repeat: no-repeat;
  1413.       }
  1414.       .four{
  1415.         background: url(../images/严选全球/泰国1.webp);
  1416.         background-repeat: no-repeat;
  1417.       }
  1418.       .sm_all:hover .one{
  1419.         background: url(../images/严选全球/睡着2.webp);
  1420.       }
  1421.       .sm_all:hover .two{
  1422.         background: url(../images/严选全球/严选2.webp);
  1423.       }
  1424.       .sm_all:hover .three{
  1425.         background: url(../images/严选全球/大牌2.webp);
  1426.       }
  1427.       .sm_all:hover .four{
  1428.         background: url(../images/严选全球/泰国2.webp);
  1429.       }
  1430.     }
  1431.     
  1432.   }
  1433. }
  1434. .recommend{
  1435.   background-color: #F4F0EA;
  1436. }
  1437. .selector{
  1438.   width: 100%;
  1439.   height: 430px;
  1440.   display: flex;
  1441.   justify-content: center;
  1442.   align-items: center;
  1443.   .selector_main{
  1444.     width: 1200px;
  1445.     height: 430px;
  1446.     .selector_top{
  1447.       width: 100%;
  1448.       height: 28px;
  1449.       margin-bottom: 30px;
  1450.       h3{
  1451.         display: inline-block;
  1452.         font-size: 28px;
  1453.       }
  1454.       span{
  1455.         font-size: 14px;
  1456.         margin-left: 30px;
  1457.       }
  1458.     }
  1459.     .selector_bottom{
  1460.       position: relative;
  1461.       img:nth-child(1){
  1462.         width: 800px;
  1463.         height: 370px;
  1464.       }
  1465.       img:nth-child(2){
  1466.         position: absolute;
  1467.         top: 0;
  1468.         left: 805px;
  1469.         width: 390px;
  1470.         height: 180px;
  1471.       }
  1472.       img:nth-chid(3){
  1473.         width: 390px;
  1474.         height: 180px;
  1475.       }
  1476.     }
  1477.   }
  1478. }
  1479. .all_speaking{
  1480.   width: 100%;
  1481.   height: 610px;
  1482.   display: flex;
  1483.   justify-content: center;
  1484.   align-items: center;
  1485.   background-color: #F4F0EA;
  1486.   margin-top: 80px;
  1487.   .aspeaking{
  1488.     width: 1200px;
  1489.     height: 500px;
  1490.     .as_top{
  1491.       width: 100%;
  1492.       height: 28px;
  1493.       margin-bottom: 20px;
  1494.       h3{
  1495.         display: inline-block;
  1496.         font-size: 28px;
  1497.       font-weight: 700;
  1498.       }
  1499.       span{
  1500.         margin-left: 30px;
  1501.         font-size: 14px;
  1502.       }
  1503.     }
  1504.     .as_bottom{
  1505.       width: 100%;
  1506.       height:452px ;
  1507.       .swiper{
  1508.         width: 100%;
  1509.         height: 452px;
  1510.         position: relative;
  1511.         .swiper-slide{
  1512.           .sw_content{
  1513.             width: 300px;
  1514.             height: 452px;
  1515.             margin: auto;
  1516.             background-color: #fff;
  1517.             border: 1px solid #ccc;
  1518.             .ct_img{
  1519.               width: 300px;
  1520.               height: 355px;
  1521.               overflow: hidden;
  1522.               img{
  1523.                 width: 300px;
  1524.                 height: 355px;
  1525.               }
  1526.               img:hover{
  1527.                 transform: scale(1.1);
  1528.                 transition: 0.5s ease;
  1529.               }
  1530.             }
  1531.             .ct_introduce{
  1532.               position: absolute;
  1533.               top: 252px;
  1534.               left: 49px;
  1535.               z-index: 2;
  1536.               background-color: #fff;
  1537.              
  1538.               width:280px;
  1539.               height: 200px;
  1540.               margin:auto;
  1541.               p:nth-child(1){
  1542.                 padding: 10px 0 10px 10px;
  1543.                font-size: 13px;
  1544.                color: #999999;
  1545.                span{
  1546.                 margin-left: 15px;
  1547.                }
  1548.               } 
  1549.               .pinglun{
  1550.                 width: 260px;
  1551.                 height: 80px;
  1552.                 margin-top: 20px;
  1553.                 margin-left: 10px;
  1554.                 font-size: 13px;
  1555.               }
  1556.               h3{
  1557.                 margin-left: 10px;
  1558.                 height: 18px;
  1559.                 font-size: 16px;
  1560.                 overflow: hidden;
  1561.                 max-width: 200px;
  1562.                 text-overflow: ellipsis;
  1563.                 white-space: nowrap; 
  1564.               }
  1565.               .money{
  1566.                 float: right;
  1567.                 margin-top: -16px;
  1568.                 margin-right: 10px;
  1569.                 font-size: 13px;
  1570.                 color: #B4A078;
  1571.               }
  1572.             }
  1573.           }
  1574.         }
  1575.       }
  1576.     }
  1577.     
  1578.     
  1579.   }
  1580. }
  1581. .footer-top{
  1582.   width: 100%;
  1583.   height: 300px;
  1584.   display: flex;
  1585.   justify-content: center;
  1586.   align-items: center;
  1587.   .ft_nr{
  1588.     width: 1200px;
  1589.     height: 204px;
  1590.     display: flex;
  1591.     justify-content: center;
  1592.     align-items: center;
  1593.     .ft{
  1594.       width: 370px;
  1595.       height: 204px;
  1596.       border-right: 1px solid #ddd;
  1597.       h4{
  1598.         font-size: 16px;
  1599.         font-weight: 400;
  1600.         margin-bottom: 28px;
  1601.         text-align: center;
  1602.       }
  1603.  
  1604.     }
  1605.     .one{
  1606.       div{
  1607.         cursor: pointer;
  1608.         display: inline-block;
  1609.         text-align: center;
  1610.         padding: 30px 0 0 0;
  1611.         width: 100px;
  1612.         height: 100px;
  1613.         border: 1px solid #ddd;
  1614.         margin-left: 55px;
  1615.       }
  1616.     }
  1617.     .two{
  1618.       padding: 0 37px;
  1619.       p{
  1620.         text-align: left;
  1621.         font-size: 12px;
  1622.         line-height: 18px;
  1623.         margin-bottom: 20px;
  1624.       }
  1625.       .attention{
  1626.         span{
  1627.           vertical-align: middle;
  1628.           font-size: 14px;
  1629.         }
  1630.         img{
  1631.           vertical-align: middle;
  1632.           cursor: pointer;
  1633.           margin-left: 10px;
  1634.           width: 32px;
  1635.           height: 32px;
  1636.         }
  1637.       }
  1638.     }
  1639.     .three{
  1640.       text-align: center;
  1641.       img{
  1642.         width: 104px;
  1643.         height: 104px;
  1644.       }
  1645.       p{
  1646.         margin-top: 3px;
  1647.         font-size: 12px;
  1648.         color: #B4A078;
  1649.       }
  1650.     }
  1651.   }
  1652. }
  1653. .footer-bottom{
  1654.   width: 100%;
  1655.   height: 350px;
  1656.   background-color: #414141;
  1657.   .fb{
  1658.     width: 1200px;
  1659.     height: 350px;
  1660.     margin: auto;
  1661.     .fb_top{
  1662.       height: 120px;
  1663.       border-bottom: 1px solid #4F4F4F;
  1664.       display: flex;
  1665.       justify-content: space-around;
  1666.       align-items: center;
  1667.       div{
  1668.         height: 51px;
  1669.         img{
  1670.           width: 50px;
  1671.           height: 50px;
  1672.           vertical-align: middle;
  1673.         }
  1674.         span{
  1675.           vertical-align: middle;
  1676.           margin-left: 15px;
  1677.           font-size: 18px;
  1678.           color: #fff;
  1679.         }
  1680.       }
  1681.     }
  1682.     .fb_bottom{
  1683.       width: 1200px;
  1684.       color: #999;
  1685.       text-align: center;
  1686.       font-size: 12px;
  1687.       ul{
  1688.         margin-top: 15px;
  1689.         li{
  1690.           cursor: pointer;
  1691.           display: inline;
  1692.           padding: 0 10px 0 10px;
  1693.           img{
  1694.             vertical-align: middle;
  1695.             width: 23px;
  1696.             height: 25px;
  1697.           }
  1698.         }
  1699.         li:hover{
  1700.           color: #fff;
  1701.         }
  1702.       }
  1703.       ul:nth-child(1){
  1704.         margin-top: 40px;
  1705.         li{
  1706.           border-right: 1px solid #999;
  1707.           
  1708.         }
  1709.       }
  1710.     }
  1711.   }
  1712.   
  1713. }

(4)main.js

  1. const nones = document.querySelectorAll('.item.none')
  2. const menu = document.querySelector('.bottom')
  3. const advertisement = document.querySelector('.advertisement')
  4. const menulogo = document.querySelector('.menu>.menu_logo')
  5. const menuicon = document.querySelector('.menu>.menu_icon')
  6. const menuitem_a = document.querySelectorAll('.menu>.item>a')
  7. const rd_top =document.querySelector('.rd_top')
  8. const lis = document.querySelectorAll('.rd_top>ul>li>a')
  9. const rds =document. getElementsByClassName('rd_common')
  10. console.log(rds);
  11. console.log(lis);
  12.  
  13.  
  14. for (let i = 0; i < nones.length; i++) {
  15.   nones[i].onmouseover = function(){
  16.     this.children[1].style.display="block";
  17.   }
  18.   nones[i].onmouseout = function(){
  19.     this.children[1].style.display='none';
  20.   }
  21.   
  22. }
  23.  
  24. // 导航栏和侧边栏固定
  25. window.addEventListener('scroll',function(){
  26.   const n =this.document.documentElement.scrollTop;
  27.   const m = menu.scrollHeight+ menu.offsetTop;
  28.   // 优化前
  29.   // if (n>=0&&n<=menu.offsetTop) {
  30.   //   menu.style.position = "absolute";
  31.   //   menu.style.top = "135px";
  32.   //   menulogo.style.display= "none";
  33.   //   menuicon.style.display = "none";
  34.   //   for (let i = 0; i < menuitem_a.length; i++) {
  35.   //     menuitem_a[i].style.padding = "0 20px 3px";
  36.       
  37.   //   }
  38.   // }else if(n>menu.offsetTop&&n<=m){
  39.   //   console.log(menu.style.position);
  40.   //   menu.style.top = "-45px";
  41.   // }else if(n>=m){
  42.   //   menu.style.position = "fixed";
  43.   //   menu.style.top =0;
  44.   //   menulogo.style.display= "block";
  45.   //   menuicon.style.display = "block";
  46.   //   for (let i = 0; i < menuitem_a.length; i++) {
  47.   //     menuitem_a[i].style.padding = "0 10px 3px";
  48.       
  49.   //   }
  50.     
  51.   // }
  52.   // chatgpt优化后
  53.   const menuTop = menu.offsetTop;
  54.   const menuItems = menuitem_a.length;
  55.   if (n >= 0 && n <= menuTop) {
  56.    menu.style.position = "absolute";
  57.     menu.style.top = "135px";
  58.    menulogo.style.display = "none";
  59.     menuicon.style.display = "none";
  60.    for (let i = 0; i < menuItems; i++) {
  61.     menuitem_a[i].style.padding = "0 20px 3px";
  62.    }
  63.   } else if (n > menuTop && n <= m) {
  64.   console.log(menu.style.position);
  65.   menu.style.top = "-45px";
  66. } else if (n >= m) {
  67.   menu.style.position = "fixed";
  68.   menu.style.top = 0;
  69.   menu.style.width = "100%";
  70.   menulogo.style.display = "block";
  71.   menuicon.style.display = "block";
  72.   for (let i = 0; i < menuItems; i++) {
  73.     menuitem_a[i].style.padding = "0 10px 3px";
  74.   }
  75. }
  76. })
  77.  
  78. // tab栏切换
  79. for(var i=0;i<lis.length;i++) {
  80.   lis[i].setAttribute('index',i);
  81.   lis[i].onclick = function() {
  82.     // 其余的li清除
  83.     for(var i=0;i<lis.length;i++) {
  84.       lis[i].className = '';
  85.     }
  86.     // 保留自己
  87.     this.className = 'current';
  88.     // 2. 下面内容区域显示对应的内容
  89.     var index = this.getAttribute('index');
  90.     console.log(index);
  91.     // console.log(index);
  92.     // 排他，其他的都不显示
  93.     for(var i=0;i<rds.length;i++) {
  94.       rds[i].style.display = 'none';
  95.     }
  96.     rds[index].style.display = 'block';
  97.   }
  98. }

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

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

  

闽ICP备14008679号