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

小米商城（HTML5+CSS3版）_html js css小米商城

作者：盐析白兔 | 2024-04-03 12:03:37

赞

踩

html js css小米商城

正在学习HTML5+CSS3的小伙伴们如果想练手的话，可以先照着小米商城的网站敲。因为还没有学到JS，下面代码只实现了部分功能：

index：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="stylesheet" href="css/xiaomi.css">
  10.     <link rel="icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
  11. </head>
  12.  
  13. <body>
  14.     <!-- 小米顶部广告 -->
  15.     <div class="advertisement w2"></div>
  16.     <!-- 小米导航栏 -->
  17.     <div class="nav w2">
  18.         <div class="header w1">
  19.             <div class="nav-left">
  20.                 <ul>
  21.                     <li><a href="">小米商城</a><span>|</span></li>
  22.                     <li><a href="">MIUI</a><span>|</span></li>
  23.                     <li><a href="">IoT</a><span>|</span></li>
  24.                     <li><a href="">云服务</a><span>|</span></li>
  25.                     <li><a href="">天星数科</a><span>|</span></li>
  26.                     <li><a href="">有品</a><span>|</span></li>
  27.                     <li><a href="">小爱开放平台</a><span>|</span></li>
  28.                     <li><a href="">企业团购</a><span>|</span></li>
  29.                     <li><a href="">资质证照</a><span>|</span></li>
  30.                     <li><a href="">协议规则</a><span>|</span></li>
  31.                     <li>
  32.                         <div class="app">
  33.                             <a href="">下载app</a>
  34.                             <div class="top-triango"></div>
  35.                             <div class="sub-app">
  36.                                 <img src="/images/导航栏1.png" alt="">
  37.                                 <p>小米商城APP</p>
  38.                             </div>
  39.                         </div>
  40.  
  41.                     </li>
  42.                     <li><a href=""><span>|</span>智能生活</a><span>|</span></li>
  43.                     <li><a href="">Select Location</a></li>
  44.                 </ul>
  45.             </div>
  46.             <div class="nav-right">
  47.                 <ul>
  48.                     <li class="car"><a href=""><i></i>&nbsp;购物车&nbsp;&nbsp;(0)</a>
  49.                         <div class="empty">你家购物车空了，穷鬼</div>
  50.                     </li>
  51.                     <li><a href="">消息通知</a></li>
  52.                     <li><a href="">注册</a><span>|</span></li>
  53.                     <li><a href="">登录</a><span>|</span></li>
  54.  
  55.                 </ul>
  56.             </div>
  57.         </div>
  58.     </div>
  59.     <!-- 副导航栏 -->
  60.     <div class="big-sub">
  61.         <div class="sub-main w1 ">
  62.             <div class="sub-left">
  63.                 <ul>
  64.                     <li><img src="/images/副导航栏1.png" alt="" title="小米官网"></li>
  65.                     <li><a href="">小米手机</a>
  66.                         <div class="left-change">
  67.                             <ul>
  68.                                 <li class="left-change1"><img src="/images/副导航栏2.webp" alt="">
  69.                                     <p>Xiaomi Civi 2</p><i>2399元起</i>
  70.                                 </li>
  71.                                 <li><img src="/images/副导航栏3.webp" alt="">
  72.                                     <p>Xiaomi MIX Fold 2</p><i>8999元起</i>
  73.                                 </li>
  74.                                 <li><img src="/images/副导航栏4.webp" alt="">
  75.                                     <p>Xiaomi 12S UIrea</p><i>5999元起</i>
  76.                                 </li>
  77.                                 <li><img src="/images/副导航栏5.webp" alt="">
  78.                                     <p>Xiaomi 12S Pro</p><i>4399元起</i>
  79.                                 </li>
  80.                                 <li><img src="/images/副导航栏6.webp" alt="">
  81.                                     <p>Xiaomi 12S</p><i>3699元起</i>
  82.                                 </li>
  83.                                 <li><img src="/images/副导航栏7.webp" alt="">
  84.                                     <p>Xiaomi 12 Pro 天玑版</p><i>2999元起</i>
  85.                                 </li>
  86.                             </ul>
  87.                         </div>
  88.                     </li>
  89.                     <li><a href="">红米手机</a></li>
  90.                     <li><a href="">电视</a></li>
  91.                     <li><a href="">笔记本</a></li>
  92.                     <li><a href="">平板</a></li>
  93.                     <li><a href="">家电</a></li>
  94.                     <li><a href="">路由器</a></li>
  95.                     <li><a href="">服务中心</a></li>
  96.                     <li><a href="">社区</a></li>
  97.                 </ul>
  98.             </div>
  99.  
  100.             <div class="sub-right">
  101.  
  102.                 <input type="text" class="search" value="&nbsp;&nbsp;iphone 14 pro max 暗夜紫">
  103.                 <button></button>
  104.             </div>
  105.  
  106.         </div>
  107.     </div>
  108.     <!-- 轮播图 -->
  109.     <div class="w2 m1">
  110.         <div class="w1">
  111.             <div class="lbt">
  112.                 <div class="button-left"></div>
  113.                 <div class="button-right"><i></i></div>
  114.                 <div class="hdm">
  115.                     <ul>
  116.                         <li><div class="hdm-left"><a href="">手机</a><i>&gt;</i></div></li>
  117.                         <li><div class="hdm-left"><a href="">电视</a><i>&gt;</i></div></li>
  118.                         <li><div class="hdm-left"><a href="">笔记本 平板</a><i>&gt;</i></div></li>
  119.                         <li><div class="hdm-left"><a href="">出行 穿戴</a><i>&gt;</i></div></li>
  120.                         <li><div class="hdm-left"><a href="">耳机 音响</a><i>&gt;</i></div>
  121.                             <div class="hdm-list">
  122.                                 <ul>
  123.                                     <li><img src="/images/滑动门11.webp" alt=""><em class="color-change">骨传导耳机</em></li>
  124.                                     <li><img src="/images/滑动门12.webp" alt=""><em class="color-change">Necklace</em></li>
  125.                                     <li><img src="/images/滑动门13.webp" alt=""><em class="color-change">Xiaomi Bud 4 Pro</em></li>
  126.                                     <li><img src="/images/滑动门14.webp" alt=""><em class="color-change">Redmi Bud 4 Pro</em></li>
  127.                                     <li><img src="/images/滑动门15.webp" alt=""><em class="color-change">Redmi Bud 4</em></li>
  128.                                     <li><img src="/images/滑动门16.webp" alt=""><em class="color-change">Xiaomi无线降噪耳机</em></li>
  129.                                 </ul>
  130.                                 <ul>
  131.                                     <li><img src="/images/滑动门21.webp" alt=""><em class="color-change">Xiaomi 无线降噪耳机3</em></li>
  132.                                     <li><img src="/images/滑动门22.webp" alt=""><em class="color-change">Redmi Buds 3</em></li>
  133.                                     <li><img src="/images/滑动门23.webp" alt=""><em class="color-change">Air2 SE</em></li>
  134.                                     <li><img src="/images/滑动门24.webp" alt=""><em class="color-change">Redmi Buds 3青春版</em></li>
  135.                                     <li><img src="/images/滑动门25.webp" alt=""><em class="color-change">小米圈铁耳机Pro</em></li>
  136.                                     <li><img src="/images/滑动门26.webp" alt=""><em class="color-change">小米活塞耳机</em></li>
  137.                                 </ul>
  138.                                 <ul>
  139.                                     <li><img src="/images/滑动门31.webp" alt=""><em class="color-change">小米小爱触屏音箱Pro 8</em></li>
  140.                                     <li><img src="/images/滑动门32.webp" alt=""><em class="color-change">小米小爱随身音箱</em></li>
  141.                                     <li><img src="/images/滑动门33.webp" alt=""><em class="color-change">Xiaomi智能家庭屏6</em></li>
  142.                                     <li><img src="/images/滑动门34.webp" alt=""><em class="color-change">小米小爱音箱Art</em></li>
  143.                                     <li><img src="/images/滑动门35.webp" alt=""><em class="color-change">Xiaomi Sound</em></li>
  144.                                     <li><img src="/images/滑动门36.webp" alt=""><em class="color-change">Redmi小爱触屏音箱Pro 8</em></li>
  145.                                 </ul>
  146.                                 <ul>
  147.                                     <li><img src="/images/滑动门41.webp" alt=""><em class="color-change">Xiaomi智能家庭屏10</em></li>
  148.                                     <li><img src="/images/滑动门42.webp" alt=""><em class="color-change">小爱音箱Pro</em></li>
  149.                                     <li><img src="/images/滑动门43.webp" alt=""><em class="color-change">小爱音箱Play增强版</em></li>
  150.                                     <li><img src="/images/滑动门44.jpg" alt=""><em class="color-change">小米小爱触屏音箱</em></li>
  151.                                     <li><img src="/images/滑动门45.jpg" alt=""><em class="color-change">小米小暖音箱Play</em></li>
  152.                                     <li><img src="/images/滑动门46.webp" alt=""><em class="color-change">小米小爱音箱Art电池版</em></li>
  153.                                 </ul>
  154.                             </div>
  155.                             
  156.                         </li>
  157.                         <li><div class="hdm-left"><a href="">家电</a><i>&gt;</i></div></li>
  158.                         <li><div class="hdm-left"><a href="">智能 路由器</a><i>&gt;</i></div></li>
  159.                         <li><div class="hdm-left"><a href="">电源 配件</a><i>&gt;</i></div></li>
  160.                         <li><div class="hdm-left"><a href="">健康</a><i>&gt;</i></div></li>
  161.                         <li><div class="hdm-left"><a href="">生活 箱包</a><i>&gt;</i></div></li>
  162.                     </ul>
  163.                 </div>
  164.             </div>
  165.  
  166.         </div>
  167.     </div>
  168.     <!-- 促销商品区 -->
  169.     <div class="w2 m2">
  170.         <div class="w1">
  171.             <div class="sp-div sp-first">
  172.                 <ul>
  173.                     <li><a href=""><img src="/images/促销商品区1.png" alt="">保障服务</a></li>
  174.                     <li><a href=""><img src="/images/促销商品区2.png" alt="">企业团购</a></li>
  175.                     <li><a href=""><img src="/images/促销商品区3.png" alt="">F码通道</a></li>
  176.                     <li><a href=""><img src="/images/促销商品区4.png" alt="">米粉卡</a></li>
  177.                     <li><a href=""><img src="/images/促销商品区5.png" alt="">以旧换新</a></li>
  178.                     <li><a href=""><img src="/images/促销商品区6.png" alt="">话费充值</a></li>
  179.                 </ul>
  180.             </div>
  181.             <div class="sp-div sp-last"><a href=""><img src="/images/促销商品区7.jpg" alt=""></a></div>
  182.             <div class="sp-div sp-last"><a href=""><img src="/images/促销商品区8.jpg" alt=""></a></div>
  183.             <div class="sp-div sp-last"><a href=""><img src="/images/促销商品区9.jpg" alt=""></a></div>
  184.         </div>
  185.     </div>
  186.     <!--商品区  -->
  187.     <div class="m">
  188.         <div class="w1 m3"><a href=""><img src="/images/商品区1.webp" alt=""></a></div>
  189.         <!-- 第一个商品 -->
  190.         <div class="w1 phone">
  191.             <h2>手机</h2>
  192.             <div class="phone-left">
  193.                 <a href="">
  194.                     <img src="/images/商品区2.webp" alt="">
  195.                 </a>
  196.             </div>
  197.             <div class="phone-right right1">
  198.                 <div><img src="/images/商品区3.webp" alt="">
  199.                     <h3>Redmi Note 12 5G</h3>
  200.                     <p>三星 OLED 护眼屏｜骁龙 5G 芯｜5000mAh 电量</p>
  201.                     <i>1199元起</i>
  202.                 </div>
  203.                 <div><img src="/images/商品区4.webp" alt="">
  204.                     <h3>Redmi K50</h3>
  205.                     <p>2K直屏的狠旗舰</p>
  206.                     <i>1699元起</i>
  207.                 </div>
  208.                 <div><img src="/images/商品区5.webp" alt="">
  209.                     <h3>Redmi Note 12 Pro</h3>
  210.                     <p>IMX766 防抖相机｜OLED 柔性直屏｜67W 闪充</p>
  211.                     <i>2099元起</i>
  212.                 </div>
  213.                 <div><img src="/images/商品区6.webp" alt="">
  214.                     <h3>Redmi Note 12 Pro+</h3>
  215.                     <p>2亿超清防抖相机｜OLED 柔性直屏</p>
  216.                     <i>1099元起</i>
  217.                 </div>
  218.                 <div><img src="/images/商品区7.webp" alt="">
  219.                     <h3>Redmi Note 11 5G</h3>
  220.                     <p>5000mAh大电量</p>
  221.                     <i>2099元起</i>
  222.                 </div>
  223.                 <div><img src="/images/商品区8.webp" alt="">
  224.                     <h3>Redmi Note 11T Pro</h3>
  225.                     <p>天玑8100｜真旗舰芯</p>
  226.                     <i>1599元起</i>
  227.                 </div>
  228.                 <div><img src="/images/商品区9.webp" alt="">
  229.                     <h3>Xiaomi 12S Pro</h3>
  230.                     <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
  231.                     <i>4399元起</i>
  232.                 </div>
  233.                 <div><img src="/images/商品区10.webp" alt="">
  234.                     <h3>Redmi K50 至尊版</h3>
  235.                     <p>骁龙8+ ｜1.5K 高清直屏</p>
  236.                     <i>2699元起</i>
  237.                 </div>
  238.             </div>
  239.         </div>
  240.         <!-- ----------------------------------------------------------------------------------------------------------------- -->
  241.         <!-- 第二个商品 -->
  242.         <div class="w1 phone">
  243.             <h2>智能家居</h2>
  244.             <div class="phone-right right2">
  245.                 <div class="left-move"><img src="/images/日用百货1.webp" alt="">
  246.                 </div>
  247.                 <div><img src="/images/日用百货2.webp" alt="">
  248.                     <h3>小米小爱音箱 Pro</h3>
  249.                     <p>澎湃低音，语音遥控传统家电</p>
  250.                     <i>899元</i>&nbsp;<del>999元</del>
  251.                 </div>
  252.                 <div><img src="/images/日用百货3.webp" alt="">
  253.                     <h3>小米AI音箱（第二代）</h3>
  254.                     <p>低频饱满有深度，人声清晰有细节</p>
  255.                     <i>199元</i>&nbsp;<del>299元</del>
  256.                 </div>
  257.                 <div><img src="/images/日用百货4.webp" alt="">
  258.                     <h3>Xiaomi智能家庭屏 10</h3>
  259.                     <p>MIUI Home｜10.1" 高清大屏｜115°超广角摄像头｜儿童模式｜家庭 KTV｜小爱同学</p>
  260.                     <i>499元</i>&nbsp;<del>599元</del>
  261.                 </div>
  262.                 <div><img src="/images/日用百货5.webp" alt="">
  263.                     <h3>小米小爱音箱Play 增强版</h3>
  264.                     <p>LED时钟显示，语音控制传统家电</p>
  265.                     <i>99元</i>&nbsp;<del>199元</del>
  266.                 </div>
  267.                 <div class="left-move"><img src="/images/日用百货6.webp" alt="">
  268.                 </div>
  269.                 <div><img src="/images/日用百货9.webp" alt="">
  270.                     <h3>小米小爱音箱 Play</h3>
  271.                     <p>听音乐、语音遥控家电</p>
  272.                     <i>219元</i>&nbsp;<del>299元</del>
  273.                 </div>
  274.                 <div><img src="/images/日用百货7.webp" alt="">
  275.                     <h3>小米小爱触屏音箱</h3>
  276.                     <p>可视化智能家居，海量视听资源</p>
  277.                     <i>269元</i>&nbsp;<del>299元</del>
  278.                 </div>
  279.                 <div><img src="/images/日用百货8.webp" alt="">
  280.                     <h3>Xiaomi Sound</h3>
  281.                     <p>HARMAN工程师专业调音，高保真震撼音质</p>
  282.                     <i>179元</i>&nbsp;<del>199元</del>
  283.                 </div>
  284.  
  285.                 <div class="small-box"><img src="/images/日用百货9.webp" alt=""><a href=""></a>
  286.                     <h3>小米小爱音箱</h3>
  287.                     <i>209元</i></a>
  288.                 </div>
  289.                 <div class="small-box">
  290.                     <h2></h2><a href="">
  291.                         <h3>浏览更多</h3>
  292.                         <p>小爱音响</p>
  293.                     </a>
  294.                 </div>
  295.             </div>
  296.  
  297.  
  298.         </div>
  299.         <!-- 第三个商品 -->
  300.         <div class="kong"></div>
  301.         <div class="w1 m3"><a href=""><img src="/images/日用百货10.webp" alt=""></a></div>
  302.         <div class="w1 phone">
  303.             <h2>日用百货</h2>
  304.             <div class="phone-right right2">
  305.                 <div class="left-move"><img src="/images/智能家居1.webp" alt="">
  306.                 </div>
  307.                 <div><img src="/images/智能家居2.webp" alt="">
  308.                     <h3>米家声波电动牙刷T700</h3>
  309.                     <p>智能洁齿丨强劲动力</p>
  310.                     <i>29元</i>&nbsp;<del>39元</del>
  311.                 </div>
  312.                 <div><img src="/images/智能家居3.webp" alt="">
  313.                     <h3>米家电动剃须刀S500</h3>
  314.                     <p>3刀头360°浮动丨超长续航</p>
  315.                     <i>159元</i>&nbsp;<del>179元</del>
  316.                 </div>
  317.                 <div><img src="/images/智能家居4.webp" alt="">
  318.                     <h3>米家理发器</h3>
  319.                     <p>米家理发器</p>
  320.                     <i>129元</i>&nbsp;<del>149元</del>
  321.                 </div>
  322.                 <div><img src="/images/智能家居5.webp" alt="">
  323.                     <h3>米家自动洗手机套装</h3>
  324.                     <p>伸手出泡，抑菌有效</p>
  325.                     <i>69元</i>&nbsp;<del>79元</del>
  326.                 </div>
  327.                 <div class="left-move"><img src="/images/智能家居6.webp" alt="">
  328.                 </div>
  329.                 <div><img src="/images/智能家居7.webp" alt="">
  330.                     <h3>米家电动冲牙器</h3>
  331.                     <p>超长待机丨4挡模式</p>
  332.                     <i>199元</i>&nbsp;<del>219元</del>
  333.                 </div>
  334.                 <div><img src="/images/智能家居8.webp" alt="">
  335.                     <h3>米家声波电动牙刷T500</h3>
  336.                     <p>过压提醒丨健康报告</p>
  337.                     <i>159元</i>&nbsp;<del>199元</del>
  338.                 </div>
  339.                 <div><img src="/images/智能家居9.webp" alt="">
  340.                     <h3>米家电子体温计</h3>
  341.                     <p>快速知体温，精准更智能</p>
  342.                     <i>89元</i>&nbsp;<del>99元</del>
  343.                 </div>
  344.                 <div class="small-box"><img src="/images/智能家居10.webp" alt=""><a href=""></a>
  345.                     <h3>米家电子体温计</h3>
  346.                     <i>89元</i></a>
  347.                 </div>
  348.                 <div class="small-box">
  349.                     <h2></h2><a href="">
  350.                         <h3>浏览更多</h3>
  351.                         <p>健康防护</p>
  352.                     </a>
  353.                 </div>
  354.             </div>
  355.  
  356.  
  357.         </div>
  358.  
  359.  
  360.     </div>
  361.     <!-- 踝部区 -->
  362.     <div class="w2 mm">
  363.         <div class="w1 m4">
  364.             <ul>
  365.                 <li><a href="" id="border-out"><i></i>&nbsp;预约维修服务</a></li>
  366.                 <li><a href=""><i></i>&nbsp;7天无理由退货</a></li>
  367.                 <li><a href=""><i></i>&nbsp;15天免费换货</a></li>
  368.                 <li><a href=""><i></i>&nbsp;满69元包邮</a></li>
  369.                 <li><a href=""><i></i>&nbsp;1100余家售后网点</a></li>
  370.             </ul>
  371.         </div>
  372.         <div class="w1 m5">
  373.             <dl class="footer-dl" id="footer-dl">
  374.                 <dt>选购指南</dt>
  375.                 <dd><a href="">手机</a></dd>
  376.                 <dd><a href="">电视</a></dd>
  377.                 <dd><a href="">笔记本</a></dd>
  378.                 <dd><a href="">平板</a></dd>
  379.                 <dd><a href="">穿戴</a></dd>
  380.                 <dd><a href="">耳机</a></dd>
  381.                 <dd><a href="">家电</a></dd>
  382.                 <dd><a href="">路由器</a></dd>
  383.                 <dd><a href="">音箱</a></dd>
  384.                 <dd><a href="">配件</a></dd>
  385.  
  386.             </dl>
  387.             <dl class="footer-dl">
  388.                 <dt>服务中心</dt>
  389.                 <dd><a href="">申请售后</a></dd>
  390.                 <dd><a href="">售后服务</a></dd>
  391.                 <dd><a href="">维修服务价格</a></dd>
  392.                 <dd><a href="">订单查询</a></dd>
  393.                 <dd><a href="">以旧换新</a></dd>
  394.                 <dd><a href="">保障服务</a></dd>
  395.                 <dd><a href="">防伪查询</a></dd>
  396.                 <dd><a href="">F码通道</a></dd>
  397.  
  398.             </dl>
  399.             <dl class="footer-dl">
  400.                 <dt>线下门店</dt>
  401.                 <dd><a href="">小米之家</a></dd>
  402.                 <dd><a href="">服务网点</a></dd>
  403.                 <dd><a href="">授权体验</a></dd>
  404.  
  405.             </dl>
  406.             <dl class="footer-dl">
  407.                 <dt>关于小米</dt>
  408.                 <dd><a href="">了解小米</a></dd>
  409.                 <dd><a href="">加入小米</a></dd>
  410.                 <dd><a href="">投资者关系</a></dd>
  411.                 <dd><a href="">环境，社会管制</a></dd>
  412.                 <dd><a href="">廉洁举报</a></dd>
  413.  
  414.             </dl>
  415.             <dl class="footer-dl">
  416.                 <dt>关注我们</dt>
  417.                 <dd><a href="">新浪微博</a></dd>
  418.                 <dd><a href="">官方微信</a></dd>
  419.                 <dd><a href="">联系我们</a></dd>
  420.                 <dd><a href="">公益基金会</a></dd>
  421.  
  422.             </dl>
  423.             <div class="phone-number">
  424.                 <i>400-100-5678</i>
  425.                 <p>8:00-18:00&nbsp;（仅收市话费）</p>
  426.                 <a href=""><em></em>&nbsp;人工客服</a>
  427.             </div>
  428.         </div>
  429.     </div>
  430.     <!-- 底部区 -->
  431.     <div class="w2 mmm">
  432.         <div class="m6 w1">
  433.             <div class="bottom-logo"></div>
  434.             <div class="bottom-font">
  435.                 <p><a href="" class="bottom-change">小米商城</a>|<a href="" class="bottom-change"> MIUI </a>|<a href=""
  436.                         class="bottom-change">米家</a>|<a href="" class="bottom-change">米聊</a>|<a href=""
  437.                         class="bottom-change">多看</a>|<a href="" class="bottom-change">游戏</a>|<a href=""
  438.                         class="bottom-change">政企服务</a>|<a href="" class="bottom-change">小米天猫店</a>|<a href=""
  439.                         class="bottom-change">小米集团隐私政策</a>|<a href="" class="bottom-change">小米公司儿童信息保护规则</a>|<a href=""
  440.                         class="bottom-change">小米商城隐私政策</a>|<a href="" class="bottom-change">小米商城用户协议</a>|<a href=""
  441.                         class="bottom-change">问题反馈</a>|<a href="" class="bottom-change">Select Location</a></p>
  442.                 <p><a href="" class="bottom-change">北京互联网法院法律服务工作站</a>|<a href="" class="bottom-change">中国消费者协会</a>|<a
  443.                         href="" class="bottom-change">北京市消费者协会</a></p>
  444.                 <p>©&nbsp;mi.com京ICP证110507号&nbsp;京ICP备10046444号&nbsp;公网安备11010802020134号&nbsp;京网文[2020]0276-042号<br>
  445.                     (京)&nbsp;网械平台备字&nbsp;(2018)&nbsp;第00005号&nbsp;互联网药品信息服务资格证&nbsp;(京)-非经营性-2014-0090&nbsp;营业执照&nbsp;医疗器械质量公告<br>
  446.                     增值电信业务许可证&nbsp;网络食品经营备案&nbsp;京食药网食备202010048&nbsp;食品经营许可证<br>
  447.                     违法和不良信息举报电话: 171-5104-4404 知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
  448.                 </p>
  449.             </div>
  450.             <div class="bottom-img">
  451.                 <img src="/images/底部1.png" alt="">
  452.                 <img src="/images/底部2.png" alt="">
  453.                 <img src="/images/底部3.png" alt="">
  454.                 <img src="/images/底部4.png" alt="">
  455.                 <img src="/images/底部5.png" alt="">
  456.             </div>
  457.             <div class="last"></div>
  458.         </div>
  459.     </div>
  460.     <!-- 功能区 -->
  461.     <div class="set">
  462.         <div class="set1">
  463.             <a href=""></a>
  464.             <div id="set-">
  465.                 <img src="/images/底部6.png" alt="" class="set-1">
  466.                 <span class="set-2">扫码领取新人百元礼包</span>
  467.                 <div class="right-triango"></div>
  468.             </div>
  469.         </div>
  470.         <div class="set1">
  471.             <a href=""></a>
  472.             <div id="set-change">
  473.                 <span class="set-2 set-2max">个人中心</span>
  474.                 <div class="right-triango"></div>
  475.             </div>
  476.         </div>
  477.         <div class="set1">
  478.             <a href=""></a>
  479.             <div id="set-change">
  480.                 <span class="set-2 set-2max">售后服务</span>
  481.                 <div class="right-triango"></div>
  482.             </div>
  483.         </div>
  484.         <div class="set1">
  485.             <a href=""></a>
  486.             <div id="set-change">
  487.                 <span class="set-2 set-2max">人工客服</span>
  488.                 <div class="right-triango"></div>
  489.             </div>
  490.         </div>
  491.         <div class="set1">
  492.             <a href=""></a>
  493.             <div id="set-change">
  494.                 <span class="set-2 set-2max">购物车</span>
  495.                 <div class="right-triango"></div>
  496.             </div>
  497.         </div>
  498.         <div class="set2">
  499.             <a href=""></a>
  500.             <div id="set-change">
  501.                 <span class="set-2 set-2max">回到顶部</span>
  502.                 <div class="right-triango"></div>
  503.             </div>
  504.         </div>
  505.     </div>
  506. </body>
  507.  
  508. </html>

 /css/index.css

  1. * {
  2.   margin: 0;
  3.   padding: 0
  4. }
  5. .clearfix:before,.clearfix:after{
  6.   content: "";
  7.   display: table;
  8. }
  9. .clearfix:after{
  10.   clear:both;
  11. }
  12. .clearfix{
  13.   *zoom:1;
  14. }
  15. @font-face {
  16.   font-family: 'icomoon';
  17.   src:  url('fonts/icomoon.eot?7yi5yk');
  18.   src:  url('fonts/icomoon.eot?7yi5yk#iefix') format('embedded-opentype'),
  19.   url('fonts/icomoon.ttf?7yi5yk') format('truetype'),
  20.   url('fonts/icomoon.woff?7yi5yk') format('woff'),
  21.   url('fonts/icomoon.svg?7yi5yk#icomoon') format('svg');
  22.   font-weight: normal;
  23.   font-style: normal;
  24.   font-display: block;
  25. }
  26. button {
  27.   cursor: pointer;
  28. }
  29. button,
  30. input {
  31.   font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  32.   border: 0;
  33.   outline: none;
  34. }
  35. ul li {
  36.   list-style: none;
  37. }
  38. a{
  39.   text-decoration: none;
  40. }
  41. .w1 {
  42.   width: 1226px;
  43.   height: 100%;
  44.   margin: 0 auto;
  45. }
  46.  
  47. .w2 {
  48.   width: 100%;
  49.   
  50. }
  51.  
  52. .advertisement {
  53.   height: 96px;
  54.   background-image: url(/images/顶部广告.png);
  55.   background-position: 50%;
  56.   background-repeat: no-repeat;
  57. }
  58. /* 导航栏 */
  59. .nav {
  60.   height: 40px;
  61.   background-color: rgb(51, 51, 51);
  62.  
  63. }
  64.  
  65. .header {
  66.   height: 100%;
  67.   margin: 0 auto;
  68. }
  69.  
  70. .nav-left li {
  71.   float: left;
  72.   line-height: 40px;
  73. }
  74. .nav-left .app{
  75.   position: relative;
  76. }
  77. .sub-app img{
  78.   margin-top: 5px;
  79.   width: 90px;
  80.   height: 90px;
  81. }
  82. .sub-app{
  83.   position: absolute;
  84.   top: 40px;
  85.   left: 41%;
  86.   width: 124px;
  87.   height: 0;
  88.   background: #fff;
  89.   margin-left: -55px;
  90.   box-shadow: 0 1px 5px #aaa;
  91.   text-align: center;
  92.   font-size: 14px;
  93.   color: #333;
  94.   line-height: 1;
  95.   overflow: hidden;
  96.   transition: height .3s;
  97.   z-index: 99;
  98. }
  99. .nav-left a,
  100. .nav-right a {
  101.   font-size: 12px;
  102.   color: #b0b0b0;
  103.   text-decoration: none;
  104.   transition: color .2s linear 0s;
  105. }
  106. .nav-left a:hover,
  107. .nav-right a:hover{
  108.   color: #fff;
  109. }
  110. .app:hover>.sub-app{
  111.   height: 120px;
  112. }
  113. .app:hover>.top-triango{
  114.   visibility: visible;
  115. }
  116. .app:hover>a{
  117.   color: #ffffff;
  118. }
  119. .nav-left span,
  120. .nav-right span {
  121.   font-style: 10px;
  122.   color: #424242;
  123.   margin: 0 7px;
  124. }
  125.  
  126. .nav-right li {
  127.   float: right;
  128.   line-height: 40px;
  129. }
  130. .car{
  131.   position: relative;
  132.   width: 120px;
  133.   height: 40px;
  134.   background-color: #424242;
  135.   /* 字体水平居中 */
  136.   text-align: center;
  137.   margin-left: 20px;
  138.   transition: all .2s linear 0s;
  139. }
  140. .car a{
  141.   display: inline-block;
  142.   font-family: 'icomoon';
  143.   width: 100%;
  144.   height: 100%;
  145.   transition: all .2s linear 0s;
  146. }
  147. .car i{
  148.   font-style: normal;
  149.   font-size: 15px;
  150. }
  151. .empty{
  152.   position: absolute;
  153.   right: 0;
  154.   top: 40px;
  155.   z-index: 31;
  156.   width: 316px;
  157.   height: 0;
  158.   color: #424242;
  159.   font-size: 12px;
  160.   line-height: 100px;
  161.   background: #fff;
  162.   box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
  163.   overflow: hidden;
  164.   transition: height .3s;
  165. }
  166. .car:hover{
  167.   background-color: #fff;
  168. }
  169. .car:hover>a{
  170.   color: #ff6700;
  171. }
  172. .car:hover>.empty{
  173.   height: 100px;
  174. }
  175. /* 副导航栏 */
  176. .big-sub{
  177.   width: 100%;
  178.   height: 100px;
  179. }
  180. .sub-main{
  181.   position: relative;
  182.   width: 1226px;
  183.   height: 100%;
  184.   /* border: 1px solid red; */
  185.   margin: 0 auto;
  186. }
  187. .sub-left{
  188.   float: left;
  189.   height: 100px;
  190.   width: 850px;
  191.   border: 1px solid transparent;
  192.   
  193. }
  194. .sub-left li{
  195.   float: left;
  196.   position: relative;
  197.   line-height: 100px;
  198.   margin-left: 23px;
  199. }
  200. .sub-left li img{
  201.   height: 60px;
  202.   width: 60px;
  203.   margin-left: -10px;
  204.   margin-right: 100px;
  205.   margin-top: 20px;
  206. }
  207. .sub-left li a{
  208.   font-size: 16px;
  209.   color: #333333;
  210.   text-decoration: none;
  211.   transition: all .2s linear 0s;
  212. }
  213. .left-change{
  214.   position: absolute;
  215.   top: 97px;
  216.   left: -1267%;
  217.   width: 2560px;
  218.   height: 0;
  219.   background: #fff;
  220.   margin-left: -55px;
  221.   box-shadow: 0 1px 5px #aaa;
  222.   text-align: center;
  223.   font-size: 16px;
  224.   color: #333;
  225.   /* line-height: 1; */
  226.   overflow: hidden;
  227.   transition: height .3s;
  228.   z-index: 99;
  229. }
  230. .left-change ul{
  231.   width: 1226px;
  232.   height: 100%;
  233.   background-color: #fff;
  234.   margin-left: 669px;
  235. }
  236. .left-change li{
  237.   float: left;
  238.   width: 160px;
  239.   height: 238px;
  240.   margin-left: 42px;
  241. }
  242. .left-change li::before{
  243.   position: absolute;
  244.   top: 26px;
  245.   right: 164px;
  246.   width: 1px;
  247.   height: 100px;
  248.   content: "";
  249.   background: rgb(225, 225, 225);
  250.   margin: 0 26px;
  251. }
  252. .left-change1::before{
  253.   visibility: hidden;
  254. }
  255. .left-change p{
  256.   height: 21px;
  257. }
  258. .left-change i{
  259.   font-style: normal;
  260.   font-size: 12px;
  261.   color: #ff6700;
  262. }
  263. .left-change1{
  264.   margin-left: 50px;
  265. }
  266. .left-change ul li img{
  267.   display: block;
  268.   width: 160px;
  269.   height: 110px;
  270. }
  271. .sub-left li:hover>a{
  272.   color: #ff6700;
  273. }
  274. .sub-left li:hover>.left-change{
  275.   height: 238px;
  276. }
  277. .sub-right{
  278.   position: absolute;
  279.   width: 374px;
  280.   height: 100px;
  281.   line-height: 100px;
  282.   right: -6%;
  283.   /* text-align: right; */
  284. }
  285. .search{
  286.   display: inline-block;
  287.   width: 245px;
  288.   height: 50px;
  289.   margin-right: -4px;
  290.   border: 1px solid #e0e0e0;
  291.   border-right: none;
  292.   color: rgb(117, 117, 117);
  293.   /* vertical-align:top； */
  294. }
  295. button{
  296.   position: absolute;
  297.   display: inline-block;
  298.   width: 52px;
  299.   height: 52px;
  300.   margin-right: 50px;
  301.   top: 25px;
  302.   right: 26px;
  303.   border: 1px solid #e0e0e0;
  304.   background-color: #ffffff;
  305.   font-family: 'icomoon';
  306.   transition: all .2s linear 0s;
  307.   /* vertical-align:top； */
  308.   
  309. }
  310. button:hover{
  311.   color: white;
  312.   background-color: #ff6700;
  313. }
  314. /* 轮播图 */
  315. .m1{
  316.   height: 460px;
  317. }
  318. .lbt{
  319.   position: relative;
  320.   width: 100%;
  321.   height: 100%;
  322.   background-image: url(/images/轮播图1.webp);
  323.   background-size: 1226px 460px;
  324.   background-repeat: no-repeat;
  325.   animation:10s movie infinite;
  326. }
  327. @keyframes movie {
  328.   0%{background-image: url(/images/轮播图1.webp)}
  329.   25%{background-image: url(/images/轮播图2.jpg)}
  330.   50%{background-image: url(/images/轮播图1.webp)}
  331.   75%{background-image: url(/images/轮播图2.jpg)}
  332.   100%{background-image: url(/images/轮播图1.webp)}
  333. }
  334. .button-right{
  335.   position: absolute;
  336.   right: 1px;
  337.   top: 50%;
  338.   width: 41px;
  339.   height: 69px;
  340.   margin-top: -35px;
  341.   z-index: 10;
  342.   /* outline: none; */
  343. }
  344. .button-right i{
  345.   position: absolute;
  346.   display: block;
  347.   font-style: normal;
  348.   left: -14px;
  349. }
  350. .button-left{
  351.   position: absolute;
  352.   left: 234px;
  353.   top: 50%;
  354.   width: 41px;
  355.   height: 69px;
  356.   margin-top: -35px;
  357.   z-index: 10;
  358. }
  359. .button-right,
  360. .button-left{
  361.   font-family: 'icomoon';
  362.   font-size: 55px;
  363.   color: rgb(216, 216, 217);
  364.   background-color: transparent;
  365.   line-height: 69px;
  366.   cursor: pointer;
  367.   text-align: center;
  368. }
  369. .button-right:hover,
  370. .button-left:hover{
  371.   color: #fff;
  372.   background-color: rgb(124,124,126);
  373. }
  374. .hdm{
  375.   position: absolute;
  376.   width: 234px;
  377.   height: 100%;
  378.   background: rgba(105, 101, 101, .6);
  379. }
  380. .hdm ul{
  381.   margin-top: 20px;
  382. }
  383. .hdm li{
  384.   width: 100%;
  385.   height: 42px;
  386.   line-height: 42px;
  387. }
  388. .hdm .hdm-left{
  389.   background: rgba(105, 101, 101, 0);
  390. }
  391. .hdm li a{
  392.   color: #ffffff;
  393.   font-size: 14px;
  394.   text-decoration: none;
  395.   margin-left: 21px;
  396. }
  397. .hdm i{
  398.   float: right;
  399.   font-style: normal;
  400.   font-weight: 900;
  401.   color: #e0e0e0;
  402.   margin-right: 20px;
  403. }
  404. .hdm-list{
  405.   position: absolute;
  406.   top: 0px;
  407.   left: 289px;
  408.   width: 0px;/* 992px */
  409.   height: 460px;
  410.   background: #fff;
  411.   margin-left: -55px;
  412.   box-shadow: 0 1px 4px #aaa;
  413.   text-align: center;
  414.   /* font-size: 16px;
  415.   color: #333;
  416.   line-height: 1; */
  417.   overflow: hidden;
  418.   transition: height .3s;
  419.   z-index: 20;
  420. }
  421. .hdm-list ul{
  422.   float: left;
  423.   margin-top: 0;
  424. }
  425. .hdm-list li{
  426.   width: 247px;
  427.   height: 76px;
  428.   line-height: 76px;
  429.   background-color: #fff;
  430. }
  431. .color-change{
  432.   font-size: 12px;
  433.   color: #000;
  434.   font-weight: normal;
  435.   white-space: nowrap;
  436.   overflow: hidden;
  437.   text-overflow: ellipsis;
  438.   transition: all .2s;
  439. }
  440. .hdm-list img{
  441.   float: left;
  442.   width: 40px;
  443.   height: 40px;
  444.   margin: 17px 14px 0 54px;
  445. }
  446. .hdm li:hover>.hdm-left{
  447.   background-color: rgb(255,103,0);
  448. }
  449. .hdm li:hover>.hdm-list{
  450.   width: 992px;
  451. }
  452. .hdm-list li:hover>.color-change{
  453.   color: #ff6700;
  454. }
  455. /* 促销商品区 */
  456. .m2{
  457.   height: 170px;
  458.   margin-top: 20px;
  459.   margin-bottom: 25px;
  460. }
  461. .sp-div{
  462.   float: left;
  463.   width: 316px;
  464.   height: 170px;
  465.   background-color: red;
  466.   margin-left: 14px;
  467.   
  468. }
  469. .sp-div img{
  470.   width: 100%;
  471. }
  472. .sp-first{
  473.   width: 234px;
  474.   background-color: #5F5750;
  475.   margin-left: 0;
  476. }
  477. .sp-last{
  478.   transition: box-shadow .3s linear 0s;
  479.  
  480. }
  481. .sp-last:hover{
  482.   box-shadow: -5px 7px 23px 4px rgb(0,0,0,30%);
  483. }
  484. .sp-first li{
  485.   float: left;
  486.   position: relative;
  487.   width: 70px;
  488.   height: 82px;
  489.   margin: 0 3px;
  490.   /* background-color: red; */
  491. }
  492. .sp-first li a{
  493.   display: block;
  494.   padding-top: 18px;
  495.   text-overflow: ellipsis;
  496.   color: #fff;
  497.   opacity: .7;
  498.   font-size: 10px;
  499.   text-align: center;
  500.   transition: opacity 0.5s linear 0s;
  501.   }
  502. .sp-first li a:hover{
  503.   opacity: 1;
  504. }
  505. .sp-first li img{
  506.   display: block;
  507.   width: 24px;
  508.   height: 24px;
  509.   margin: 0 auto 4px;
  510. }
  511. .sp-first li::before{
  512.   top: 0px;
  513.   left: 6px;
  514.   width: 64px;
  515.   height: 1px;
  516. }
  517. .sp-first li::after{
  518.   top: 6px;
  519.   /* left: 0; */
  520.   width: 1px;
  521.   height: 70px;
  522. }
  523. .sp-first li::after,
  524. .sp-first li::before{
  525.   position: absolute;
  526.   content: "";
  527.   background: #665e57;
  528. }
  529. /* 商品区 */
  530. .m{
  531.   width: 100%;
  532.   height: 2380px;
  533.   background: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
  534.   overflow: hidden;
  535. }
  536. .m3{
  537.   height: 120px;
  538.   margin-top: 30px;
  539.   margin-bottom: 20px;
  540. }
  541. .m3 img{
  542.   height: 100%;
  543. }
  544. .phone h2{
  545.   font-size: 22px;
  546.   font-weight: 200;
  547.   color: #333;
  548.   margin: 15px 0;
  549. }
  550. .phone-left{
  551.   float: left;
  552.   width: 234px;
  553.   height: 614px;
  554. }
  555. .phone-left img{
  556.   height: 100%;
  557.   width: 100%;
  558.   transition: all .2s linear 0s;
  559. }
  560. .phone-right{
  561.   float: right;
  562.   /* width: 992px; */
  563.   height: 614px; 
  564.   text-align: center;
  565. }
  566. .right1{
  567.   width: 992px;
  568. }
  569. .right2{
  570.   width: 1226px;
  571. }
  572. .phone-right div{
  573.   float: left;
  574.   width: 234px;
  575.   height: 300px;
  576.   background-color: #FFFFFF;
  577.   margin-left: 14px;
  578.   margin-bottom: 14px;
  579.   transition: all .3s linear 0s;
  580. }
  581. .phone-right div:hover,
  582. .phone-left img:hover{
  583.   transform: translateY(-4px);
  584.   box-shadow: -5px 7px 23px 4px rgb(0,0,0,30%);
  585. }
  586. .phone-right img{
  587.   width: 160px;
  588.   height: 160px;
  589.   margin-top: 35px;
  590. }
  591. .phone-right h3{
  592.   margin: 0 10px 2px;
  593.   text-overflow: ellipsis;
  594.   white-space: nowrap;
  595.   overflow: hidden;
  596.   font-size: 14px;
  597.   font-weight: 400;
  598.   color: #333;
  599. }
  600. .phone-right p{
  601.   margin: 0 10px 10px;
  602.   height: 18px;
  603.   font-size: 12px;
  604.   color: #b0b0b0;
  605.   text-overflow: ellipsis;
  606.   white-space: nowrap;
  607.   overflow: hidden;
  608. }
  609. .phone-right i{
  610.   font-style: normal;
  611.   font-size: 14px;
  612.   color: #ff6700;
  613.   /* margin: 10px 0px 10px 14px; */
  614. }
  615. .phone{
  616.   height: 614px;
  617.   margin-bottom: 60px;
  618. }
  619. .phone-right .left-move{
  620.   margin-left: 0px;
  621. }
  622. .phone-right .left-move img{
  623.   width: 100%;
  624.   height: 100%;
  625.   margin-top: 0;
  626. }
  627. .phone-right del{
  628.   color: #b0b0b0;
  629.   font-size: 14px;
  630.  
  631. }
  632. .phone-right .small-box{
  633.   position: relative;
  634.   z-index: 1;
  635.   float: left;
  636.   width: 234px;
  637.   height: 143px;
  638.   margin-left: 14px;
  639.   margin-bottom: 14px;
  640.   background: #fff;
  641. } 
  642. .small-box i{
  643.   display: block;
  644.   margin: 0 125px 0 0;
  645. }
  646. .small-box h3{
  647.   display: block;
  648.   margin: -10px 110px 5px 30px;
  649.   font-size: 14px;
  650.   font-weight: 400;
  651. }
  652. .small-box img{
  653.   /* display: inline-block; */
  654.   float: right;
  655.   position: absolute;
  656.   width: 80px;
  657.   height: 80px;
  658. }
  659. .small-box a{
  660.   display: inline-block;
  661.   margin: 61px -16px 0px -20px;
  662. }
  663. .small-box p{
  664.   display: block;
  665.   margin: 0 88px 0 0;
  666. }
  667. .small-box h2{
  668.   font-family: 'icomoon';
  669.   float: right;
  670.   position: absolute;
  671.   font-size: 48px;
  672.   color: #ff6700;
  673.   margin: 46px 0px 0px 151px;
  674. }
  675. .kong{
  676.   height: 1px;
  677. }
  678. /* 踝部区 */
  679. .mm{
  680.   height: 472px;
  681. }
  682. .m4{
  683.   height: 80px;
  684.   border-bottom: 1px solid #e0e0e0;
  685. }
  686. .mm ul{
  687.   padding: 27px 0;
  688. }
  689. .mm ul li a{
  690.   float: left;
  691.     width: 19.7%;
  692.     height: 25px;
  693.     border-left: 1px solid #e0e0e0;
  694.     font-size: 16px;
  695.     line-height: 25px;
  696.     text-align: center;
  697.     color: #979797;
  698.     font-weight: 400;
  699.     transition: all .25s ;
  700. }
  701. .mm ul li a:hover{
  702.   color: #ff6700;
  703. }
  704. .mm ul li i{
  705.   font-family: 'icomoon';
  706.   font-style: normal;
  707.   font-size: 24px;
  708. }
  709. #border-out{
  710.   border-left: 0px;
  711. }
  712. .m5{
  713.   height: 312.5px;
  714.   padding: 40px 0;
  715. }
  716. .footer-dl{
  717.   float: left;
  718.   width: 160px;
  719. }
  720. #footer-dl{
  721.   margin-left: 160px;
  722. }
  723. .footer-dl dt{
  724.   margin: -1px 0 26px;
  725.   font-size: 14px;
  726.   line-height: 1.25;
  727.   color: #424242;
  728. }
  729. .footer-dl dd a{
  730.   color: #757575;
  731.   font-size: 12px;
  732.   transition: all .3s;
  733. }
  734. .footer-dl dd a:hover{
  735.   color: #ff6700;
  736. }
  737. .phone-number{
  738.   float: right;
  739.   width: 251px;
  740.   border-left: 1px solid #e0e0e0;
  741.   text-align: center;
  742.   color: #616161;
  743. }
  744. .phone-number i{
  745.   font-style: normal;
  746.   font-size: 22px;
  747.   line-height: 1;
  748.   color: #ff6700;
  749.   margin: 0 0 5px 0;
  750. }
  751. .phone-number p{
  752.   margin: 0 0 5px 0;
  753.   font-size: 12px;
  754.   color: #616161;
  755. }
  756. .phone-number a{
  757.   display: inline-block;
  758.   font-family: 'icomoon';
  759.   width: 118px;
  760.   height: 28px;
  761.   font-size: 12px;
  762.   line-height: 28px;
  763.   background: #fff;
  764.   color: #ff6700;
  765.   border: 1px solid #ff6700;
  766.   transition: all .4s;
  767. }
  768. .phone-number a em{
  769.   font-style: normal;
  770.   font-size: 13px;
  771. }
  772. .phone-number a:hover{
  773.   color: #fff;
  774.   background-color: #ff6700;
  775. }
  776. /* 底部区 */
  777. .mmm{
  778.   height: 210px;/* 204px */
  779.   padding: 30px 0;
  780.   font-size: 12px;
  781.   background: #fafafa;
  782. }
  783. .m6{
  784.   position: relative;
  785.   height: 157px;
  786.   color: #b0b0b0;
  787.   padding-left: 77px;
  788.   font-size: 12px;
  789. }
  790. .bottom-logo{
  791.   width: 56px;
  792.   height: 56px;
  793.   margin-right: 20px;
  794.   background: url(/images/logo.png) no-repeat;
  795.   background-size: 56px;
  796.   position: absolute;
  797.   top: 0;
  798.   left: 0;
  799. }
  800. .bottom-font{
  801.   color: #b0b0b0;
  802.   padding-left: 4px;
  803.   font-size: 12px;
  804. }
  805. .bottom-img{
  806.   height: 28px;
  807.   margin: 4px 0 15px;
  808.   padding-left: 5px;
  809. }
  810. .bottom-img img{
  811.   width: auto;
  812.   height: 28px;
  813.   margin-left: 0;
  814. }
  815. .bottom-change{
  816.   color: #757575;
  817.   transition: all .2s;
  818. }
  819. .bottom-change:hover{
  820.   color: #ff6700;
  821. }
  822. /* 功能区 */
  823. .set{
  824.   position: fixed;
  825.   right: 0;
  826.   bottom: 40px;
  827.   text-align: center;
  828.   z-index: 99;
  829. }
  830. .set1,
  831. .set2{
  832.   position: relative;
  833.   margin-top: -1px;
  834.   background-color: #fff;
  835.   border: 1px solid #f5f5f5;
  836.   width: 25px;
  837.   height: 40px;
  838.   /* text-align: center; */
  839.   font-family: 'icomoon';
  840. }
  841. .set2{
  842.   margin-top: 14px;
  843. }
  844. .set1 a,
  845. .set2 a{
  846.   position: absolute;
  847.     bottom: -2px;
  848.     left: -2px;
  849.     width: 30px;
  850.     height: 30px;
  851.     color: #757575;
  852.     transition: opacity .3s;
  853. }
  854. .set1 :hover,
  855. .set2 :hover{
  856.   color: #ff6700;
  857. }
  858. .set-1{
  859.   display: block;
  860.   width: 100px;
  861.   height: 100px;
  862.   margin: 6px auto;
  863.   /* visibility: hidden; */
  864. }
  865. .set-2{
  866.   display: block;
  867.   width: 82px;
  868.   margin: 14px auto 0;
  869.   color: #757575;
  870.   text-align: center;
  871. }
  872. .set-2max{
  873.   width: 56px;
  874.   font-size: 14px;
  875.   margin-top: 0;
  876. }
  877. #set-{
  878.   position: absolute;
  879.   left: -138px;
  880.   top: 0;
  881.   padding: 14px;
  882.   background: #fff;
  883.   border: 1px solid #f5f5f5;
  884.   transition: opacity .3s;
  885.   /* transform: translateZ(0); */
  886.   /* opacity: 0; */
  887.   visibility: hidden;
  888.   z-index: 99;
  889. }
  890. #set-change{
  891.   position: absolute;
  892.   left: -84px;
  893.   top: 0;
  894.   padding: 9px;
  895.   background: #fff;
  896.   border: 1px solid #f5f5f5;
  897.   transition: opacity .3s;
  898.   /* transform: translateZ(0); */
  899.   /* opacity: 0; */
  900.   visibility: hidden;
  901.   z-index: 99;
  902. }
  903. .right-triango{
  904.   position: absolute;
  905.   height: 0;
  906.   width: 0;
  907.   border: 8px solid #fff;
  908.   border-right: 0;
  909.   border-top-color: transparent;
  910.   border-bottom-color: transparent;
  911.   top: 11px;
  912.   right: -6px;
  913.   z-index: 100;
  914.   visibility: hidden;
  915. }
  916. .top-triango{
  917.   z-index: 100;
  918.   position: absolute;
  919.   height: 0;
  920.   width: 0;
  921.   border: 8px solid white;
  922.   border-top: 0;
  923.   border-left-color: transparent;
  924.   border-right-color: transparent;
  925.   top: 32px;
  926.   right: 12px;
  927.   visibility: hidden;
  928. }
  929. .set1:hover>#set-,
  930. .set1:hover>#set-change,
  931. .set2:hover>#set-change{
  932.   visibility: visible;
  933. }
  934. .last{
  935.   clear: both;
  936.   margin: 30px auto 0;
  937.   width: 100%;
  938.   height: 19px;
  939.   background: url(/images/last.png) no-repeat center 0;
  940. }

 因为博主是新人，所以代码可能不太规范，望大佬们海涵。新手同志们最好是先自己敲一遍，熟练一下套路。有文件需求的同学，点赞关注后私信给我哟 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/355442
推荐阅读
相关标签

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

  

闽ICP备14008679号