devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

仿作小米商城页面_网页仿作

作者：2023面试高手 | 2024-04-07 20:50:46

赞

踩

网页仿作

历时一周半的时间，终于在我的不懈努力下，完成了小米商城页面的静态仿作。真的，这个过程我觉得极其漫长，到最后也不敢相信自己能够完成。因为自己距上一次html和css的学习已经有好久了。好多好多的知识都已经忘记了，以至于自己在仿作的过程中遇到了许多的困难，而自己却怎么也想不起来怎么去解决，总是觉得自己做的都对，按理论来说不应该出现这些问题的呀！有时候一个问题会卡老旧老旧了。弄得我一点做下去的心情都没有了。开始，无奈的我还是要想办法解决摆在我面前的每一个问题。无论他是难是简，是我还没学到的知识还是已经学会的知识。于是，我开始一点一点的尝试，而那些被遗忘的记忆也一点一点的被我给唤起，在尝试成功时，那种如释重负的感觉真让人觉得轻松，可是，当我继续往下做下一个模块时，又总是会遇到好多的问题。并且，面对如此庞大的页面，我要去完成的内容有好多好多，总是让我觉得前路漫漫，没有信心和耐心走下去，但是，不积跬步，无以至千里。我就是那么一小步一小步的走下去，一点一点的去完成，从框架到样式，现将大体的页面布局给做好后，一点一点的完成样式，最后将内容给填装进去……

虽然这是我奋尽全力完成的，但是我知道，我还有好多不足，在页面的仿作上也有好多问题，所以，欢迎各位大佬，大神批评指正，我一定会及时改正。

上图

 上代码

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="xiaomi.css">
  10. </head>
  11.  
  12. <body>
  13.     <!-- 顶部导航 -->
  14.     <div class="nav">
  15.         <div class="container w">
  16.             <div class="left">
  17.                 <a href="">小米官网</a>
  18.                 <a href="">小米商城</a>
  19.                 <a href="">MlUl</a>
  20.                 <a href="">loT</a>
  21.                 <a href="">云服务</a>
  22.                 <a href="">天星科技</a>
  23.                 <a href="">有品</a>
  24.                 <a href="">小爱开放平台</a>
  25.                 <a href="">企业团购</a>
  26.                 <a href="">资质证照</a>
  27.                 <a href="">协议规则</a>
  28.                 <a href="">下载app</a>
  29.                 <a href="">SelectLocation</a>
  30.             </div>
  31.             <div class="right">
  32.                 <a href="">购物车(0)</a>
  33.             </div>
  34.             <div class="middle">
  35.                 <a href="">登录</a>
  36.                 <a href="">注册</a>
  37.                 <a href="">消息通知</a>
  38.             </div>
  39.         </div>
  40.     </div>
  41.  
  42.     <div class="header w">
  43.         <!-- 头部盒子 -->
  44.         <!-- Logo部分 -->
  45.         <div class="logo">
  46.             <img src="image/logo.png" alt="">
  47.         </div>
  48.         <!-- 导航栏部分 -->
  49.         <div class="navv">
  50.             <ul>
  51.                 <li><a href="#">Xiaomi手机</a></li>
  52.                 <li><a href="#">Redmi手机</a></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.                 <li><a href="#">路由器</a></li>
  58.                 <li><a href="#">服务中心</a></li>
  59.                 <li><a href="#">社区</a></li>
  60.             </ul>
  61.         </div>
  62.         <!-- 搜素模块 -->
  63.         <div class="search">
  64.             <button></button>
  65.             <input type="text" value="输入关键词">
  66.         </div>
  67.     </div>
  68.  
  69.     <!-- banner部分start -->
  70.     <div class="banner">
  71.         <!-- 版心 -->
  72.         <div class="w">
  73.             <div class="cebianlan">
  74.                 <ul>
  75.                     <li><a href="#">手机 <span>&gt;</span></a></li>
  76.                     <li><a href="#">电视 <span>&gt;</span></a></li>
  77.                     <li><a href="#">笔记本 平板 <span>&gt;</span></a></li>
  78.                     <li><a href="#">出行 穿戴 <span>&gt;</span></a></li>
  79.                     <li><a href="#">耳机 音响 <span>&gt;</span></a></li>
  80.                     <li><a href="#">家电 <span>&gt;</span></a></li>
  81.                     <li><a href="#">智能 路由器 <span>&gt;</span></a></li>
  82.                     <li><a href="#">电源 配件 <span>&gt;</span></a></li>
  83.                     <li><a href="#">健康 儿童 <span>&gt;</span></a></li>
  84.                     <li><a href="#">生活 箱包 <span>&gt;</span></a></li>
  85.                 </ul>
  86.  
  87.             </div>
  88.             <div class="tu">
  89.                 <img src="image/jiaodian.jpg" alt="">
  90.                 <!-- 左侧按钮箭头 -->
  91.                 <a href="#" class="prev">&lt;</a>
  92.                 <!-- 右侧按钮箭头 -->
  93.                 <a href="#" class="next">&gt;</a>
  94.                 <!-- 小圆点 -->
  95.                 <ul class="promo-nav">
  96.                     <li class="selected"></li>
  97.                     <li></li>
  98.                     <li></li>
  99.                     <li></li>
  100.                     <li></li>
  101.                 </ul>
  102.             </div>
  103.         </div>
  104.     </div>
  105.  
  106.     <div class="sub_row w">
  107.         <div class="span1">
  108.             <ul>
  109.                 <li>
  110.                     <a href="#"><img src="image/li1.png" alt="服务保障">服务保障</a>
  111.                 </li>
  112.                 <li>
  113.                     <a href="#"><img src="image/li2.png" alt="服务保障">服务保障</a>
  114.                 </li>
  115.                 <li>
  116.                     <a href="#"><img src="image/li3.png" alt="服务保障">服务保障</a>
  117.                 </li>
  118.                 <li>
  119.                     <a href="#"><img src="image/li4.png" alt="服务保障">服务保障</a>
  120.                 </li>
  121.                 <li>
  122.                     <a href="#"><img src="image/li5.png" alt="服务保障">服务保障</a>
  123.                 </li>
  124.                 <li>
  125.                     <a href="#"><img src="image/li6.png" alt="服务保障">服务保障</a>
  126.                 </li>
  127.             </ul>
  128.         </div>
  129.         <div class="span2">
  130.             <ul>
  131.                 <li>
  132.                     <a href="#"><img src="image/li7.jpg" alt=""></a>
  133.                 </li>
  134.                 <li>
  135.                     <a href="#"><img src="image/li8.jpg" alt=""></a>
  136.                 </li>
  137.                 <li>
  138.                     <a href="#"><img src="image/li9.jpg" alt=""></a>
  139.                 </li>
  140.             </ul>
  141.         </div>
  142.     </div>
  143.  
  144.     <!-- main部分 -->
  145.     <div class="main">
  146.         <div class="w">
  147.             <div class="banner-box">
  148.                 <a href="#">
  149.                     <img src="image/banner-box.webp" alt="">
  150.                 </a>
  151.             </div>
  152.  
  153.             <!-- 1 -->
  154.             <div class="home">
  155.                 <div class="box-hd">
  156.                     <h2 class="title">手机</h2>
  157.                     <div class="more">
  158.                         <a href="#">查看更多</a>
  159.                         <i class="rt iconfont">></i>
  160.                     </div>
  161.                 </div>
  162.                 <div class="box-bd clearfix">
  163.                     <div class="rww">
  164.                         <div class="span4">
  165.                             <ul>
  166.                                 <li>
  167.                                     <a href="#">
  168.                                         <img src="image/phone1.webp" alt="">
  169.                                     </a>
  170.                                 </li>
  171.                             </ul>
  172.                         </div>
  173.  
  174.                         <div class="span16">
  175.                             <ul class="brick-list clearfix">
  176.                                 <li class="brick-item">
  177.                                     <a href="#">
  178.                                         <div class="figure"><img src="image/phone2.webp" alt=""></div>
  179.                                         <h3 class="title">Xiaomi 12 SUltra</h3>
  180.                                         <p class="desc">这真徕卡|专业徕卡影像</p>
  181.                                         <p class="price">5999元起</p>
  182.                                     </a>
  183.                                 </li>
  184.                                 <li class="brick-item">
  185.                                     <a href="#">
  186.                                         <div class="figure"><img src="image/phone3.webp" alt=""></div>
  187.                                         <h3 class="title">Xiaomi 12S Pro</h3>
  188.                                         <p class="desc">骁龙8+旗舰处理器|徕卡影像</p>
  189.                                         <p class="price">4699元起</p>
  190.                                     </a>
  191.                                 </li>
  192.                                 <li class="brick-item">
  193.                                     <a href="#">
  194.                                         <div class="figure"><img src="image/phone3.webp" alt=""></div>
  195.                                         <h3 class="title">Xiaomi 12S</h3>
  196.                                         <p class="desc">小尺寸性能旗舰|徕卡影像</p>
  197.                                         <p class="price">3999元起</p>
  198.                                     </a>
  199.                                 </li>
  200.                                 <li class="brick-item">
  201.                                     <a href="#">
  202.                                         <div class="figure"><img src="image/phone4.webp" alt=""></div>
  203.                                         <h3 class="title">Xiaomi 12S Pro 天玑版</h3>
  204.                                         <p class="desc">全球首发天玑9000+|叶脉冷泵散热系</p>
  205.                                         <p class="price">3999元起</p>
  206.                                     </a>
  207.                                 </li>
  208.                                 <li class="brick-item">
  209.                                     <a href="#">
  210.                                         <div class="figure"><img src="image/phone5.webp" alt=""></div>
  211.                                         <h3 class="title">Redim Note 11T Pro+</h3>
  212.                                         <p class="desc">天玑8100|真旗舰芯</p>
  213.                                         <p class="price">2099元起</p>
  214.                                     </a>
  215.                                 </li>
  216.                                 <li class="brick-item">
  217.                                     <a href="#">
  218.                                         <div class="figure"><img src="image/phone6.webp" alt=""></div>
  219.                                         <h3 class="title">Redim Note 11T Pro</h3>
  220.                                         <p class="desc">天玑8100|真旗舰芯</p>
  221.                                         <p class="price">1799元起</p>
  222.                                     </a>
  223.                                 </li>
  224.                                 <li class="brick-item">
  225.                                     <a href="#">
  226.                                         <div class="figure"><img src="image/phone7.webp" alt=""></div>
  227.                                         <h3 class="title">Redim Note 11SE</h3>
  228.                                         <p class="desc">双卡双5G|极速登录</p>
  229.                                         <div class="money">
  230.                                             <p class="price not">999元起 </p>
  231.                                             <del><span class="num"> 1099</span>元</del>
  232.                                         </div>
  233.                                     </a>
  234.                                 </li>
  235.                                 <li class="brick-item">
  236.                                     <a href="#">
  237.                                         <div class="figure"><img src="image/phone8.webp" alt=""></div>
  238.                                         <h3 class="title">Xiaomi Civi 1S</h3>
  239.                                         <p class="desc">原生美肌人像|奇迹阳光动人新色|</p>
  240.                                         <p class="price">2299元起</p>
  241.                                     </a>
  242.                                 </li>
  243.                             </ul>
  244.                         </div>
  245.                     </div>
  246.                 </div>
  247.             </div>
  248.  
  249.             <!-- 2 -->
  250.             <div class="home">
  251.                 <div class="box-hd">
  252.                     <h2 class="title">智能穿戴</h2>
  253.                     <div class="more">
  254.                         <ul class="tab-list">
  255.                             <li>
  256.                                 <a href="#" class="zuo"> 热门</a>
  257.                             </li>
  258.                             <li>
  259.                                 <a class="rt">穿戴</a>
  260.                             </li>
  261.                         </ul>
  262.                     </div>
  263.                 </div>
  264.                 <div class="box-bd clearfix">
  265.                     <div class="rww">
  266.                         <div class="span4">
  267.                             <ul>
  268.                                 <li>
  269.                                     <a href="#">
  270.                                         <img src="image/zn1.webp" alt="">
  271.                                     </a>
  272.                                 </li>
  273.                             </ul>
  274.                         </div>
  275.  
  276.                         <div class="span16">
  277.                             <ul class="brick-list clearfix">
  278.                                 <li class="brick-item">
  279.                                     <a href="#">
  280.                                         <div class="figure"><img src="image/zn2.webp" alt=""></div>
  281.                                         <h3 class="title">Xiaomi Watch S1</h3>
  282.                                         <p class="desc">蓝宝石玻璃镜面|不锈钢中框|1.43''A…</p>
  283.                                         <p class="price">999元起</p>
  284.                                     </a>
  285.                                 </li>
  286.                                 <li class="brick-item">
  287.                                     <a href="#">
  288.                                         <div class="figure"><img src="image/zn3.webp" alt=""></div>
  289.                                         <h3 class="title">Xiaomi真无线降噪耳机3</h3>
  290.                                         <p class="desc">40dB宽屏主动降噪|HiFi高保真品质|</p>
  291.                                         <p class="price">349元</p>
  292.                                     </a>
  293.                                 </li>
  294.                                 <li class="brick-item">
  295.                                     <a href="#">
  296.                                         <div class="figure"><img src="image/zn4.webp" alt=""></div>
  297.                                         <h3 class="title">Redmi 手表 2</h3>
  298.                                         <p class="desc">1.6''AMOLED大屏|117种运动模式|2…</p>
  299.                                         <p class="price">399元</p>
  300.                                     </a>
  301.                                 </li>
  302.                                 <li class="brick-item">
  303.                                     <a href="#">
  304.                                         <div class="figure"><img src="image/zn5.webp" alt=""></div>
  305.                                         <h3 class="title">小米手环6 NFC 版</h3>
  306.                                         <p class="desc">1.56''跑道全面彩屏|30种运动模式|…</p>
  307.                                         <div class="money">
  308.                                             <p class="price not">229元 </p>
  309.                                             <del><span class="num"> 279</span>元</del>
  310.                                         </div>
  311.                                     </a>
  312.                                 </li>
  313.                                 <li class="brick-item">
  314.                                     <a href="#">
  315.                                         <div class="figure"><img src="image/zn6.webp" alt=""></div>
  316.                                         <h3 class="title">Xiaomi 真无线降噪耳机 3 Pro</h3>
  317.                                         <p class="desc">40dB自适应降噪 | 空间音频 | HiFi…</p>
  318.                                         <p class="price">599元起</p>
  319.                                     </a>
  320.                                 </li>
  321.                                 <li class="brick-item">
  322.                                     <a href="#">
  323.                                         <div class="figure"><img src="image/zn7.webp" alt=""></div>
  324.                                         <h3 class="title">Redmi Buds 3半入耳真无线蓝牙…</h3>
  325.                                         <p class="desc">轻巧半入耳|通话降噪|20小时长续航</p>
  326.                                         <p class="price">179元</p>
  327.                                     </a>
  328.                                 </li>
  329.                                 <li class="brick-item">
  330.                                     <a href="#">
  331.                                         <div class="figure"><img src="image/zn9.webp" alt=""></div>
  332.                                         <h3 class="title">Redmi Buds 3 青春版</h3>
  333.                                         <p class="desc">轻巧真无线|猫耳状稳固设计|18小时</p>
  334.                                         <p class="price">99元</p>
  335.                                     </a>
  336.                                 </li>
  337.                                 <li class="brick-item item-more">
  338.                                     <a href="#">
  339.                                         <div class="figure figure-more"><img src="image/liulan.png" alt=""></div>
  340.                                         <div class="lot">
  341.                                             浏览更多
  342.                                             <small>热门</small>
  343.                                         </div>
  344.                                     </a>
  345.                                 </li>
  346.                             </ul>
  347.                         </div>
  348.                     </div>
  349.                 </div>
  350.             </div>
  351.  
  352.             <!-- 3 -->
  353.             <div class="home">
  354.                 <div class="box-hd">
  355.                     <h2 class="title">笔记本 | 平板</h2>
  356.                     <div class="more">
  357.                         <a href="#">查看更多</a>
  358.                         <i class="rt iconfont">></i>
  359.                     </div>
  360.                 </div>
  361.                 <div class="box-bd clearfix">
  362.                     <div class="rww">
  363.                         <div class="span4">
  364.                             <ul>
  365.                                 <li>
  366.                                     <a href="#">
  367.                                         <img src="image/bjb1.webp" alt="">
  368.                                     </a>
  369.                                 </li>
  370.                             </ul>
  371.                         </div>
  372.  
  373.                         <div class="span16">
  374.                             <ul class="brick-list clearfix">
  375.                                 <li class="brick-item">
  376.                                     <a href="#">
  377.                                         <div class="figure"><img src="image/bjb2.webp" alt=""></div>
  378.                                         <h3 class="title">Redmi Book Pro 15 2022</h3>
  379.                                         <p class="desc">全新12代英特尔处理器</p>
  380.                                         <p class="price">5599元起</p>
  381.                                     </a>
  382.                                 </li>
  383.                                 <li class="brick-item">
  384.                                     <a href="#">
  385.                                         <div class="figure"><img src="image/bjb3.webp" alt=""></div>
  386.                                         <h3 class="title">Redmi G 2021 R7/RTX3050Ti/1…</h3>
  387.                                         <p class="desc">有光追，才是高性能游戏本</p>
  388.                                         <p class="price">5799元起</p>
  389.                                     </a>
  390.                                 </li>
  391.                                 <li class="brick-item">
  392.                                     <a href="#">
  393.                                         <div class="figure"><img src="image/bjb4.webp" alt=""></div>
  394.                                         <h3 class="title">Pro 14 增强版 i5 独显-Win11</h3>
  395.                                         <p class="desc">2.5K超强视网膜全面屏</p>
  396.                                         <p class="price">4799元</p>
  397.                                     </a>
  398.                                 </li>
  399.                                 <li class="brick-item">
  400.                                     <a href="#">
  401.                                         <div class="figure"><img src="image/bjb5.webp" alt=""></div>
  402.                                         <h3 class="title">RedmiBook Pro 15 R5/16G/512…</h3>
  403.                                         <p class="desc">3.2k超高清视网膜全面屏|微米级一体…</p>
  404.                                         <p class="price">4699元起</p>
  405.                                     </a>
  406.                                 </li>
  407.                                 <li class="brick-item">
  408.                                     <a href="#">
  409.                                         <div class="figure"><img src="image/bjb6.webp" alt=""></div>
  410.                                         <h3 class="title">Redmi Book Pro 15 2022</h3>
  411.                                         <p class="desc">全新12代英特尔处理器，2.5k 120Hz</p>
  412.                                         <p class="price">5399元起</p>
  413.                                     </a>
  414.                                 </li>
  415.                                 <li class="brick-item">
  416.                                     <a href="#">
  417.                                         <div class="figure"><img src="image/bjb7.webp" alt=""></div>
  418.                                         <h3 class="title">小米平板5 Pro</h3>
  419.                                         <p class="desc">骁龙870芯片|2.5k超高清|120HZ高…</p>
  420.                                         <p class="price">2349元起</p>
  421.                                     </a>
  422.                                 </li>
  423.                                 <li class="brick-item">
  424.                                     <a href="#">
  425.                                         <div class="figure"><img src="image/bjb8.webp" alt=""></div>
  426.                                         <h3 class="title">RedmiBook Pro 14 R5 16G 512…</h3>
  427.                                         <p class="desc">2.5k超强视网膜全面屏</p>
  428.                                         <p class="price">3999元起</p>
  429.                                     </a>
  430.                                 </li>
  431.                                 <li class="brick-item item-more">
  432.                                     <a href="#">
  433.                                         <div class="figure figure-more pic"><img src="image/bjb9.webp" alt=""></div>
  434.                                         <div class="lot">
  435.                                             Redmi 显示器
  436.                                             <small>23.8英寸</small>
  437.                                             <small class="price">599元</small>
  438.                                         </div>
  439.                                     </a>
  440.                                 </li>
  441.                                 <li class="brick-item item-more">
  442.                                     <a href="#">
  443.                                         <div class="figure figure-more"><img src="image/liulan.png" alt=""></div>
  444.                                         <div class="lot">
  445.                                             浏览更多
  446.                                             <small>热门</small>
  447.                                         </div>
  448.                                     </a>
  449.                                 </li>
  450.                             </ul>
  451.                         </div>
  452.                     </div>
  453.                 </div>
  454.             </div>
  455.  
  456.             <!-- 4 -->
  457.             <div class="home">
  458.                 <div class="box-hd">
  459.                     <h2 class="title">家电</h2>
  460.                     <div class="more">
  461.                         <ul class="tab-list">
  462.                             <li>
  463.                                 <a href="#" class="zuo"> 热门</a>
  464.                             </li>
  465.                             <li>
  466.                                 <a class="rt">电视影音</a>
  467.                             </li>
  468.                         </ul>
  469.                     </div>
  470.                 </div>
  471.                 <div class="box-bd clearfix">
  472.                     <div class="rww">
  473.                         <div class="span4">
  474.                             <ul>
  475.                                 <li>
  476.                                     <a href="#">
  477.                                         <img src="image/jd1.png" alt="">
  478.                                     </a>
  479.                                 </li>
  480.                             </ul>
  481.                         </div>
  482.  
  483.                         <div class="span16">
  484.                             <ul class="brick-list clearfix">
  485.                                 <li class="brick-item">
  486.                                     <a href="#">
  487.                                         <div class="figure"><img src="image/jd2.webp" alt=""></div>
  488.                                         <h3 class="title">
  489.                                             小米电视6 65” OLED
  490.                                         </h3>
  491.                                         <p class="desc">OLED自发光屏|百万级对比度|4.6m…</p>
  492.                                         <p class="price">6699元</p>
  493.                                     </a>
  494.                                 </li>
  495.                                 <li class="brick-item">
  496.                                     <a href="#">
  497.                                         <div class="figure"><img src="image/jd3.webp" alt=""></div>
  498.                                         <h3 class="title">小米电视6 至尊版 65英寸</h3>
  499.                                         <p class="desc">百级区分背光|双120Hz高刷|4.5GB…</p>
  500.                                         <p class="price">7199元</p>
  501.                                     </a>
  502.                                 </li>
  503.                                 <li class="brick-item">
  504.                                     <a href="#">
  505.                                         <div class="figure"><img src="image/jd4.webp" alt=""></div>
  506.                                         <h3 class="title">小米电视 ES55 2022款</h3>
  507.                                         <p class="desc">多分区背光|MEMC动态补偿|杜比视屏</p>
  508.                                         <p class="price">2599元</p>
  509.                                     </a>
  510.                                 </li>
  511.                                 <li class="brick-item">
  512.                                     <a href="#">
  513.                                         <div class="figure"><img src="image/jd5.webp" alt=""></div>
  514.                                         <h3 class="title">米家直驱洗烘一体机 10kg</h3>
  515.                                         <p class="desc">DD直驱电机 安静护衣</p>
  516.                                         <p class="price">2199元</p>
  517.                                     </a>
  518.                                 </li>
  519.                                 <li class="brick-item">
  520.                                     <a href="#">
  521.                                         <div class="figure"><img src="image/jd6.webp" alt=""></div>
  522.                                         <h3 class="title">米家波轮洗衣机 10kg</h3>
  523.                                         <p class="desc">全景玻璃阻尼上盖 防夹手</p>
  524.                                         <p class="price">1099元</p>
  525.                                     </a>
  526.                                 </li>
  527.                                 <li class="brick-item">
  528.                                     <a href="#">
  529.                                         <div class="figure"><img src="image/jd7.webp" alt=""></div>
  530.                                         <h3 class="title">米家冰箱无霜三们216L</h3>
  531.                                         <p class="desc">风冷无霜 三门三温区</p>
  532.                                         <p class="price">1499元起</p>
  533.                                     </a>
  534.                                 </li>
  535.                                 <li class="brick-item">
  536.                                     <a href="#">
  537.                                         <div class="figure"><img src="image/jd7.webp" alt=""></div>
  538.                                         <h3 class="title">米家冰箱无霜两们186L</h3>
  539.                                         <p class="desc">风冷无霜 离子抗菌</p>
  540.                                         <p class="price">1299元起</p>
  541.                                     </a>
  542.                                 </li>
  543.                                 <li class="brick-item item-more">
  544.                                     <a href="#">
  545.                                         <div class="figure figure-more pic"><img src="image/jd9.webp" alt=""></div>
  546.                                         <div class="lot">
  547.                                             米家全自动波
  548.                                             <br> 轮洗衣机8kg
  549.                                             <!-- <small></small> -->
  550.                                             <small class="price">799元</small>
  551.                                         </div>
  552.                                     </a>
  553.                                 </li>
  554.                                 <li class="brick-item item-more">
  555.                                     <a href="#">
  556.                                         <div class="figure figure-more"><img src="image/liulan.png" alt=""></div>
  557.                                         <div class="lot">
  558.                                             浏览更多
  559.                                             <small>热门</small>
  560.                                         </div>
  561.                                     </a>
  562.                                 </li>
  563.                             </ul>
  564.                         </div>
  565.                     </div>
  566.                 </div>
  567.             </div>
  568.  
  569.             <!-- 5 -->
  570.             <div class="home">
  571.                 <div class="box-hd">
  572.                     <h2 class="title">生活电器</h2>
  573.                     <div class="more">
  574.                         <ul class="tab-list">
  575.                             <li>
  576.                                 <a href="#" class="zuo">扫地机</a>
  577.                             </li>
  578.                             <li>
  579.                                 <a class="rt">空净</a>
  580.                             </li>
  581.                             <li>
  582.                                 <a href="#">清洁</a>
  583.                             </li>
  584.                             <li>
  585.                                 <a href="#">风扇</a>
  586.                             </li>
  587.                         </ul>
  588.                         <!-- <a href="#">  </a> -->
  589.                     </div>
  590.                 </div>
  591.                 <div class="box-bd clearfix">
  592.                     <div class="rww">
  593.                         <div class="span4">
  594.                             <ul>
  595.                                 <li>
  596.                                     <a href="#">
  597.                                         <img src="image/sh1.png" alt="">
  598.                                     </a>
  599.                                 </li>
  600.                             </ul>
  601.                         </div>
  602.  
  603.                         <div class="span16">
  604.                             <ul class="brick-list clearfix">
  605.                                 <li class="brick-item">
  606.                                     <a href="#">
  607.                                         <div class="figure"><img src="image/sh2.webp" alt=""></div>
  608.                                         <h3 class="title">米家全能扫拖机器人</h3>
  609.                                         <p class="desc">免洗集尘全自动，一机解放双手</p>
  610.                                         <p class="price">3999元</p>
  611.                                     </a>
  612.                                 </li>
  613.                                 <li class="brick-item">
  614.                                     <a href="#">
  615.                                         <div class="figure"><img src="image/sh3.webp" alt=""></div>
  616.                                         <h3 class="title">米家全能扫拖机器人 2Pro</h3>
  617.                                         <p class="desc">扫拖除菌一步到位</p>
  618.                                         <p class="price">1999元</p>
  619.                                     </a>
  620.                                 </li>
  621.                                 <li class="brick-item">
  622.                                     <a href="#">
  623.                                         <div class="figure"><img src="image/sh4.webp" alt=""></div>
  624.                                         <h3 class="title">米家集尘扫拖机器人 2</h3>
  625.                                         <p class="desc">金典延续，全面升级</p>
  626.                                         <p class="price">1499元</p>
  627.                                     </a>
  628.                                 </li>
  629.                                 <li class="brick-item">
  630.                                     <a href="#">
  631.                                         <div class="figure"><img src="image/sh5.webp" alt=""></div>
  632.                                         <h3 class="title">米家扫拖机器人1T</h3>
  633.                                         <p class="desc">3D精准避障，扫拖不再碰撞</p>
  634.                                         <p class="price">1299元</p>
  635.                                     </a>
  636.                                 </li>
  637.                                 <li class="brick-item">
  638.                                     <a href="#">
  639.                                         <div class="figure"><img src="image/sh6.webp" alt=""></div>
  640.                                         <h3 class="title">米家扫拖机器人1T</h3>
  641.                                         <p class="desc">3D精准避障，扫拖不再碰撞</p>
  642.                                         <p class="price">1299元</p>
  643.                                     </a>
  644.                                 </li>
  645.                                 <li class="brick-item">
  646.                                     <a href="#">
  647.                                         <div class="figure"><img src="image/sh7.webp" alt=""></div>
  648.                                         <h3 class="title">米家扫拖机器人 2C</h3>
  649.                                         <p class="desc">除菌去渍二合一，开启生活新净界</p>
  650.                                         <p class="price">1499元</p>
  651.                                     </a>
  652.                                 </li>
  653.                                 <li class="brick-item">
  654.                                     <a href="#">
  655.                                         <div class="figure"><img src="image/sh8.webp" alt=""></div>
  656.                                         <h3 class="title">米家扫拖机器人 Pro</h3>
  657.                                         <p class="desc">AI智能识别 3D精准避障</p>
  658.                                         <p class="price">2699元</p>
  659.                                     </a>
  660.                                 </li>
  661.                                 <li class="brick-item item-more">
  662.                                     <a href="#">
  663.                                         <div class="figure figure-more pic"><img src="image/sh9.webp" alt=""></div>
  664.                                         <div class="lot">
  665.                                             米家无线吸尘
  666.                                             <br> 器K10 Pro
  667.                                             <!-- <small>23.8英寸</small> -->
  668.                                             <small class="price">1599元</small>
  669.                                         </div>
  670.                                     </a>
  671.                                 </li>
  672.                                 <li class="brick-item item-more">
  673.                                     <a href="#">
  674.                                         <div class="figure figure-more"><img src="image/liulan.png" alt=""></div>
  675.                                         <div class="lot">
  676.                                             浏览更多
  677.                                             <small>热门</small>
  678.                                         </div>
  679.                                     </a>
  680.                                 </li>
  681.                             </ul>
  682.                         </div>
  683.                     </div>
  684.                 </div>
  685.             </div>
  686.  
  687.             <div class="banner-box">
  688.                 <a href="#">
  689.                     <img src="image/mj.webp" alt="">
  690.                 </a>
  691.             </div>
  692.  
  693.             <!-- 6 -->
  694.             <div class="home">
  695.                 <div class="box-hd">
  696.                     <h2 class="title">厨房家电</h2>
  697.                     <div class="more">
  698.                         <ul class="tab-list">
  699.                             <li>
  700.                                 <a href="#" class="zuo">净水器</a>
  701.                             </li>
  702.                             <li>
  703.                                 <a class="rt">烟灶</a>
  704.                             </li>
  705.                             <li>
  706.                                 <a href="#">电饭煲</a>
  707.                             </li>
  708.                             <li>
  709.                                 <a href="">微蒸烤</a>
  710.                             </li>
  711.                         </ul>
  712.                     </div>
  713.                 </div>
  714.                 <div class="box-bd clearfix">
  715.                     <div class="rww">
  716.                         <div class="span4">
  717.                             <ul>
  718.                                 <li>
  719.                                     <a href="#">
  720.                                         <img src="image/cf1.png" alt="">
  721.                                     </a>
  722.                                 </li>
  723.                             </ul>
  724.                         </div>
  725.  
  726.                         <div class="span16">
  727.                             <ul class="brick-list clearfix">
  728.                                 <li class="brick-item">
  729.                                     <a href="#">
  730.                                         <div class="figure"><img src="image/cf2.webp" alt=""></div>
  731.                                         <h3 class="title">米家智能电饭煲 微压版 3L</h3>
  732.                                         <p class="desc">看得见的真微压</p>
  733.                                         <p class="price">419元</p>
  734.                                     </a>
  735.                                 </li>
  736.                                 <li class="brick-item">
  737.                                     <a href="#">
  738.                                         <div class="figure"><img src="image/cf3.webp" alt=""></div>
  739.                                         <h3 class="title">米家智能电压力锅5L</h3>
  740.                                         <p class="desc">一锅双胆，9档调节口感</p>
  741.                                         <p class="price">369元</p>
  742.                                     </a>
  743.                                 </li>
  744.                                 <li class="brick-item">
  745.                                     <a href="#">
  746.                                         <div class="figure"><img src="image/cf4.webp" alt=""></div>
  747.                                         <h3 class="title">米家电饭煲C1</h3>
  748.                                         <p class="desc">快慢收放自如，小巧身材内有乾坤</p>
  749.                                         <p class="price">149元起</p>
  750.                                     </a>
  751.                                 </li>
  752.                                 <li class="brick-item">
  753.                                     <a href="#">
  754.                                         <div class="figure"><img src="image/cf5.webp" alt=""></div>
  755.                                         <h3 class="title">米家智能小饭煲 1.6L</h3>
  756.                                         <p class="desc">小容量不浪费</p>
  757.                                         <p class="price">179元</p>
  758.                                     </a>
  759.                                 </li>
  760.                                 <li class="brick-item">
  761.                                     <a href="#">
  762.                                         <div class="figure"><img src="image/cf6.webp" alt=""></div>
  763.                                         <h3 class="title">米家智能IH电饭煲3L</h3>
  764.                                         <p class="desc">多才多艺的智能电饭煲</p>
  765.                                         <p class="price">349元</p>
  766.                                     </a>
  767.                                 </li>
  768.                                 <li class="brick-item">
  769.                                     <a href="#">
  770.                                         <div class="figure"><img src="image/cf7.webp" alt=""></div>
  771.                                         <h3 class="title">米家智能电压力锅2.5L</h3>
  772.                                         <p class="desc">煮饭快，焖炖煲煮一机多能</p>
  773.                                         <p class="price">179元</p>
  774.                                     </a>
  775.                                 </li>
  776.                                 <li class="brick-item">
  777.                                     <a href="#">
  778.                                         <div class="figure"><img src="image/cf8.webp" alt=""></div>
  779.                                         <h3 class="title">米家智能调压电压力锅5L</h3>
  780.                                         <p class="desc">智能无极调压</p>
  781.                                         <p class="price">559元</p>
  782.                                     </a>
  783.                                 </li>
  784.                                 <li class="brick-item item-more">
  785.                                     <a href="#">
  786.                                         <div class="figure figure-more"><img src="image/liulan.png" alt=""></div>
  787.                                         <div class="lot">
  788.                                             浏览更多
  789.                                             <small>热门</small>
  790.                                         </div>
  791.                                     </a>
  792.                                 </li>
  793.                             </ul>
  794.                         </div>
  795.                     </div>
  796.                 </div>
  797.             </div>
  798.  
  799.             <!-- 7 -->
  800.             <div class="home">
  801.                 <div class="box-hd">
  802.                     <h2 class="title">智能家居</h2>
  803.                     <div class="more">
  804.                         <!-- <a href="#">      </a> -->
  805.                         <!-- <i class="rt">></i> -->
  806.                         <ul class="tab-list">
  807.                             <li>
  808.                                 <a href="#" class="zuo">小爱音响</a>
  809.                             </li>
  810.                             <li>
  811.                                 <a class="rt">门锁</a>
  812.                             </li>
  813.                             <li>
  814.                                 <a href="#">路由器</a>
  815.                             </li>
  816.                             <li>
  817.                                 <a href="#">智能设备</a>
  818.                             </li>
  819.                         </ul>
  820.                     </div>
  821.                 </div>
  822.                 <div class="box-bd clearfix">
  823.                     <div class="rww">
  824.                         <div class="span4">
  825.                             <ul>
  826.                                 <li>
  827.                                     <a href="#">
  828.                                         <img src="image/jj1.png" alt="">
  829.                                     </a>
  830.                                 </li>
  831.                             </ul>
  832.                         </div>
  833.  
  834.                         <div class="span16">
  835.                             <ul class="brick-list clearfix">
  836.                                 <li class="brick-item">
  837.                                     <a href="#">
  838.                                         <div class="figure"><img src="image/jj2.webp" alt=""></div>
  839.                                         <h3 class="title">
  840.                                             Xiaomi智能家庭屏 10
  841.                                         </h3>
  842.                                         <p class="desc">MIUI Home｜10.1" 高清大屏｜115°超…</p>
  843.                                         <p class="price">999元</p>
  844.                                     </a>
  845.                                 </li>
  846.                                 <li class="brick-item">
  847.                                     <a href="#">
  848.                                         <div class="figure"><img src="image/jj3.webp" alt=""></div>
  849.                                         <h3 class="title">小米小爱音箱Play 增强版</h3>
  850.                                         <p class="desc">是音箱也是床头闹钟</p>
  851.                                         <p class="price">129元</p>
  852.                                     </a>
  853.                                 </li>
  854.                                 <li class="brick-item">
  855.                                     <a href="#">
  856.                                         <div class="figure"><img src="image/jj4.webp" alt=""></div>
  857.                                         <h3 class="title">
  858.                                             Xiaomi Sound
  859.                                         </h3>
  860.                                         <p class="desc">小米高保真智能音箱</p>
  861.                                         <p class="price">449元</p>
  862.                                     </a>
  863.                                 </li>
  864.                                 <li class="brick-item">
  865.                                     <a href="#">
  866.                                         <div class="figure"><img src="image/jj5.webp" alt=""></div>
  867.                                         <h3 class="title">小米小爱音箱</h3>
  868.                                         <p class="desc">听音乐、语音遥控家电</p>
  869.                                         <p class="price">99元</p>
  870.                                     </a>
  871.                                 </li>
  872.                                 <li class="brick-item">
  873.                                     <a href="#">
  874.                                         <div class="figure"><img src="image/jj6.webp" alt=""></div>
  875.                                         <h3 class="title">
  876.                                             小米小爱音箱 Pro
  877.                                         </h3>
  878.                                         <p class="desc">语音遥控传统家电</p>
  879.                                         <p class="price">279</p>
  880.                                     </a>
  881.                                 </li>
  882.                                 <li class="brick-item">
  883.                                     <a href="#">
  884.                                         <div class="figure"><img src="image/jj7.webp" alt=""></div>
  885.                                         <h3 class="title">X小米AI音箱（第二代）</h3>
  886.                                         <p class="desc">小米AI音箱（第二代）</p>
  887.                                         <p class="price">199元</p>
  888.                                     </a>
  889.                                 </li>
  890.                                 <li class="brick-item">
  891.                                     <a href="#">
  892.                                         <div class="figure"><img src="image/jj8.webp" alt=""></div>
  893.                                         <h3 class="title">
  894.                                             小米小爱触屏音箱
  895.                                         </h3>
  896.                                         <p class="desc">好听，更好看</p>
  897.                                         <p class="price">249元</p>
  898.                                     </a>
  899.                                 </li>
  900.                                 <li class="brick-item item-more">
  901.                                     <a href="#">
  902.                                         <div class="figure figure-more pic"><img src="image/jj9.webp" alt=""></div>
  903.                                         <div class="lot">
  904.                                             小米小爱音箱
  905.                                             <!-- <small>23.8英寸</small> -->
  906.                                             <small class="price">209元</small>
  907.                                         </div>
  908.                                     </a>
  909.                                 </li>
  910.                                 <li class="brick-item item-more">
  911.                                     <a href="#">
  912.                                         <div class="figure figure-more"><img src="image/liulan.png" alt=""></div>
  913.                                         <div class="lot">
  914.                                             浏览更多
  915.                                             <small>热门</small>
  916.                                         </div>
  917.                                     </a>
  918.                                 </li>
  919.                             </ul>
  920.                         </div>
  921.                     </div>
  922.                 </div>
  923.             </div>
  925.             <!-- 8 -->
  926.             <div class="home">
  927.                 <div class="box-hd">
  928.                     <h2 class="title">运动出行</h2>
  929.                     <div class="more">
  930.                         <!-- <a href="#">      </a> -->
  931.                         <!-- <i class="rt">></i> -->
  932.                         <ul class="tab-list">
  933.                             <li>
  934.                                 <a href="#" class="zuo">平衡车/滑板车</a>
  935.                             </li>
  936.                             <li>
  937.                                 <a class="rt">运动健身</a>
  938.                             </li>
  939.                             <li>
  940.                                 <a href="">箱包配饰</a>
  941.                             </li>
  942.                             <li>
  943.                                 <a href="">出行工具</a>
  944.                             </li>
  945.                         </ul>
  946.                     </div>
  947.                 </div>
  948.                 <div class="box-bd clearfix">
  949.                     <div class="rww">
  950.                         <div class="span4">
  951.                             <ul>
  952.                                 <li>
  953.                                     <a href="#">
  954.                                         <img src="image/yd1.png" alt="">
  955.                                     </a>
  956.                                 </li>
  957.                             </ul>
  958.                         </div>
  960.                         <div class="span16">
  961.                             <ul class="brick-list clearfix">
  962.                                 <li class="brick-item">
  963.                                     <a href="#">
  964.                                         <div class="figure"><img src="image/yd2.jpg" alt=""></div>
  965.                                         <h3 class="title">
  966.                                             九号平衡车
  967.                                         </h3>
  968.                                         <p class="desc">年轻人的酷玩具</p>
  969.                                         <p class="price">2199元</p>
  970.                                     </a>
  971.                                 </li>
  972.                                 <li class="brick-item">
  973.                                     <a href="#">
  974.                                         <div class="figure"><img src="image/yd3.webp" alt=""></div>
  975.                                         <h3 class="title">
  976.                                             九号平衡车燃动版
  977.                                         </h3>
  978.                                         <p class="desc">燃动升级，随走随停</p>
  979.                                         <p class="price">2399元起</p>
  980.                                     </a>
  981.                                 </li>
  982.                                 <li class="brick-item">
  983.                                     <a href="#">
  984.                                         <div class="figure"><img src="image/yd4.png" alt=""></div>
  985.                                         <h3 class="title">
  986.                                             九号平衡车 Plus
  987.                                         </h3>
  988.                                         <p class="desc">一个形影不离的新伙伴</p>
  989.                                         <p class="price">3499元</p>
  990.                                     </a>
  991.                                 </li>
  992.                                 <li class="brick-item">
  993.                                     <a href="#">
  994.                                         <div class="figure"><img src="image/yd5.webp" alt=""></div>
  995.                                         <h3 class="title">
  996.                                             米家电动滑板车1S
  997.                                         </h3>
  998.                                         <p class="desc">型出格，行出色</p>
  999.                                         <p class="price">2199元</p>
  1000.                                     </a>
  1001.                                 </li>
  1002.                                 <li class="brick-item">
  1003.                                     <a href="#">
  1004.                                         <div class="figure"><img src="image/yd6.webp" alt=""></div>
  1005.                                         <h3 class="title">
  1006.                                             小米米家电动滑板车Pro
  1007.                                         </h3>
  1008.                                         <p class="desc">性能提升，动力更强劲</p>
  1009.                                         <p class="price">3099元</p>
  1010.                                     </a>
  1011.                                 </li>
  1012.                                 <li class="brick-item">
  1013.                                     <a href="#">
  1014.                                         <div class="figure"><img src="image/yd7.webp" alt=""></div>
  1015.                                         <h3 class="title">九号卡丁车Pro兰博基尼汽车定…</h3>
  1016.                                         <p class="desc">九号卡丁车Pro兰博基尼汽车定版</p>
  1017.                                         <p class="price">9999元</p>
  1018.                                     </a>
  1019.                                 </li>
  1020.                                 <li class="brick-item">
  1021.                                     <a href="#">
  1022.                                         <div class="figure"><img src="image/yd8.webp" alt=""></div>
  1023.                                         <h3 class="title">
  1024.                                             九号平衡车 改装套件（不含平衡…
  1025.                                         </h3>
  1026.                                         <p class="desc">小朋友的大玩具，老顽童的小赛车</p>
  1027.                                         <p class="price">2999元</p>
  1028.                                     </a>
  1029.                                 </li>
  1030.                                 <li class="brick-item item-more">
  1031.                                     <a href="#">
  1032.                                         <div class="figure figure-more"><img src="image/liulan.png" alt=""></div>
  1033.                                         <div class="lot">
  1034.                                             浏览更多
  1035.                                             <small>热门</small>
  1036.                                         </div>
  1037.                                     </a>
  1038.                                 </li>
  1039.                             </ul>
  1040.                         </div>
  1041.                     </div>
  1042.                 </div>
  1043.             </div>
  1046.             <div class="banner-box">
  1047.                 <a href="#">
  1048.                     <img src="image/xmjn.webp" alt="">
  1049.                 </a>
  1050.             </div>
  1052.             <!-- 9 -->
  1053.             <div class="home">
  1054.                 <div class="box-hd">
  1055.                     <h2 class="title">日用百货</h2>
  1056.                     <div class="more">
  1057.                         <!-- <a href="#">      </a> -->
  1058.                         <!-- <i class="rt">></i> -->
  1059.                         <ul class="tab-list">
  1060.                             <li>
  1061.                                 <a href="#" class="zuo">个护健康</a>
  1062.                             </li>
  1063.                             <li>
  1064.                                 <a class="rt">电源/线材</a>
  1065.                             </li>
  1066.                             <li>
  1067.                                 <a href="#">儿童用品</a>
  1068.                             </li>
  1069.                             <li>
  1070.                                 <a href="#">家具床品</a>
  1071.                             </li>
  1072.                         </ul>
  1073.                     </div>
  1074.                 </div>
  1075.                 <div class="box-bd clearfix">
  1076.                     <div class="rww">
  1077.                         <div class="span4">
  1078.                             <ul>
  1079.                                 <li>
  1080.                                     <a href="#">
  1081.                                         <img src="image/ry1.png" alt="">
  1082.                                     </a>
  1083.                                 </li>
  1084.                             </ul>
  1085.                         </div>
  1087.                         <div class="span16">
  1088.                             <ul class="brick-list clearfix">
  1089.                                 <li class="brick-item">
  1090.                                     <a href="#">
  1091.                                         <div class="figure"><img src="image/ry2.webp" alt=""></div>
  1092.                                         <h3 class="title">
  1093.                                             米家声波电动牙刷T700
  1094.                                         </h3>
  1095.                                         <p class="desc">智能洁齿丨强劲动力</p>
  1096.                                         <p class="price">299元</p>
  1097.                                     </a>
  1098.                                 </li>
  1099.                                 <li class="brick-item">
  1100.                                     <a href="#">
  1101.                                         <div class="figure"><img src="image/ry3.webp" alt=""></div>
  1102.                                         <h3 class="title">
  1103.                                             米家电动剃须刀S500
  1104.                                         </h3>
  1105.                                         <p class="desc">3刀头360°浮动丨超长续航</p>
  1106.                                         <p class="price">169元</p>
  1107.                                     </a>
  1108.                                 </li>
  1109.                                 <li class="brick-item">
  1110.                                     <a href="#">
  1111.                                         <div class="figure"><img src="image/ry4.webp" alt=""></div>
  1112.                                         <h3 class="title">
  1113.                                             米家理发器
  1114.                                         </h3>
  1115.                                         <p class="desc">米家理发器</p>
  1116.                                         <p class="price">139元</p>
  1117.                                     </a>
  1118.                                 </li>
  1119.                                 <li class="brick-item">
  1120.                                     <a href="#">
  1121.                                         <div class="figure"><img src="image/ry5.webp" alt=""></div>
  1122.                                         <h3 class="title">米家自动洗手机套装</h3>
  1123.                                         <p class="desc">伸手出泡，抑菌有效</p>
  1124.                                         <p class="price">69元</p>
  1125.                                     </a>
  1126.                                 </li>
  1127.                                 <li class="brick-item">
  1128.                                     <a href="#">
  1129.                                         <div class="figure"><img src="image/ry6.webp" alt=""></div>
  1130.                                         <h3 class="title">
  1131.                                             米家电动冲牙器
  1132.                                         </h3>
  1133.                                         <p class="desc">超长待机丨4挡模式</p>
  1134.                                         <p class="price">199元</p>
  1135.                                     </a>
  1136.                                 </li>
  1137.                                 <li class="brick-item">
  1138.                                     <a href="#">
  1139.                                         <div class="figure"><img src="image/ry7.webp" alt=""></div>
  1140.                                         <h3 class="title">
  1141.                                             米家声波电动牙刷T500
  1142.                                         </h3>
  1143.                                         <p class="desc">过压提醒丨健康报告</p>
  1144.                                         <p class="price">169元</p>
  1145.                                     </a>
  1146.                                 </li>
  1147.                                 <li class="brick-item">
  1148.                                     <a href="#">
  1149.                                         <div class="figure"><img src="image/ry8.webp" alt=""></div>
  1150.                                         <h3 class="title">
  1152.                                             米家电子体温计
  1154.                                         </h3>
  1155.                                         <p class="desc">快速知体温，精准更智能</p>
  1156.                                         <p class="price">99元</p>
  1157.                                     </a>
  1158.                                 </li>
  1159.                                 <li class="brick-item item-more">
  1160.                                     <a href="#">
  1161.                                         <div class="figure figure-more pic"><img src="image/ry9.webp" alt=""></div>
  1162.                                         <div class="lot">
  1163.                                             米家自动香氛
  1164.                                             <br> 机套装
  1165.                                             <!-- <small>23.8英寸</small> -->
  1166.                                             <small class="price">89元</small>
  1167.                                         </div>
  1168.                                     </a>
  1169.                                 </li>
  1170.                                 <li class="brick-item item-more">
  1171.                                     <a href="#">
  1172.                                         <div class="figure figure-more"><img src="image/liulan.png" alt=""></div>
  1173.                                         <div class="lot">
  1174.                                             浏览更多
  1175.                                             <small>热门</small>
  1176.                                         </div>
  1177.                                     </a>
  1178.                                 </li>
  1179.                             </ul>
  1180.                         </div>
  1181.                     </div>
  1182.                 </div>
  1183.             </div>
  1185.             <!-- 10 -->
  1186.             <div class="video">
  1187.                 <div class="box-hd">
  1188.                     <h2 class="title">视频</h2>
  1189.                     <div class="more">
  1190.                         <a href="#">查看全部</a>
  1191.                         <i class="rt iconfont">></i>
  1192.                     </div>
  1193.                 </div>
  1194.                 <div class="box-bd clearfix">
  1195.                     <ul class="video-list">
  1196.                         <li class="video-item">
  1197.                             <a href="#" title="点击播放视频">
  1198.                                 <div class="figure">
  1199.                                     <img width="296" height="180" src="image/sp1.png" alt="2021年新品发布会第一场">
  1200.                                     <span class="play"><i class="iconfont-play"></i></span>
  1201.                                     <h3>2021年新品发布会第一场</h3>
  1202.                                     <p></p>
  1203.                                 </div>
  1204.                             </a>
  1205.                         </li>
  1207.                         <li class="video-item">
  1208.                             <a href="#">
  1209.                                 <div class="figure">
  1210.                                     <img width="296" height="180" src="image/sp2.png" alt="2021年新品发布会第一场">
  1211.                                     <span class="play"><i class="iconfont-play"></i></span>
  1212.                                     <h3>Remin 10X系列发布会</h3>
  1213.                                     <small>Remin 10X系列发布会</small>
  1214.                                 </div>
  1215.                             </a>
  1216.                         </li>
  1218.                         <li class="video-item">
  1219.                             <a href="#">
  1220.                                 <div class="figure">
  1221.                                     <img width="296" height="180" src="image/sp3.png" alt="2021年新品发布会第一场">
  1222.                                     <span class="play"><i class="iconfont-play"></i></span>
  1223.                                     <h3>小米10 青春版 发布会</h3>
  1224.                                     <p></p>
  1225.                                 </div>
  1226.                             </a>
  1227.                         </li>
  1229.                         <li class="video-item">
  1230.                             <a href="#">
  1231.                                 <div class="figure">
  1232.                                     <img width="296" height="180" src="image/sp4.png" alt="2021年新品发布会第一场">
  1233.                                     <span class="play"><i class="iconfont-play"></i></span>
  1234.                                     <h3>小米10 8K手机拍大片</h3>
  1235.                                     <p></p>
  1236.                                 </div>
  1237.                             </a>
  1238.                         </li>
  1239.                     </ul>
  1240.                 </div>
  1241.             </div>
  1242.         </div>
  1243.     </div>
  1244.     <!-- mainover -->
  1246.     <!-- footer -->
  1247.     <div class="footer">
  1248.         <div class="w">
  1249.             <div class="footer-serves">
  1250.                 <ul class="list-service">
  1251.                     <li>
  1252.                         <a href="#">
  1253.                             <img width="24" height="24" src="image/footer1.png" alt=""> 预约维修服务
  1254.                         </a>
  1255.                     </li>
  1256.                     <li>
  1257.                         <a href="#">
  1258.                             <img width="24" height="24" src="image/footer2.png" alt=""> 7天无理由退货
  1259.                         </a>
  1260.                     </li>
  1261.                     <li>
  1262.                         <a href="#">
  1263.                             <img width="24" height="24" src="image/footer3.png" alt=""> 15天免费换货
  1264.                         </a>
  1265.                     </li>
  1266.                     <li>
  1267.                         <a href="#">
  1268.                             <img width="24" height="24" src="image/footer4.png" alt=""> 满69元包邮
  1269.                         </a>
  1270.                     </li>
  1271.                     <li>
  1272.                         <a href="#">
  1273.                             <img width="24" height="24" src="image/footer5.png" alt=""> 1100余家售后网点
  1274.                         </a>
  1275.                     </li>
  1276.                 </ul>
  1277.             </div>
  1278.             <div class="footer-links w">
  1279.                 <dl class="col-link first">
  1280.                     <dt> </dt>
  1281.                 </dl>
  1282.                 <dl class="col-link">
  1283.                     <dt>选购指南</dt>
  1284.                     <dd><a href="#">手机</a></dd>
  1285.                     <dd><a href="#">电视</a></dd>
  1286.                     <dd><a href="#">笔记本</a></dd>
  1287.                     <dd><a href="#">平板</a></dd>
  1288.                     <dd><a href="#">穿戴</a></dd>
  1289.                     <dd><a href="#">耳机</a></dd>
  1290.                     <dd><a href="#">家电</a></dd>
  1291.                     <dd><a href="#">路由器</a></dd>
  1292.                     <dd><a href="#">音箱</a></dd>
  1293.                     <dd><a href="#">配件</a></dd>
  1294.                 </dl>
  1295.                 <dl class="col-link">
  1296.                     <dt>服务中心</dt>
  1297.                     <dd><a href="#">申请售后</a></dd>
  1298.                     <dd><a href="#">售后政策</a></dd>
  1299.                     <dd><a href="#">维修服务价格</a></dd>
  1300.                     <dd><a href="#">订单查询</a></dd>
  1301.                     <dd><a href="#">以旧换新</a></dd>
  1302.                     <dd><a href="#">服务保障</a></dd>
  1303.                     <dd><a href="#">防伪查询</a></dd>
  1304.                     <dd><a href="#">F码通道</a></dd>
  1305.                 </dl>
  1306.                 <dl class="col-link">
  1307.                     <dt>线下门店</dt>
  1308.                     <dd><a href="#">小米之家</a></dd>
  1309.                     <dd><a href="#">服务网点</a></dd>
  1310.                     <dd><a href="#">授权体验店/专区</a></dd>
  1311.                 </dl>
  1312.                 <dl class="col-link">
  1313.                     <dt>关于小米</dt>
  1314.                     <dd><a href="#">了解小米</a></dd>
  1315.                     <dd><a href="#">加入小米</a></dd>
  1316.                     <dd><a href="#">投资者关系</a></dd>
  1317.                     <dd><a href="#">企业社会责任</a></dd>
  1318.                     <dd><a href="#">廉洁举报</a></dd>
  1319.                 </dl>
  1320.                 <dl class="col-link">
  1321.                     <dt>关注我们</dt>
  1322.                     <dd><a href="#">新浪微博</a></dd>
  1323.                     <dd><a href="#">官方微信</a></dd>
  1324.                     <dd><a href="#">联系我们</a></dd>
  1325.                     <dd><a href="#">公益基金会</a></dd>
  1326.                 </dl>
  1327.                 <div class="col-contant">
  1328.                     <p class="phone">400-100-5678</p>
  1329.                     <p>8:00-18:00 (仅收市话费)</p>
  1330.                     <a class="btn-small" href="#">
  1331.                         <em></em> 人工客服
  1332.                     </a>
  1333.                 </div>
  1334.             </div>
  1335.         </div>
  1336.     </div>
  1337.     <!-- footerover -->
  1339.     <!-- infostart -->
  1340.     <div class="info">
  1341.         <div class="w">
  1342.             <div class="logo ir"><img src="image/logo.png" alt=""></div>
  1343.             <div class="info-text">
  1344.                 <p class="sites">
  1345.                     <a href="#">小米商城</a>
  1346.                     <span>|</span>
  1347.                     <a href="#">MIUI</a>
  1348.                     <span>|</span>
  1349.                     <a href="#">米家</a>
  1350.                     <span>|</span>
  1351.                     <a href="#">米聊</a>
  1352.                     <span>|</span>
  1353.                     <a href="#">多看</a>
  1354.                     <span>|</span>
  1355.                     <a href="#">游戏</a>
  1356.                     <span>|</span>
  1357.                     <a href="#">政企服务</a>
  1358.                     <span>|</span>
  1359.                     <a href="#">小米天猫店</a>
  1360.                     <span>|</span>
  1361.                     <a href="#">小米集团隐私政策</a>
  1362.                     <span>|</span>
  1363.                     <a href="#">小米公司儿童信息保护规则</a>
  1364.                     <span>|</span>
  1365.                     <a href="#">小米商城隐私政策</a>
  1366.                     <span>|</span>
  1367.                     <a href="#">小米商城用户协议</a>
  1368.                     <span>|</span>
  1369.                     <a href="#">问题反馈</a>
  1370.                     <span>|</span>
  1371.                     <a href="#">Select Location</a>
  1372.                     <span>|</span>
  1373.                 </p>
  1374.                 <p class="sites">
  1375.                     <a href="#">北京互联网法院法律服务工作站</a>
  1376.                     <span>|</span>
  1377.                     <a href="#">北京互联网法院法律服务工作站</a>
  1378.                     <span>|</span>
  1379.                     <a href="#">北京互联网法院法律服务工作站</a>
  1380.                     <span>|</span>
  1381.                 </p>
  1382.                 <p class="sites">
  1383.                     ©
  1384.                     <a href="#">mi.com</a> 京ICP证110507号
  1385.                     <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a>
  1386.                     <a rel="nofollow" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134" target="_blank">京公网安备11010802020134号</a>
  1387.                     <a href="//www.mi.com/culture-license/" target="_blank">京网文[2020]0276-042号</a>
  1388.                     <br>
  1389.                     <a href="//www.mi.com/medical/record/" target="_blank">（京）网械平台备字（2018）第00005号</a>
  1390.                     <a href="//www.mi.com/medical/qualification/" target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
  1391.                     <a href="//www.mi.com/business-license/" target="_blank">营业执照</a>
  1392.                     <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a>
  1393.                     <br>
  1394.                     <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png" target="_blank">增值电信业务许可证</a> &nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
  1395.                     <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png" target="_blank">食品经营许可证</a>
  1396.                     <br> "违法和不良信息举报电话：171-5104-4404&nbsp;"
  1397.                     <a href="https://www.mi.com/intellectual" target="_blank">知识产权侵权投诉</a> &nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
  1398.                 </p>
  1399.             </div>
  1400.             <div class="info-links">
  1401.                 <a href="#">
  1402.                     <img src="image/truste.png" alt="">
  1403.                 </a>
  1404.                 <a href="#">
  1405.                     <img src="image/v-logo-2.png" alt="">
  1406.                 </a>
  1407.                 <a href="#">
  1408.                     <img src="image/icon3.png" alt="">
  1409.                 </a>
  1410.                 <a href="#">
  1411.                     <img src="image/icon4.png" alt="">
  1412.                 </a>
  1413.                 <a href="#">
  1414.                     <img src="image/icon5.png" alt="">
  1415.                 </a>
  1416.             </div>
  1417.         </div>
  1418.     </div>
  1421.     <div class="slogan ir w">
  1422.         <!-- 探索黑科技，小米为发烧而生 -->
  1423.         <img src="image/slogan2020.png" alt="">
  1424.     </div>
  1425.     <!-- info over -->
  1427.     <div class="bar">
  1428.         <a href="">
  1429.             <div class="icon">
  1430.                 <img src="image/bar1.png" alt="">
  1431.             </div>
  1432.             <span class="text">手机APP</span>
  1433.             <div class="popcontent"></div>
  1434.         </a>
  1435.         <a href="">
  1436.             <div class="icon">
  1437.                 <img src="image/bar2.png" alt="">
  1438.             </div>
  1439.             <span class="text">售后服务</span>
  1440.             <div class="popcontent"></div>
  1441.         </a>
  1442.         <a href="">
  1443.             <div class="icon">
  1444.                 <img src="image/bar3.png" alt="">
  1445.             </div>
  1446.             <span class="text">人工服务</span>
  1447.             <div class="popcontent"></div>
  1448.         </a>
  1449.         <a href="">
  1450.             <div class="icon">
  1451.                 <img src="image/bar4.png" alt="">
  1452.             </div>
  1453.             <span class="text">购物车</span>
  1454.             <div class="popcontent"></div>
  1455.         </a>
  1456.         <a href="">
  1457.             <div class="icon">
  1458.                 <img src="image/bar5.png" alt="">
  1459.             </div>
  1460.             <span class="text">回顶部</span>
  1461.             <div class="popcontent"></div>
  1462.         </a>
  1463.     </div>
  1464. </body>
  1466. </html>

CSS

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. .w {
  7.     width: 1226px;
  8.     margin: 0 auto;
  9. }
  10.  
  11. a {
  12.     text-decoration: none;
  13.     color: #000;
  14. }
  15.  
  16. li {
  17.     list-style: none;
  18. }
  19.  
  20. .nav {
  21.     height: 40px;
  22.     background-color: #333;
  23. }
  24.  
  25. .container {
  26.     height: 20px;
  27.     border-bottom: 1px;
  28.     line-height: 20px;
  29.     padding: 10px;
  30. }
  31.  
  32. .nav a {
  33.     padding: 0 5px;
  34.     display: inline-block;
  35.     height: 20px;
  36.     font-size: 12px;
  37.     color: #b0b0b0;
  38.     text-decoration: none;
  39. }
  40.  
  41. .nav a:hover {
  42.     color: #fff;
  43. }
  44.  
  45. .left {
  46.     float: left;
  47. }
  48.  
  49. .middle {
  50.     float: right;
  51.     padding-right: 30px;
  52. }
  53.  
  54. .right {
  55.     float: right;
  56. }
  57.  
  58. .header {
  59.     height: 100px;
  60.     /* background-color: skyblue; */
  61.     /* 注意此地方会层叠w里面的margin */
  62.     margin: 15px, auto;
  63. }
  64.  
  65. .logo {
  66.     width: 100%;
  67.     float: left;
  68.     width: 56px;
  69.     height: 56px;
  70.     /* background-color: purple; */
  71.     text-align: center;
  72.     line-height: 56px;
  73.     padding-top: 17px;
  74. }
  75.  
  76. .navv {
  77.     margin-left: 150px;
  78.     float: left;
  79. }
  80.  
  81. .navv ul li {
  82.     float: left;
  83. }
  84.  
  85. .navv ul li a {
  86.     display: block;
  87.     height: 56px;
  88.     padding: 26px 10px;
  89.     line-height: 56px;
  90.     font-size: 16px;
  91.     color: #050505;
  92. }
  93.  
  94. .navv ul li a:hover {
  95.     color: #ff6a00;
  96. }
  97.  
  98.  
  99. /* search搜索模块 */
  100.  
  101. .search {
  102.     float: right;
  103.     width: 350px;
  104.     height: 56px;
  105.     /* background-color: skyblue; */
  106.     margin-left: 20px;
  107.     padding-left: 10px;
  108. }
  109.  
  110. .search input {
  111.     float: right;
  112.     width: 200px;
  113.     height: 40px;
  114.     border: 1px solid #e0e0e0;
  115.     border-right: 0;
  116.     color: #e0e0e0;
  117.     font-size: 16px;
  118.     /* padding-top: 17px; */
  119.     margin-top: 32px;
  120. }
  121.  
  122. .search button {
  123.     float: right;
  124.     width: 50px;
  125.     height: 42px;
  126.     /* background-color: blue; */
  127.     margin-top: 32px;
  128.     /* 按钮默认有个边框 需要我们手动去除*/
  129.     background: url(image/buto.png);
  130. }
  131.  
  132.  
  133. /* banner区域 */
  134.  
  135. .banner {
  136.     margin-top: 10px;
  137.     height: 420px;
  138. }
  139.  
  140. .banner .w {
  141.     height: 420px;
  142.     /* background: url(image/jiaodian.jpg); */
  143. }
  144.  
  145. .banner .cebianlan {
  146.     padding: 10px 0;
  147.     float: left;
  148.     width: 200px;
  149.     height: 380px;
  150.     background-color: rgba(105, 101, 101, .6);
  151. }
  152.  
  153. .cebianlan ul li {
  154.     /* float: left; */
  155.     width: 200px;
  156.     height: 40px;
  157. }
  158.  
  159. .cebianlan ul li a {
  160.     font-size: 14px;
  161.     color: #fff;
  162.     padding-left: 30px;
  163. }
  164.  
  165. .cebianlan ul li a span {
  166.     float: right;
  167.     padding-right: 20px;
  168. }
  169.  
  170. .cebianlan ul li a:hover {
  171.     background-color: #ff6a00;
  172. }
  173.  
  174.  
  175. /* .banner .w a {
  176.     display: block;
  177.     width: 200px;
  178.     height: 40px;
  179.     background-color: #a5a3a3;
  180.     font-size: 14px;
  181.     color: #fff;
  182.     line-height: 40px;
  183.     padding-left: 30px;
  184. } */
  185.  
  186.  
  187. /* .banner .w a:hover {
  188.     background-color: #ff6700;
  189. } */
  190.  
  191. .tu {
  192.     position: relative;
  193.     float: right;
  194.     width: 1026px;
  195.     height: 400px;
  196. }
  197.  
  198. .prev {
  199.     position: absolute;
  200.     left: 0;
  201.     /* 绝对定位的盒子垂直居中 */
  202.     top: 50%;
  203.     margin-top: -15px;
  204.     color: #e1e1e1;
  205.     /* 加了绝对定位的盒子可以直接设置高度和宽度 */
  206.     width: 20px;
  207.     height: 30px;
  208.     background-color: rgb(0, 0, 0, .7);
  209.     text-align: center;
  210. }
  211.  
  212. .next {
  213.     position: absolute;
  214.     right: 0;
  215.     /* 绝对定位的盒子垂直居中 */
  216.     top: 50%;
  217.     margin-top: -15px;
  218.     color: #e1e1e1;
  219.     /* 加了绝对定位的盒子可以直接设置高度和宽度 */
  220.     width: 20px;
  221.     height: 30px;
  222.     background-color: rgb(0, 0, 0, .7);
  223.     text-align: center;
  224. }
  225.  
  226. .promo-nav {
  227.     position: absolute;
  228.     bottom: 10px;
  229.     right: 0;
  230.     width: 70px;
  231.     height: 13px;
  232.     /* background-color: pink; */
  233. }
  234.  
  235. .promo-nav li {
  236.     float: left;
  237.     border-radius: 50%;
  238.     width: 8px;
  239.     height: 8px;
  240.     background-color: #949494;
  241.     margin: 3px;
  242. }
  243.  
  244.  
  245. /* 不要忘记选择器权重问题 */
  246.  
  247. .promo-nav .selected {
  248.     background-color: #fafafa;
  249. }
  250.  
  251. .banner .w img {
  252.     /* float: right; */
  253.     width: 100%;
  254.     height: 400px;
  255. }
  256.  
  257.  
  258. /* .sub-row 开始 */
  259.  
  260. .sub_row {
  261.     height: 200px;
  262.     padding: 3px;
  263.     list-style-type: none;
  264.     font-size: 12px;
  265. }
  266.  
  267. .sub_row .span1 {
  268.     background: #5f5750;
  269.     text-align: center;
  270. }
  271.  
  272. .span1 {
  273.     float: left;
  274.     width: 200px;
  275.     height: 150px;
  276. }
  277.  
  278. .span1 li {
  279.     float: left;
  280.     /* width: 60px; */
  281.     height: 82px;
  282.     padding-left: 15px;
  283. }
  284.  
  285. .span1 a {
  286.     display: block;
  287.     padding-top: 10px;
  288.     color: #fff;
  289. }
  290.  
  291. .span1 img {
  292.     display: block;
  293.     width: 24px;
  294.     height: 24px;
  295.     margin: 0 auto;
  296. }
  297.  
  298. .span2 {
  299.     float: left;
  300.     width: 1026px;
  301.     height: 150px;
  302. }
  303.  
  304. .span2 li {
  305.     float: left;
  306.     padding-left: 20px;
  307. }
  308.  
  309. .span2 li img {
  310.     width: 322px;
  311.     height: 150px;
  312. }
  313.  
  314. .main {
  315.     margin-top: 10px;
  316.     height: 6960px;
  317.     background-color: #f5f5f5;
  318. }
  319.  
  320. .banner-box img {
  321.     width: 100%;
  322. }
  323.  
  324. .main .w {
  325.     height: 6960px;
  326. }
  327.  
  328. .box-hd {
  329.     /* font-weight: 200; */
  330.     margin-top: 10px;
  331.     height: 30px;
  332. }
  333.  
  334. .box-hd .title {
  335.     font-size: 22px;
  336.     font-weight: 200;
  337. }
  338.  
  339. .tab-list a {
  340.     font-size: 16px;
  341. }
  342.  
  343. .tab-list .zuo {
  344.     color: #ff6a00;
  345.     text-decoration: underline;
  346. }
  347.  
  348. .tab-list a:hover {
  349.     color: #ff6a00;
  350.     text-decoration: underline;
  351. }
  352.  
  353. .tab-list li {
  354.     display: inline-block;
  355.     padding-left: 30px;
  356.     /* width: 50px; */
  357. }
  358.  
  359. .iconfont {
  360.     width: 12px;
  361.     height: 12px;
  362.     padding: 4px;
  363.     margin-left: 8px;
  364.     border-radius: 16px;
  365.     font-size: 12px;
  366.     line-height: 12px;
  367.     background: #b0b0b0;
  368.     color: #fff;
  369.     vertical-align: 1px;
  370. }
  371.  
  372. .phd {
  373.     height: 30px;
  374. }
  375.  
  376. .title {
  377.     float: left;
  378. }
  379.  
  380. .more {
  381.     float: right;
  382.     height: 30px;
  383.     line-height: 30px;
  384.     font-size: 14px;
  385.     color: #000;
  386. }
  387.  
  388.  
  389. /* .box-hd .more .tab-list {} */
  390.  
  391. .box-bd {
  392.     /* position: relative; */
  393.     margin-top: 10px;
  394.     height: 645px;
  395. }
  396.  
  397.  
  398. /* .box-hd .more {
  399.     position: absolute;
  400.     top: 0;
  401.     right: 0;
  402. }
  404. .box-hd .more .tab-list {
  405.     margin: 0;
  406.     padding: 16px 0 0;
  407.     font-size: 16px;
  408. } */
  409.  
  410. .box-bd .rww .span4 ul li {
  411.     float: left;
  412.     /* margin-bottom: 10px; */
  413.     /* padding-bottom: 10px; */
  414.     /* background-color: #fff; */
  415.     /* background-color: pink; */
  416. }
  417.  
  418. .brick-list {
  419.     margin-top: 0;
  420. }
  421.  
  422. .brick-item {
  423.     float: left;
  424.     height: 300px;
  425.     width: 230px;
  426.     font-weight: 400;
  427.     background-color: #fff;
  428.     margin-left: 26px;
  429.     margin-top: 10px;
  430.     text-align: center;
  431.     padding-top: 10px;
  432.     /* text-align: center; */
  433. }
  434.  
  435. .brick-item .figure .pic {
  436.     width: 80px;
  437.     height: 80px;
  438. }
  439.  
  440. .box-bd .rww .span4 ul li img {
  441.     margin-top: 10px;
  442.     width: 200px;
  443.     height: 630px;
  444. }
  445.  
  446. .brick-item .figure img {
  447.     width: 160px;
  448.     height: 160px;
  449. }
  450.  
  451.  
  452. /* .brick-item-m {
  453.     height: 150px;
  454. } */
  455.  
  456. .price {
  457.     text-align: center;
  458.     font-size: 14px;
  459. }
  460.  
  461. .not {
  462.     display: inline-block;
  463. }
  464.  
  465. .brick-item .money del {
  466.     color: #b0b0b0;
  467. }
  468.  
  469. .money {
  470.     text-align: center;
  471. }
  472.  
  473. .item-more {
  474.     height: 140px;
  475. }
  476.  
  477. .item-more .lot {
  478.     padding-top: 50px;
  479.     padding-left: 0;
  480. }
  481.  
  482. .item-more .lot small {
  483.     display: block;
  484. }
  485.  
  486. .figure-more {
  487.     float: right;
  488.     padding-top: 50px;
  489.     padding-right: 30px;
  490. }
  491.  
  492. .brick-item .figure-more img {
  493.     width: 48px;
  494.     height: 48px;
  495. }
  496.  
  497. .brick-list {
  498.     height: 300px;
  499.     padding-left: 20px;
  500. }
  501.  
  502. .brick-item .title {
  503.     height: 25px;
  504.     width: 100%;
  505.     font-size: 14px;
  506.     font-weight: 400;
  507.     /* padding: 0 20px; */
  508.     margin-top: 20px;
  509.     text-align: center;
  510. }
  511.  
  512. .brick-item .desc {
  513.     height: 30px;
  514.     font-size: 12px;
  515.     color: #b0b0b0;
  516.     margin-top: 40px;
  517. }
  518.  
  519. .brick-item .price {
  520.     font-size: 14xp;
  521.     color: #ff6a00;
  522.     margin-top: 10px;
  523. }
  524.  
  525.  
  526. /* .video-list {
  527.     height: 285px;
  528. } */
  529.  
  530. .video-item {
  531.     height: 260px;
  532.     display: block;
  533.     float: left;
  534.     /* width: 296px;
  535.     height: 285px; */
  536.     margin-left: 10px;
  537.     background-color: #fff;
  538. }
  539.  
  540.  
  541. /* .play {
  542.     position: absolute;
  543.     left: 20px;
  544.     bottom: 10px;
  545.     width: 32px;
  546.     height: 20px;
  547.     border: 2px solid #fff;
  548.     border-radius: 12px;
  549.     /* background-color: #424242; */
  550.  
  551.  
  552. /* background-color: rgba(0, 0, 0, .6);
  553.     color: #fff; */
  554.  
  555.  
  556. /* -webkit-transition: all .2s; */
  557.  
  558.  
  559. /* transition: all .2s;
  560.     overflow: hidden; */
  561.  
  562. .figure h3 {
  563.     margin-top: 20px;
  564.     text-align: center;
  565.     font-size: 14px;
  566.     font-weight: 400;
  567. }
  568.  
  569. .video .box-bd {
  570.     margin-top: 10px;
  571.     height: 280px;
  572. }
  573.  
  574. .video-list small {
  575.     display: block;
  576.     width: 100%;
  577.     text-align: center;
  578.     font-size: 12px;
  579.     color: #b0b0b0;
  580. }
  581.  
  582. .footer-serves {
  583.     margin-top: 10px;
  584.     height: 30px;
  585.     border-bottom: 1px solid #e0e0e0;
  586. }
  587.  
  588. .list-service {
  589.     display: block;
  590. }
  591.  
  592. .list-service li {
  593.     float: left;
  594.     width: 19.8%;
  595.     height: 25px;
  596.     font-size: 16px;
  597.     line-height: 25px;
  598.     text-align: center;
  599. }
  600.  
  601. .footer-links {
  602.     height: 380px;
  603. }
  604.  
  605. .footer-links .first {
  606.     width: 160px;
  607. }
  608.  
  609. dl {
  610.     display: block;
  611.     width: 160px;
  612.     margin: 0;
  613. }
  614.  
  615. dt {
  616.     display: block;
  617.     margin: 26px 0 26px;
  618.     font-size: 14px;
  619.     line-height: 1.25;
  620.     color: #424242;
  621. }
  622.  
  623. dd {
  624.     display: block;
  625.     margin: 10px 0;
  626.     font-size: 12px;
  627.     color: #f5f5f5;
  628. }
  629.  
  630. dd a {
  631.     color: #616161;
  632. }
  633.  
  634. .col-link {
  635.     float: left;
  636.     width: 160px;
  637.     height: 28px;
  638. }
  639.  
  640. .footer-links dl {
  641.     width: 160px;
  642. }
  643.  
  644. .col-contant {
  645.     float: right;
  646.     width: 251px;
  647.     border-left: 1px solid #e0e0e0;
  648.     text-align: center;
  649.     color: #616161;
  650. }
  651.  
  652. .col-contant .phone {
  653.     font-size: 22px;
  654.     line-height: 1;
  655.     color: #ff6700;
  656. }
  657.  
  658. .col-contant p {
  659.     margin: 0 0 5px 0;
  660.     font-size: 12px;
  661. }
  662.  
  663. .btn-small {
  664.     border: 1px solid #ff6700;
  665.     /* border-color: ; */
  666.     background-color: #fff;
  667.     color: #ff6700;
  668.     width: 118px;
  669.     height: 28px;
  670.     font-size: 12px;
  671.     line-height: 28px;
  672. }
  673.  
  674. .bar {
  675.     text-align: center;
  676.     position: fixed;
  677.     top: 70px;
  678.     right: 0;
  679.     z-index: 99;
  680. }
  681.  
  682. .bar a {
  683.     display: block;
  684.     padding: 10px 0;
  685. }
  686.  
  687. .bar img {
  688.     /* position: absolute;
  689.     bottom: 0;
  690.     left: 0; */
  691.     width: 30px;
  692.     height: 30px;
  693. }
  694.  
  695. .bar span {
  696.     font-size: 14px;
  697.     color: #757575;
  698. }
  699.  
  700. .info {
  701.     height: 150px;
  702.     padding: 30px 0;
  703.     font-size: 12px;
  704.     background-color: #fafafa;
  705. }
  706.  
  707. .info .logo {
  708.     width: 28px;
  709.     height: 28px;
  710. }
  711.  
  712. .info .info-text {
  713.     color: #b0b0b0;
  714.     padding-left: 77px;
  715. }
  716.  
  717. .info .info-text .sites a {
  718.     color: #757575;
  719. }
  720.  
  721. .info .info-links {
  722.     height: 28px;
  723.     margin: 4px 0 15px;
  724.     padding-left: 77px;
  725. }
  726.  
  727. .info .info-links a {
  728.     display: inline-block;
  729. }
  730.  
  731. .info .info-links img {
  732.     width: auto;
  733.     height: 28px;
  734.     margin-left: 0;
  735. }
  736.  
  737. .slogan {
  738.     text-align: center;
  739. }

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

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

  

闽ICP备14008679号