devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS+HTML静态网页——小米官网（附源代码）_小米商城html免费源码

作者：我家自动化 | 2024-04-02 19:51:26

赞

踩

小米商城html免费源码

效果图如图所示 ： 

html代码：

  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  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>Document</title>
  9.     <link rel="shortcut icon" href="/fonts/" />
  10.     <link rel="stylesheet" href="css/reset.css">
  11.     <link rel="stylesheet" href="css/style.css">
  12.     <link rel="stylesheet" href="css/common.css">
  13. </head>
  14. <body>
  15.     <!-- 广告  s-->
  16.     <div class="ad_top">
  17.         <img src="images/ad_top.jpg" alt="">
  18.     </div>
  19.     <!-- 广告 e -->
  20.  
  21.     <!-- 导航栏 s -->
  22.     <div class="nav">
  23.         <div class=" w">
  24.             <div class="nav_l">
  25.                 <ul>
  26.                     <li><a href="javascript:;">小米商城</a><span>|</span></li>
  27.                     <li><a href="javascript:;">MIUI</a><span>|</span></li>
  28.                     <li><a href="javascript:;">loT</a><span>|</span></li>
  29.                     <li><a href="javascript:;">云服务</a><span>|</span></li>
  30.                     <li><a href="javascript:;">金融</a><span>|</span></li>
  31.                     <li><a href="javascript:;">有品</a><span>|</span></li>
  32.                     <li><a href="javascript:;">小爱开放平台</a><span>|</span></li>
  33.                     <li><a href="javascript:;">企业团购</a><span>|</span></li>
  34.                     <li><a href="javascript:;">资质证照</a><span>|</span></li>
  35.                     <li><a href="javascript:;">协议规则</a><span>|</span></li>
  36.                     <li>
  37.                         <a href="javascript:;">下载app</a>
  38.                         <span>|</span>
  39.                         <div class="download">
  40.                             <img src="images/erweima.png" alt="">
  41.                             <p>小米商城APP</p>
  42.                         </div>
  43.                     </li>
  44.                     <li><a href="javascript:;">SelectLoaction</a></li>
  45.  
  46.  
  47.                 </ul>
  48.             </div>
  49.             <div class="nav_r">
  50.                 <ul>
  51.                     <li><a href="#">登录</a><span>|</span></li>
  52.                     <li><a href="#">注册</a><span>|</span></li>
  53.                     <li><a href="#">消息通知</a></li>
  54.                     <li class="cart">
  55.                     <a href="#">购物车(0)</a>
  56.                     <div class="c_list">购物车中还没有商品，赶紧选购吧！</div>
  57.                 </li>
  58.                 </ul>
  59.                 
  60.             </div>
  61.         </div>
  62.     </div>
  63.     <!-- 导航栏 e -->
  64.  
  65.     <!-- 导航2 s -->
  66.     <div class="t_nav">
  67.         <div class="w">
  68.             <div class="logo ">
  69.                 <div class="logo_box">
  70.                     <a href="javascript:;">
  71.                         <img src="images/logo.png" alt="" class="mi">
  72.                         <img src="images/logo2.png" alt="" class="house">
  73.                     </a>
  74.                 </div>
  75.             </div>
  76.             <div class="t_nav_list ">
  77.                 <ul>
  78.                     <li>
  79.                         <a href="javascript:;">小米手机</a>
  80.                         <div class="p_style">
  81.                             <div class="w">
  82.                                 <ul>
  83.                                 <li>
  84.                                     <a href="#">
  85.                                         <div class="img_box">
  86.                                             <img src="images/phone1.png" alt="">
  87.                                         </div>
  88.                                         <p class="img_box_name">小米10</p>
  89.                                         <p class="img_box_price">4999元起</p>
  90.                                     </a>
  91.                                 </li>
  92.                                 <li>
  93.                                     <a href="#">
  94.                                         <div class="img_box">
  95.                                             <img src="images/phone1.png" alt="">
  96.                                         </div>
  97.                                         <p class="img_box_name">小米10</p>
  98.                                         <p class="img_box_price">4999元起</p>
  99.                                     </a>
  100.                                 </li>
  101.                                 <li>
  102.                                     <a href="#">
  103.                                         <div class="img_box">
  104.                                             <img src="images/phone1.png" alt="">
  105.                                         </div>
  106.                                         <p class="img_box_name">小米10</p>
  107.                                         <p class="img_box_price">4999元起</p>
  108.                                     </a>
  109.                                 </li>
  110.                                 <li>
  111.                                     <a href="#">
  112.                                         <div class="img_box">
  113.                                             <img src="images/phone1.png" alt="">
  114.                                         </div>
  115.                                         <p class="img_box_name">小米10</p>
  116.                                         <p class="img_box_price">4999元起</p>
  117.                                     </a>
  118.                                 </li>
  119.                                 <li>
  120.                                     <a href="#">
  121.                                         <div class="img_box">
  122.                                             <img src="images/phone1.png" alt="">
  123.                                         </div>
  124.                                         <p class="img_box_name">小米10</p>
  125.                                         <p class="img_box_price">4999元起</p>
  126.                                     </a>
  127.                                 </li>
  128.                                 <li>
  129.                                     <a href="#">
  130.                                         <div class="img_box">
  131.                                             <img src="images/phone1.png" alt="">
  132.                                         </div>
  133.                                         <p class="img_box_name">小米10</p>
  134.                                         <p class="img_box_price">4999元起</p>
  135.                                     </a>
  136.                                 </li>
  137.                                 </ul>  
  138.                             </div>    
  139.                         </div>
  140.                     </li>
  141.                     <li>
  142.                         <a href="javascript:;">Redmi红米</a>
  143.                         <div class="p_style">
  144.                             <div class="w">
  145.                                 <ul>
  146.                                 <li>
  147.                                     <a href="#">
  148.                                         <div class="img_box">
  149.                                             <img src="images/phone2.jpg" alt="">
  150.                                         </div>
  151.                                         <p class="img_box_name">小米10</p>
  152.                                         <p class="img_box_price">4999元起</p>
  153.                                     </a>
  154.                                 </li>
  155.                                 <li>
  156.                                     <a href="#">
  157.                                         <div class="img_box">
  158.                                             <img src="images/phone1.png" alt="">
  159.                                         </div>
  160.                                         <p class="img_box_name">小米10</p>
  161.                                         <p class="img_box_price">4999元起</p>
  162.                                     </a>
  163.                                 </li>
  164.                                 <li>
  165.                                     <a href="#">
  166.                                         <div class="img_box">
  167.                                             <img src="images/phone1.png" alt="">
  168.                                         </div>
  169.                                         <p class="img_box_name">小米10</p>
  170.                                         <p class="img_box_price">4999元起</p>
  171.                                     </a>
  172.                                 </li>
  173.                                 <li>
  174.                                     <a href="#">
  175.                                         <div class="img_box">
  176.                                             <img src="images/phone1.png" alt="">
  177.                                         </div>
  178.                                         <p class="img_box_name">小米10</p>
  179.                                         <p class="img_box_price">4999元起</p>
  180.                                     </a>
  181.                                 </li>
  182.                                 <li>
  183.                                     <a href="#">
  184.                                         <div class="img_box">
  185.                                             <img src="images/phone1.png" alt="">
  186.                                         </div>
  187.                                         <p class="img_box_name">小米10</p>
  188.                                         <p class="img_box_price">4999元起</p>
  189.                                     </a>
  190.                                 </li>
  191.                                 <li>
  192.                                     <a href="#">
  193.                                         <div class="img_box">
  194.                                             <img src="images/phone1.png" alt="">
  195.                                         </div>
  196.                                         <p class="img_box_name">小米10</p>
  197.                                         <p class="img_box_price">4999元起</p>
  198.                                     </a>
  199.                                 </li>
  200.                                 </ul>  
  201.                             </div>    
  202.                         </div>
  203.                     </li>
  204.                     <li><a href="#">电视</a></li>
  205.                     <li><a href="#">笔记本</a></li>
  206.                     <li><a href="#">家电</a></li>
  207.                     <li><a href="#">路由器</a></li>
  208.                     <li><a href="#">智能硬件</a></li>
  209.                     <li><a href="#">服务</a></li>
  210.                     <li><a href="#">社区</a></li>
  211.                 </ul>
  212.             </div>
  213.             <div class="search">
  214.                 <form action="">
  215.                     <input type="text">
  216.                     <button></button>
  217.                     <div class="hotwords">
  218.                         <a href="#">小米9 Pro 5G</a>
  219.                         <a href="#">Redmi Note 8</a>
  220.                     </div>
  221.                 </form>
  222.             </div>
  223.         </div>
  224.     </div>
  225.     <!-- 导航2 e -->
  226.  
  227.     <!-- 第一个大box s -->
  228.     <div class="box">
  229.         <div class="w">
  230.             <div class="banner_box">
  231.                 <div class="box_slide">
  232.                     <ul>
  233.                         <li>
  234.                             <a href="#">手机 电话卡</a>
  235.                             <div class="slide_list">
  236.                                 <ul>
  237.                                     <li>
  238.                                         <a href="#">
  239.                                             <img src="images/phone3.jpg" alt="">
  240.                                             <span>小米10 Pro</span>
  241.                                         </a>
  242.                                     </li>
  243.                                     <li>
  244.                                         <a href="#">
  245.                                             <img src="images/phone3.jpg" alt="">
  246.                                             <span>小米10 Pro</span>
  247.                                         </a>
  248.                                     </li>
  249.                                     <li>
  250.                                         <a href="#">
  251.                                             <img src="images/phone3.jpg" alt="">
  252.                                             <span>小米10 Pro</span>
  253.                                         </a>
  254.                                     </li>
  255.                                     <li>
  256.                                         <a href="#">
  257.                                             <img src="images/phone3.jpg" alt="">
  258.                                             <span>小米10 Pro</span>
  259.                                         </a>
  260.                                     </li>
  261.                                     <li>
  262.                                         <a href="#">
  263.                                             <img src="images/phone3.jpg" alt="">
  264.                                             <span>小米10 Pro</span>
  265.                                         </a>
  266.                                     </li>
  267.                                     <li>
  268.                                         <a href="#">
  269.                                             <img src="images/phone3.jpg" alt="">
  270.                                             <span>小米10 Pro</span>
  271.                                         </a>
  272.                                     </li>
  273.                                 </ul>
  274.                                 <ul>
  275.                                     <li>
  276.                                         <a href="#">
  277.                                             <img src="images/phone3.jpg" alt="">
  278.                                             <span>小米10 Pro</span>
  279.                                         </a>
  280.                                     </li>
  281.                                     <li>
  282.                                         <a href="#">
  283.                                             <img src="images/phone3.jpg" alt="">
  284.                                             <span>小米10 Pro</span>
  285.                                         </a>
  286.                                     </li>
  287.                                     <li>
  288.                                         <a href="#">
  289.                                             <img src="images/phone3.jpg" alt="">
  290.                                             <span>小米10 Pro</span>
  291.                                         </a>
  292.                                     </li>
  293.                                     <li>
  294.                                         <a href="#">
  295.                                             <img src="images/phone3.jpg" alt="">
  296.                                             <span>小米10 Pro</span>
  297.                                         </a>
  298.                                     </li>
  299.                                     <li>
  300.                                         <a href="#">
  301.                                             <img src="images/phone3.jpg" alt="">
  302.                                             <span>小米10 Pro</span>
  303.                                         </a>
  304.                                     </li>
  305.                                     <li>
  306.                                         <a href="#">
  307.                                             <img src="images/phone3.jpg" alt="">
  308.                                             <span>小米10 Pro</span>
  309.                                         </a>
  310.                                     </li>
  311.                                 </ul>
  312.                                 <ul>
  313.                                     <li>
  314.                                         <a href="#">
  315.                                             <img src="images/phone3.jpg" alt="">
  316.                                             <span>小米10 Pro</span>
  317.                                         </a>
  318.                                     </li>
  319.                                     <li>
  320.                                         <a href="#">
  321.                                             <img src="images/phone3.jpg" alt="">
  322.                                             <span>小米10 Pro</span>
  323.                                         </a>
  324.                                     </li>
  325.                                     <li>
  326.                                         <a href="#">
  327.                                             <img src="images/phone3.jpg" alt="">
  328.                                             <span>小米10 Pro</span>
  329.                                         </a>
  330.                                     </li>
  331.                                     <li>
  332.                                         <a href="#">
  333.                                             <img src="images/phone3.jpg" alt="">
  334.                                             <span>小米10 Pro</span>
  335.                                         </a>
  336.                                     </li>
  337.                                     <li>
  338.                                         <a href="#">
  339.                                             <img src="images/phone3.jpg" alt="">
  340.                                             <span>小米10 Pro</span>
  341.                                         </a>
  342.                                     </li>
  343.                                     <li>
  344.                                         <a href="#">
  345.                                             <img src="images/phone3.jpg" alt="">
  346.                                             <span>小米10 Pro</span>
  347.                                         </a>
  348.                                     </li>
  349.                                 </ul>
  350.                                 <ul>
  351.                                     <li>
  352.                                         <a href="#">
  353.                                             <img src="images/phone3.jpg" alt="">
  354.                                             <span>小米10 Pro</span>
  355.                                         </a>
  356.                                     </li>
  357.                                     <li>
  358.                                         <a href="#">
  359.                                             <img src="images/phone3.jpg" alt="">
  360.                                             <span>小米10 Pro</span>
  361.                                         </a>
  362.                                     </li>
  363.                                     <li>
  364.                                         <a href="#">
  365.                                             <img src="images/phone3.jpg" alt="">
  366.                                             <span>小米10 Pro</span>
  367.                                         </a>
  368.                                     </li>
  369.                                     <li>
  370.                                         <a href="#">
  371.                                             <img src="images/phone3.jpg" alt="">
  372.                                             <span>小米10 Pro</span>
  373.                                         </a>
  374.                                     </li>
  375.                                     <li>
  376.                                         <a href="#">
  377.                                             <img src="images/phone3.jpg" alt="">
  378.                                             <span>小米10 Pro</span>
  379.                                         </a>
  380.                                     </li>
  381.                                     <li>
  382.                                         <a href="#">
  383.                                             <img src="images/phone3.jpg" alt="">
  384.                                             <span>小米10 Pro</span>
  385.                                         </a>
  386.                                     </li>
  387.                                 </ul>
  388.                             </div>
  389.                         </li>
  390.                     </ul>
  391.                     <ul>
  392.                         <li><a href="#">手机 电话卡</a></li>
  393.                     </ul>
  394.                     <ul>
  395.                         <li><a href="#">手机 电话卡</a></li>
  396.                     </ul>
  397.                     <ul>
  398.                         <li><a href="#">手机 电话卡</a></li>
  399.                     </ul>
  400.                     <ul>
  401.                         <li><a href="#">手机 电话卡</a></li>
  402.                     </ul>
  403.                     <ul>
  404.                         <li><a href="#">手机 电话卡</a></li>
  405.                     </ul>
  406.                     <ul>
  407.                         <li><a href="#">手机 电话卡</a></li>
  408.                     </ul>
  409.                     <ul>
  410.                         <li><a href="#">手机 电话卡</a></li>
  411.                     </ul>
  412.                     <ul>
  413.                         <li><a href="#">手机 电话卡</a></li>
  414.                     </ul>
  415.                     <ul>
  416.                         <li><a href="#">手机 电话卡</a></li>
  417.                     </ul>
  418.                 </div>
  419.             </div>
  420.         </div>
  421.     </div>
  422.     <!-- 第一个大box e -->
  423.  
  424.     <!-- 第二个box s -->
  425.     <div class="ad">
  426.         <div class="w">
  427.             <div class="ad_left">
  428.                 <ul>
  429.                     <li class="row">
  430.                         <a href="#" class="col">
  431.                             <p>米粉卡</p>
  432.                         </a>
  433.                         
  434.                     </li>
  435.                     <li class="row">
  436.                         <a href="#" class="col">
  437.                             <p>米粉卡</p>
  438.                         </a>
  439.                         
  440.                     </li>
  441.                     <li class="row">
  442.                         <a href="#">
  443.                             <p>米粉卡</p>
  444.                         </a>
  445.                         
  446.                     </li>
  447.                 </ul>
  448.                 <ul>
  449.                     <li >
  450.                         <a href="#" class="col">
  451.                             <p>米粉卡</p>
  452.                         </a>
  453.                         
  454.                     </li>
  455.                     <li >
  456.                         <a href="#" class="col">
  457.                             <p>米粉卡</p>
  458.                         </a>
  459.                         
  460.                     </li>
  461.                     <li>
  462.                         <a href="#">
  463.                             <p>米粉卡</p>
  464.                         </a>
  465.                         
  466.                     </li>
  467.                 </ul>
  468.             </div>
  469.             <div class="ad_right">
  470.                 <a href="#">
  471.                     <img src="images/ad2.jpg" alt="">
  472.                 </a>
  473.                 <a href="#">
  474.                     <img src="images/ad2.jpg" alt="">
  475.                 </a>
  476.                 <a href="#">
  477.                     <img src="images/ad2.jpg" alt="">
  478.                 </a>
  479.             </div>
  480.         </div>
  481.     </div>
  482.     <!-- 第二个box e -->
  483.  
  484.     <!-- main  s -->
  485.     <div class="main">
  486.         <div class="w">
  487.             <!-- 小米闪购 s -->
  488.             <div class="flash">
  489.                 <div class="flash_hd">
  490.                     <h4>小米闪购</h4>
  491.                 </div>
  492.                 <div class="flash_bd">
  493.                     <div class="f_one items">
  494.                         <p>14:00 场</p>
  495.                         <img src="images/flash.png" alt="" >
  496.                         <h4>距离结束还有</h4>
  497.                     </div>
  498.                     <div class="items">
  499.                         <a href="#">
  500.                             <img src="images/watch.png" alt="" class="watch">
  501.                             <p class="name">小米手环4 NFC版黑色</p>
  502.                             <p class="c">大屏彩显，可刷公交、门禁</p>
  503.                             <p class="price">
  504.                                 209元
  505.                                 <del>229元</del>
  506.                             </p>
  507.                         </a>
  508.                     </div>
  509.                     <div class="items">
  510.                         <a href="#">
  511.                             <img src="images/watch.png" alt="" class="watch">
  512.                             <p class="name">小米手环4 NFC版黑色</p>
  513.                             <p class="c">大屏彩显，可刷公交、门禁</p>
  514.                             <p class="price">
  515.                                 209元
  516.                                 <del>229元</del>
  517.                             </p>
  518.                         </a>
  519.                     </div>
  520.                     <div class="items">
  521.                         <a href="#">
  522.                             <img src="images/watch.png" alt="" class="watch">
  523.                             <p class="name">小米手环4 NFC版黑色</p>
  524.                             <p class="c">大屏彩显，可刷公交、门禁</p>
  525.                             <p class="price">
  526.                                 209元
  527.                                 <del>229元</del>
  528.                             </p>
  529.                         </a>
  530.                     </div>
  531.                     <div class="items">
  532.                         <a href="#">
  533.                             <img src="images/watch.png" alt="" class="watch">
  534.                             <p class="name">小米手环4 NFC版黑色</p>
  535.                             <p class="c">大屏彩显，可刷公交、门禁</p>
  536.                             <p class="price">
  537.                                 209元
  538.                                 <del>229元</del>
  539.                             </p>
  540.                         </a>
  541.                     </div>
  542.                 </div>
  543.             </div>
  544.             <!-- 小米闪购 e -->
  545.  
  546.             <!-- 大广告1 -->
  547.             <div class="bd_box">
  548.                 <a href="#">
  549.                     <img src="images/bd-box.webp" alt="">
  550.                 </a>
  551.             </div>
  552.             
  553.             <!-- 手机模块 s -->
  554.             <div class="miphone">
  555.                 <div class="miphone_hd">
  556.                     <h4>手机</h4>
  557.                     <a href="#" class="more">
  558.                         查看全部
  559.                     </a>
  560.                 </div>
  561.                 <div class="miphone_bd">
  562.                     <div class="miphone_bd_l">
  563.                         <a href="#">
  564.                             <img src="images/mi1.webp" alt="">
  565.                         </a>
  566.                     </div>
  567.                     <div class="miphone_bd_r">
  568.                         <div>
  569.                             <a href="#">
  570.                                 <img src="images/mi2.jpg" alt="">
  571.                                 <p class="name">小米10</p>
  572.                                 <p class="c">骁龙865/1亿像素相机</p>
  573.                                 <p class="price">3999元起</p>
  574.                             </a>
  575.                         </div>
  576.                         <div>
  577.                             <a href="#">
  578.                                 <img src="images/mi2.jpg" alt="">
  579.                                 <p class="name">小米10</p>
  580.                                 <p class="c">骁龙865/1亿像素相机</p>
  581.                                 <p class="price">3999元起</p>
  582.                             </a>
  583.                         </div>
  584.                         <div>
  585.                             <a href="#">
  586.                                 <img src="images/mi2.jpg" alt="">
  587.                                 <p class="name">小米10</p>
  588.                                 <p class="c">骁龙865/1亿像素相机</p>
  589.                                 <p class="price">3999元起</p>
  590.                             </a>
  591.                         </div>
  592.                         <div>
  593.                             <a href="#">
  594.                                 <img src="images/mi2.jpg" alt="">
  595.                                 <p class="name">小米10</p>
  596.                                 <p class="c">骁龙865/1亿像素相机</p>
  597.                                 <p class="price">3999元起</p>
  598.                             </a>
  599.                         </div>
  600.                         <div>
  601.                             <a href="#">
  602.                                 <img src="images/mi2.jpg" alt="">
  603.                                 <p class="name">小米10</p>
  604.                                 <p class="c">骁龙865/1亿像素相机</p>
  605.                                 <p class="price">3999元起</p>
  606.                             </a>
  607.                         </div>
  608.                         <div>
  609.                             <a href="#">
  610.                                 <img src="images/mi2.jpg" alt="">
  611.                                 <p class="name">小米10</p>
  612.                                 <p class="c">骁龙865/1亿像素相机</p>
  613.                                 <p class="price">3999元起</p>
  614.                             </a>
  615.                         </div>
  616.                         <div>
  617.                             <a href="#">
  618.                                 <img src="images/mi2.jpg" alt="">
  619.                                 <p class="name">小米10</p>
  620.                                 <p class="c">骁龙865/1亿像素相机</p>
  621.                                 <p class="price">3999元起</p>
  622.                             </a>
  623.                         </div>
  624.                         <div>
  625.                             <a href="#">
  626.                                 <img src="images/mi2.jpg" alt="">
  627.                                 <p class="name">小米10</p>
  628.                                 <p class="c">骁龙865/1亿像素相机</p>
  629.                                 <p class="price">3999元起</p>
  630.                             </a>
  631.                         </div>
  632.                     </div>
  633.                 </div>
  634.             </div>
  635.             <!-- 手机模块 e -->
  636.             <!-- 大广告2 -->
  637.             <div class="bd_box">
  638.                 <a href="#">
  639.                     <img src="images/bd-box2.webp" alt="">
  640.                 </a>
  641.             </div>
  642.             
  643.             <!-- 家电 s -->
  644.             <div class="elec">
  645.                 <div class="elec_hd">
  646.                     <h4>家电</h4>
  647.                 </div>
  648.                 <div class="elec_bd">
  649.                     <div class="goods1 items">
  650.                         <a href="#">
  651.                             <img src="images/elec1.webp" alt="">
  652.                         </a>
  653.                     </div>
  654.                     <div class="items">
  655.                         <a href="#">
  656.                             <img src="images/elec2.jpg" alt="" class="goods2">
  657.                             <p class="name">小米电视4A 32英寸</p>
  658.                             <p class="c">人工智能系统，高清液晶屏</p>
  659.                             <p class="price">799元</p>
  660.                         </a>
  661.                     </div>
  662.                     <div class="items">
  663.                         <a href="#">
  664.                             <img src="images/elec2.jpg" alt="" class="goods">
  665.                             <p class="name">小米电视4A 32英寸</p>
  666.                             <p class="c">人工智能系统，高清液晶屏</p>
  667.                             <p class="price">799元</p>
  668.                         </a>
  669.                     </div>
  670.                     <div class="items">
  671.                         <a href="#">
  672.                             <img src="images/elec2.jpg" alt="" class="goods">
  673.                             <p class="name">小米电视4A 32英寸</p>
  674.                             <p class="c">人工智能系统，高清液晶屏</p>
  675.                             <p class="price">799元</p>
  676.                         </a>
  677.                     </div>
  678.                     <div class="items">
  679.                         <a href="#">
  680.                             <img src="images/elec2.jpg" alt="" class="goods">
  681.                             <p class="name">小米电视4A 32英寸</p>
  682.                             <p class="c">人工智能系统，高清液晶屏</p>
  683.                             <p class="price">799元</p>
  684.                         </a>
  685.                     </div>
  686.                     <div class="goods1 items">
  687.                         <a href="#">
  688.                             <img src="images/elec1.webp" alt="">
  689.                         </a>
  690.                     </div>
  691.                     <div class="items">
  692.                         <a href="#">
  693.                             <img src="images/elec2.jpg" alt="" class="goods">
  694.                             <p class="name">小米电视4A 32英寸</p>
  695.                             <p class="c">人工智能系统，高清液晶屏</p>
  696.                             <p class="price">799元</p>
  697.                         </a>
  698.                     </div>
  699.                     <div class="items">
  700.                         <a href="#">
  701.                             <img src="images/elec2.jpg" alt="" class="goods">
  702.                             <p class="name">小米电视4A 32英寸</p>
  703.                             <p class="c">人工智能系统，高清液晶屏</p>
  704.                             <p class="price">799元</p>
  705.                         </a>
  706.                     </div>
  707.                     <div class="items">
  708.                         <a href="#">
  709.                             <img src="images/elec2.jpg" alt="" class="goods">
  710.                             <p class="name">小米电视4A 32英寸</p>
  711.                             <p class="c">人工智能系统，高清液晶屏</p>
  712.                             <p class="price">799元</p>
  713.                         </a>
  714.                     </div>
  715.                     <div class="last">
  716.                         <div></div>
  717.                         <div></div>
  718.                     </div>
  719.                 </div>
  720.             </div>
  721.             <!-- 家电 e -->
  722.             <!-- 大广告3 -->
  723.             <div class="bd_box">
  724.                 <a href="#">
  725.                     <img src="images/bd-box3.webp" alt="">
  726.                 </a>
  727.             </div>
  728.  
  729.             <!-- 周边 s 布局差不多-->
  730.             <div class="elec">
  731.                 <div class="elec_hd">
  732.                     <h4>周边</h4>
  733.                 </div>
  734.                 <div class="elec_bd">
  735.                     <div class="goods1 items">
  736.                         <a href="#">
  737.                             <img src="images/elec1.webp" alt="">
  738.                         </a>
  739.                     </div>
  740.                     <div class="items">
  741.                         <a href="#">
  742.                             <img src="images/elec2.jpg" alt="" class="goods2">
  743.                             <p class="name">小米电视4A 32英寸</p>
  744.                             <p class="c">人工智能系统，高清液晶屏</p>
  745.                             <p class="price">799元</p>
  746.                         </a>
  747.                     </div>
  748.                     <div class="items">
  749.                         <a href="#">
  750.                             <img src="images/elec2.jpg" alt="" class="goods">
  751.                             <p class="name">小米电视4A 32英寸</p>
  752.                             <p class="c">人工智能系统，高清液晶屏</p>
  753.                             <p class="price">799元</p>
  754.                         </a>
  755.                     </div>
  756.                     <div class="items">
  757.                         <a href="#">
  758.                             <img src="images/elec2.jpg" alt="" class="goods">
  759.                             <p class="name">小米电视4A 32英寸</p>
  760.                             <p class="c">人工智能系统，高清液晶屏</p>
  761.                             <p class="price">799元</p>
  762.                         </a>
  763.                     </div>
  764.                     <div class="items">
  765.                         <a href="#">
  766.                             <img src="images/elec2.jpg" alt="" class="goods">
  767.                             <p class="name">小米电视4A 32英寸</p>
  768.                             <p class="c">人工智能系统，高清液晶屏</p>
  769.                             <p class="price">799元</p>
  770.                         </a>
  771.                     </div>
  772.                     <div class="goods1 items">
  773.                         <a href="#">
  774.                             <img src="images/elec1.webp" alt="">
  775.                         </a>
  776.                     </div>
  777.                     <div class="items">
  778.                         <a href="#">
  779.                             <img src="images/elec2.jpg" alt="" class="goods">
  780.                             <p class="name">小米电视4A 32英寸</p>
  781.                             <p class="c">人工智能系统，高清液晶屏</p>
  782.                             <p class="price">799元</p>
  783.                         </a>
  784.                     </div>
  785.                     <div class="items">
  786.                         <a href="#">
  787.                             <img src="images/elec2.jpg" alt="" class="goods">
  788.                             <p class="name">小米电视4A 32英寸</p>
  789.                             <p class="c">人工智能系统，高清液晶屏</p>
  790.                             <p class="price">799元</p>
  791.                         </a>
  792.                     </div>
  793.                     <div class="items">
  794.                         <a href="#">
  795.                             <img src="images/elec2.jpg" alt="" class="goods">
  796.                             <p class="name">小米电视4A 32英寸</p>
  797.                             <p class="c">人工智能系统，高清液晶屏</p>
  798.                             <p class="price">799元</p>
  799.                         </a>
  800.                     </div>
  801.                     <div class="last">
  802.                         <div></div>
  803.                         <div></div>
  804.                     </div>
  805.                 </div>
  806.             </div>
  807.             <!-- 周边 e -->
  808.  
  809.             <!-- 视频模块 s -->
  810.             <div class="vedio">
  811.                 <div class="vedio_hd">
  812.                     <h4>视频</h4>
  813.                 </div>
  814.                 <div class="vedio_bd">
  815.                     <ul>
  816.                         <li>
  817.                             <img src="images/vedio.webp" alt="">
  818.                             <div class="btn"><div class="btn1"></div></div>
  819.                             <p class="name">小米10 8K手机拍大片</p>
  820.                         </li>
  821.                         <li>
  822.                             <img src="images/vedio.webp" alt="">
  823.                             <div class="btn"><div class="btn1"></div></div>
  824.                             <p class="name">小米10 8K手机拍大片</p>
  825.                         </li>
  826.                         <li>
  827.                             <img src="images/vedio.webp" alt="">
  828.                             <div class="btn"><div class="btn1"></div></div>
  829.                             <p class="name">小米10 8K手机拍大片</p>
  830.                         </li>
  831.                         <li>
  832.                             <img src="images/vedio.webp" alt="">
  833.                             <div class="btn"><div class="btn1"></div></div>
  834.                             <p class="name">小米10 8K手机拍大片</p>
  835.                         </li>
  836.                     </ul>
  837.                 </div>
  838.             </div>
  839.             <!-- 视频模块 e -->
  840.         </div>
  841.     
  842.     </div>
  843.     <!-- main  e -->
  844.  
  845.     <!-- footer模块 s -->
  846.     <div class="footer">
  847.         <div class="w clearfix">
  848.             <div class="footer_hd">
  849.                 <ul>
  850.                     <li>
  851.                         <a href="#">
  852.                            <span>预约维修</span> 
  853.                         </a>
  854.                     </li>
  855.                     <li>
  856.                         <a href="#">
  857.                            <span>预约维修</span> 
  858.                         </a>
  859.                     </li>
  860.                     <li>
  861.                         <a href="#">
  862.                            <span>预约维修</span> 
  863.                         </a>
  864.                     </li>
  865.                     <li>
  866.                         <a href="#">
  867.                            <span>预约维修</span> 
  868.                         </a>
  869.                     </li>
  870.                     <li>
  871.                         <a href="#">
  872.                            <span>预约维修</span> 
  873.                         </a>
  874.                     </li>
  875.                 </ul>
  876.             </div>
  877.             <div class="footer_center ">
  878.                 <ul>
  879.                     <li>帮助中心</li>
  880.                     <li>
  881.                         <a href="#">账号管理</a>
  882.                     </li>
  883.                     <li>
  884.                         <a href="#">账号管理</a>
  885.                     </li>
  886.                     <li>
  887.                         <a href="#">账号管理</a>
  888.                     </li>
  889.                 </ul>
  890.                 <ul>
  891.                     <li>帮助中心</li>
  892.                     <li>
  893.                         <a href="#">账号管理</a>
  894.                     </li>
  895.                     <li>
  896.                         <a href="#">账号管理</a>
  897.                     </li>
  898.                     <li>
  899.                         <a href="#">账号管理</a>
  900.                     </li>
  901.                 </ul>
  902.                 <ul>
  903.                     <li>帮助中心</li>
  904.                     <li>
  905.                         <a href="#">账号管理</a>
  906.                     </li>
  907.                     <li>
  908.                         <a href="#">账号管理</a>
  909.                     </li>
  910.                     <li>
  911.                         <a href="#">账号管理</a>
  912.                     </li>
  913.                 </ul>
  914.                 <ul>
  915.                     <li>帮助中心</li>
  916.                     <li>
  917.                         <a href="#">账号管理</a>
  918.                     </li>
  919.                     <li>
  920.                         <a href="#">账号管理</a>
  921.                     </li>
  922.                     <li>
  923.                         <a href="#">账号管理</a>
  924.                     </li>
  925.                 </ul>
  926.                 <ul>
  927.                     <li>帮助中心</li>
  928.                     <li>
  929.                         <a href="#">账号管理</a>
  930.                     </li>
  931.                     <li>
  932.                         <a href="#">账号管理</a>
  933.                     </li>
  934.                     <li>
  935.                         <a href="#">账号管理</a>
  936.                     </li>
  937.                 </ul>
  938.                 <ul>
  939.                     <li>帮助中心</li>
  940.                     <li>
  941.                         <a href="#">账号管理</a>
  942.                     </li>
  943.                     <li>
  944.                         <a href="#">账号管理</a>
  945.                     </li>
  946.                     <li>
  947.                         <a href="#">账号管理</a>
  948.                     </li>
  949.                 </ul>
  950.                 <div class="contact">
  951.                     <p class="tel">400-100-5678</p>
  952.                     <p class="week">周一至周日 8:00-18:00<br>
  953.                         （仅收市话费）</p>
  954.                     <a href="#" class="kefu">
  955.                         人工客服
  956.                     </a>
  957.                 </div>
  958.             </div>
  959.     </div>
  960.     <div class="footer_bd">
  961.         <div class="w">
  962.             <div class="footer_bd_l">
  963.                 <img src="images/logo.png" alt="" class="bd_logo">
  964.                 <div class="info">
  965.                     <p class="p1">           
  966.                     小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | 廉正举报 | 诚信合规 | Select Location
  967.                     </p>
  968.                     <p>   
  969.                     © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号 <br>
  970.                     （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告 <br>
  971.                     增值电信业务许可证 网络食品经营备案（京）【2018】WLSPJYBAHF-12  食品经营许可证 <br>
  972.                     违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
  973.                     </p>
  974.                     <p class="p3">
  975.                         <img src="images/truste.png" alt="">
  976.                         <img src="images/truste.png" alt="">
  977.                         <img src="images/truste.png" alt="">
  978.                         <img src="images/truste.png" alt="">
  979.  
  980.                     </p>
  981.                 </div>
  982.             </div>
  983.         </div>
  984.     </div>
  985. </div> 
  986.     <!-- footer模块 e -->
  987.  
  988.  
  989. </body>
  990. </html>

css中的style.css:

  1.  
  2. .ad_top img{
  3.     height: 120px;
  4.     width: 100%;
  5.     background-size: auto 120px;
  6. }
  7.  
  8. .nav{
  9.     width: 100%;
  10.     height: 40px;
  11.     line-height: 40px;
  12.     background-color: #333;
  13. }
  14.  
  15. .nav_l{
  16.     float: left;
  17.     margin-left: 42px;
  18. }
  19. .nav_l ul li{
  20.     float:left;
  21.     position: relative;
  22. }
  23. .nav_l ul li a,
  24. .nav_r ul li a{
  25.     font-size: 12px;
  26.     color:#b0b0b0;
  27.     line-height: 40px;
  28. }
  29. .nav_l ul li a:hover,
  30. .nav_r ul li a:hover{
  31.     color:#fff;
  32. }
  33. .nav_l ul li span{
  34.     font-size: 12px;
  35.     color:#424242;
  36.     margin:0 4px;
  37. }
  38. .download{
  39.     width: 124px;
  40.     height: 0px;
  41.     background-color: #fff;
  42.     box-shadow: 0 1px 5px #aaa;
  43.     position: absolute;
  44.     top:40px;
  45.     left:50%;
  46.     margin-left:-62px;
  47.     overflow: hidden;
  48.     transition :all .3s;
  49.     z-index: 22;
  50. }
  51. .nav_l li:hover>.download{
  52.     height: 164px;
  53. }
  54. .download>img{
  55.     width: 90px;
  56.     height: 90px;
  57.     margin: 18px 0 12px;
  58. }
  59.  
  60. .nav_l ul li p{
  61.     display: inline-block;
  62.     font-size: 15px;
  63.     line-height: 30px;
  64.     height: 30px;
  65. }
  66. .nav_r{
  67.     float:right;
  68. }
  69. .nav_r ul li{
  70.     float:left;
  71.     margin-left:15px
  72. }
  73. .cart{
  74.     width: 120px;
  75.     height: 40px;
  76.     background-color: #424242;
  77.     position: relative;
  78.     margin-left:30px; 
  79. }
  80. .cart a{
  81.     display: block;
  82.     width: 120px;
  83.     height: 40px;
  84.  
  85. }
  86. .cart a::before{
  87.     font-family: 'icomoon';
  88.     content:'\e901';
  89.     font-size: 20px;
  90.     position: absolute;
  91.     left:12px;
  92. }
  93. .c_list{
  94.     width: 316px;
  95.     height: 0;
  96.     line-height: 100px;
  97.     font-size: 14px;
  98.     background-color: #fff;
  99.     box-shadow: 0 2px 10px rgb(0,0,0,0.2);
  100.     font-size: 12px;
  101.     overflow: hidden;
  102.     transition: all .3s;
  103.     position: absolute;
  104.     top:40px;
  105.     right: 0;
  106.     z-index:50;
  107.  
  108. }
  109. .cart:hover>.c_list{
  110.     height: 100px;
  111.     line-height: 100px;
  112. }
  113.  
  114. .t_nav{
  115.     height: 100px;
  116.     background-color: #fff;
  117.     clear:both;
  118.     position: relative;
  119. }
  120. .logo{
  121.     float: left;
  122.     width: 234px;
  123.     height: 100px;
  124.  
  125. }
  126. .logo_box{
  127.     width: 55px;
  128.     height: 55px;
  129.     background-color: #ddd;
  130.     margin-top:22px;
  131.     position: relative;
  132.     overflow: hidden;
  133.  
  134. }
  135. .logo .mi{
  136.     position: absolute;
  137.     top:0px;
  138.     left:0;
  139.     transition: all .2s;
  140. }
  141. .logo .house{
  142.     position: absolute;
  143.     top:0px;
  144.     left:-55px;
  145.     width: 56px;
  146.     height: 57px;
  147.     transition: all .2s;
  148. }
  149. .logo_box:hover .house{
  150.     left:0;
  151. }
  152. .logo_box:hover .mi{
  153.     left: 55px;
  154. }
  155. .t_nav_list{
  156.     float:left;
  157.     width: 600px;
  158.     height: 100px;
  159. }
  160. .t_nav_list>ul>li{
  161.     float:left;
  162.     line-height: 100px;
  163.     margin-left: 16px;
  164. }
  165. .t_nav_list ul li a{
  166.     text-decoration: none;
  167.     color:black;
  168. }
  169.  
  170.  
  171. .p_style{
  172.     height: 229px;
  173.     width: 100%;
  174.     background-color: #fff;
  175.     border-top:1px solid #e0e0e0;
  176.     box-shadow: 0 3px 4px rgb(0 0 0 /10%);
  177.     position: absolute;
  178.     left: 0;
  179.     top: 100px;
  180.     display: none;
  181.     z-index: 66;
  182. }
  183. .t_nav_list li:hover>.p_style{
  184.     display: block;
  185. }
  186. .p_style li{
  187.     width: 204px;
  188.     height: 201px;
  189.     padding-top: 35px;
  190.     box-sizing: border-box;
  191.     float:left;
  192. }
  193. .img_box{
  194.     height: 110px;
  195.     width: 100%;
  196.     border-right: 1px solid #e0e0e0;
  197.     box-sizing: border-box;
  198.     margin-bottom: 10px;
  199. }
  200. .img_box img{
  201.     height: 80px;
  202.     width: 80px;
  203. }
  204.  
  205. .img_box_name{
  206.     display: block;
  207.     color:#333;
  208.     font-size: 12px;
  209.     line-height: 20px;
  210. }
  211. .img_box_price{
  212.     color:#ff6700;
  213.     font-size: 12px;
  214.     line-height: 20px;
  215. }
  216.  
  217. .search{
  218.     width: 296px;
  219.     height: 100px;
  220.     float: left;
  221.     margin-left:50px;
  222.     position: relative;
  223. }
  224.  
  225. .search input{
  226.     float:left;
  227.     width: 244px;
  228.     height: 50px;
  229.     border:1px solid #e0e0e0;
  230.     border-right:none;
  231.     box-sizing: border-box;
  232.     margin:20px 0 0 20px;
  233.     padding: 0 10px;
  234.     outline:none;
  235. }
  236. .search button{
  237.     position: absolute;
  238.     right: 0;
  239.     float: left;
  240.     width: 52px;
  241.     height: 50px;
  242.     margin-top:20px;
  243.     border: 1px solid #e0e0e0;
  244.     background-color: #fff;
  245.     font-size: 24px;
  246. }
  247. .search button::after{
  248.     font-family: 'icomoon';
  249.     content:'\e986';
  250.     font-size: 24px;
  251. }
  252. .search .hotwords{
  253.     position: absolute;
  254.     right: 62px;
  255.     top:40px;
  256.     width: 190px;
  257.     height: 21px;
  258.     
  259. }
  260. .hotwords a{
  261.     display: inline-block;
  262.     font-size: 12px;
  263.     margin-left:5px;
  264.     background-color:#EEEEEE;
  265.     color:#757575;
  266.  
  267. }
  268.  
  269. .box{
  270.     height: 460px;
  271.     width: 100%;
  272. }
  273. .banner_box{
  274.     width: 100%;
  275.     height: 460px;
  276.     background: url(../images/bd1.jpg);
  277.     background-size:100%;
  278.     animation:box 25s linear infinite;
  279. }
  280. @keyframes box {
  281.     0%{
  282.         background-image: url('../images/bd1.jpg');
  283.     }
  284.     25%{
  285.         background-image: url('../images/bd3.webp');
  286.     }
  287.     50%{
  288.         background-image: url('../images/bd4.webp');
  289.     }
  290.     75%{
  291.         background-image: url('../images/bd5.webp');
  292.     }
  293.     100%{
  294.         background-image: url('../images/bd6.webp');
  295.     }
  296. }
  297. .banner_box:hover{
  298.     animation-play-state:paused;
  299. }
  300. .box_slide{
  301.     width: 234px;
  302.     height: 460px;
  303.     padding: 20px 0;
  304.     background-color: rgba(105,101,101,.6);
  305.     position: relative;
  306.  
  307. }
  308. .box_slide>ul>li{
  309.     height: 42px;
  310.     line-height: 42px;
  311.     padding-left: 30px;
  312.     text-align: left;
  313.     font-size: 14px;
  314. }
  315. .box_slide>ul>li:hover{
  316.     background-color: #ff6700;
  317. }
  318. .box_slide a{
  319.     color:#fff;
  320. }
  321. .box_slide>ul>li>a::after{
  322.     font-family: 'icomoon';
  323.     content:'\e907';
  324.     float:right;
  325.     font-size: 20px;
  326.     margin-right: 20px;
  327.     color:#b0b0b0;
  328. }
  329.  
  330. .slide_list{
  331.     width: 992px;
  332.     height: 460px;
  333.     background-color: #fff;
  334.     border:1px solid #e0e0e0;
  335.     box-sizing: border-box;
  336.     box-shadow: 0 8px 16px rgb(0 0 0 /10%);
  337.     position: absolute;
  338.     top:0;
  339.     left: 234px;
  340.     padding-top: 2px;
  341.     display: none;
  342. }
  343. .box_slide li:hover>.slide_list{
  344.     display: block;
  345. }
  346. .slide_list a{
  347.     font-size: 14px;
  348.     color:#333;
  349. }
  350. .slide_list>ul{
  351.     float: left;
  352.     margin-left: 50px;
  353. }
  354. .slide_list>ul>li{
  355.     width: 100%;
  356.     height: 76px;
  357.     box-sizing: border-box;
  358.     padding: 8px 0 18px 20px;
  359. }
  360.  
  361. .slide_list img{
  362.     margin-right: 12px;
  363.     width: 60px;
  364.     height: 60px;
  365. }
  366.  
  367. .ad{
  368.     height: 170px;
  369.     width: 100%;
  370.     margin-top: 20px;
  371. }
  372. .ad_left{
  373.     float:left;
  374.     width: 234px;
  375.     height: 170px;
  376.     background-color: #5f5750;
  377. }
  378. .ad_left>ul>li{
  379.     float: left;
  380.     width: 76px;
  381.     height: 82px;
  382.     position: relative;
  383.     opacity: 0.5;
  384. }
  385. .ad_left ul .row::after{
  386.     content: '';
  387.     width: 70%;
  388.     height: 4px;
  389.     display: block;
  390.     border-bottom: 2px solid  rgba(149, 147, 147, 0.5);
  391.     margin-left: 12px;
  392. }
  393. .ad_left ul li .col{
  394.     border-right: 2px solid rgba(149, 147, 147, 0.5);
  395. }
  396. .ad_left ul li a{
  397.     display: block;
  398.     margin-top:20px;
  399.     color:#fff;
  400.     margin-left:2px;
  401.     
  402. }
  403. .ad_left p{
  404.     display: block;
  405.     margin-top: 10px;
  406.     font-size: 12px;
  407.     margin-bottom:8px;
  408. }
  409. .ad_left a::before{
  410.     font-family: 'icomoon';
  411.     content:'\e958';
  412.     font-size: 28px;
  413. }
  414. .ad_left ul li:hover{
  415.     opacity: 1;
  416. }
  417. .ad_right{
  418.     float:left;
  419.     width: 990px;
  420.     height: 170px;
  421. }
  422. .ad_right a{
  423.     float: left;
  424.     display: block;
  425.     width: 316px;  
  426.     height: 170px;
  427.     margin-left: 14px;
  428. }
  429. .ad_right a img{
  430.     width: 100%;
  431. }
  432.  
  433. .main{
  434.     background-color: #f5f5f5;
  435.     width: 100%;
  436.     margin-top: 20px;
  437.     overflow: hidden;   /*自动找高 */
  438. }
  439. .flash_hd,
  440. .miphone_hd,
  441. .elec_hd,
  442. .vedio_hd{
  443.     height: 58px;
  444. }
  445. .flash_hd h4,
  446. .miphone h4,
  447. .elec h4,
  448. .vedio_hd h4{
  449.     float:left;
  450.     font-weight: 200;
  451.     line-height: 58px;
  452.     font-size: 22px;
  453.     text-align: left;
  454. }
  455. .flash_bd{
  456.     height: 339px;
  457. }
  458.  
  459. .flash_bd>div{
  460.     border-top:1px solid #e53935;
  461. }
  462. .flash_bd>div:nth-child(2){
  463.     border-top-color:#00c0a5;
  464. }
  465. .flash_bd>div:nth-child(3){
  466.     border-top-color:#ffac13;
  467. }
  468. .flash_bd>div:nth-child(4){
  469.     border-top-color:#ffac13;
  470. }
  471. .flash_bd>div:nth-child(5){
  472.     border-top-color:#2196f3;
  473. }
  474. .items{
  475.     width: 234px;
  476.     height: 338px;
  477.     background-color: #fff;
  478.     float:left;
  479.     margin-left: 14px;
  480. }
  481. .f_one{
  482.     margin-left:0;
  483.     vertical-align: center;
  484.     padding-top:41px;
  485.     background-color: #f1eded;
  486. }
  487. .f_one p{
  488.     color:#ef3a3b;
  489.     font-size: 21px;
  490.  
  491. }
  492. .f_one img{
  493.     width: 34px;
  494.     height: 63px;
  495.     margin: 15px auto;
  496. }
  497. .f_one h4{
  498.     font-size: 15px;
  499.     color:rgba(0,0,0,.56);
  500. }
  501. .watch{
  502.     width: 160px;
  503.     margin:39px 0 22px;
  504. }
  505. .name{
  506.     width: 194px;
  507.     height: 24px;
  508.     color:#212121;
  509.     font-size: 14px;
  510.     margin:0 auto 3px;
  511. }
  512. .c{
  513.     width: 194px;
  514.     height: 18px;
  515.     font-size: 12px;
  516.     color:#b0b0b0;
  517.     margin:0 auto 12px;
  518. }
  519. .price{
  520.     font-size: 14px;
  521.     color:#ff6709;
  522. }
  523. .bd_box img{
  524.     width: 100%;
  525.     height: 120px;
  526.     margin: 22px auto;
  527. }
  528. .miphone{
  529.     height: 58px;
  530. }
  531. .miphone .more{
  532.     float:right;
  533.     color:#424242;
  534.     font-size: 16px;
  535.     line-height: 58px;
  536. }
  537. .miphone .more::after{
  538.     font-family: 'icomoon';
  539.     content:'\ea42';
  540. }
  541. .miphone .more:hover{
  542.     color:#ff6700;
  543. }
  544. .miphone_bd_l{
  545.     width: 234px;
  546.     height: 614px;
  547.     float:left;
  548. }
  549. .miphone_bd_l:hover,
  550. .miphone_bd_r>div:hover,
  551. .items:hover,
  552. .elec_bd .last>div:hover,
  553. .vedio_bd ul li:hover{
  554.     box-shadow:0 15px 30px 30px rgba(0,0,0,.1);
  555.     transform: translateY(-2px);
  556.     transition:all 0.5s;
  557. }
  558. .miphone_bd_r{
  559.     float: left;
  560.     width: 992px;
  561.     height: 614px;
  562. }
  563. .miphone_bd_r>div{
  564.     float: left;
  565.     height: 300px;
  566.     width: 234px;
  567.     background-color: #fff;
  568.     margin:0 0 14px 14px;
  569. }
  570. .elec_hd{
  571.     height: 58px;
  572.     
  573. }
  574. .elec_bd>div{
  575.     margin-bottom: 14px;
  576.     height: 300px;
  577.     width: 234px;
  578.     margin-left:14px;
  579. }
  580. .elec_bd .goods1{
  581.     float:left;
  582.     margin-left:0;
  583. }
  584. .goods2{
  585.     width: 160px;
  586.     margin:20px 0 15px;
  587. }
  588. .last{
  589.     height: 300px;
  590.     float: left;
  591. }
  592. .last>div{
  593.     width: 100%;
  594.     height: 143px;
  595.     background-color: #fff;
  596. }
  597. .last>div:first-child{
  598.     margin-bottom: 14px;
  599. }
  600.  
  601. .vedio_bd{
  602.     float:left;
  603.     margin-bottom: 30px;
  604. }
  605. .vedio_bd ul li{
  606.     float:left;
  607.     width: 296px;
  608.     height: 285px;
  609.     margin-left: 14px;
  610.     background-color: #fff;
  611.     position: relative;
  612. }
  613. .vedio_bd ul li:first-child{
  614.     margin-left: 0;
  615. }
  616. .vedio_bd ul li img{
  617.     margin-bottom:20px;
  618. }
  619. .vedio_bd ul li p{
  620.     width: 286px;
  621.     height: 21px;
  622.     margin: 15px auto;
  623.     font-size: 18px;
  624.     color: #333;
  625. }
  626. .btn{
  627.     width: 42px;
  628.     height: 30px;
  629.     border:5px solid #fff;
  630.     border-radius: 15px;
  631.     position: absolute;
  632.     top:137px;
  633.     left:20px;
  634. }
  635. .btn1{
  636.     width: 0;
  637.     height: 0;
  638.     border-left:12px solid #fff;
  639.     border-top:8px solid transparent;
  640.     border-bottom:8px solid transparent;
  641.     margin:3px auto;
  642. }
  643. .vedio_bd ul li:hover>.btn{
  644.     background-color: #ff6700;
  645.     border-color:#ff6700;
  646. }
  647. .footer{
  648.     width: 100%;
  649.     background-color: #fff; 
  650.     height: 272px;
  651. }
  652. .footer_hd {
  653.     border-bottom: 1px solid #e0e0e0;
  654. }
  655. .footer_hd ul{
  656.     height: 25px;
  657.     line-height: 25px;
  658.     padding: 27px 0;
  659. }
  660.  
  661. .footer_hd ul li{
  662.     float:left;
  663.     width: 242px;
  664.     border-right:1px solid #e0e0e0;
  665. }
  666. .footer_hd ul li:nth-last-child(1){
  667.     border-right: none;
  668. }
  669. .footer_hd ul span::before{
  670.     content: '\e991';
  671.     font-family: 'icomoon';
  672.     color:#616161;
  673.     font-size: 24px;
  674.     margin-right: 18px;
  675. }
  676. .footer_hd ul li a{
  677.     color:#616161;
  678.     font-size: 16px;
  679. }
  680. .footer_hd ul li a:hover{
  681.     color:#e53935;
  682. }
  683. .footer_center{
  684.     height: 112px;
  685.     padding-top: 20px;
  686.  
  687. }
  688. .footer_center ul{
  689.     float:left;
  690.     width: 160px;
  691.     text-align: left;
  692. }
  693. .footer_center ul li{
  694.     font-size: 12px;
  695.     margin-top: 10px;
  696. }
  697. .footer_center ul li:first-child{
  698.     font-size: 14px;
  699.     color:#424242;
  700.     margin-bottom: 26px;
  701. }
  702. .footer_center ul li a{
  703.     color:#757575;
  704. }
  705. .footer_center ul li a:hover{
  706.     color:#e53935;
  707. }
  708. .contact{
  709.     width: 251px;
  710.     height: 112px;
  711.     border-left:1px solid #e0e0e0;
  712.     float:right;
  713. }
  714. .tel{
  715.     height: 22px;
  716.     line-height: 22px;
  717.     font-size: 22px;
  718.     color:#ff6700;
  719.     margin-bottom: 5px;
  720. }
  721. .week{
  722.     font-size: 12px;
  723.     height: 36px;
  724.     margin-bottom: 36px;
  725.     color:#616161
  726. }
  727. .kefu{
  728.     display: block;
  729.     width: 118px;
  730.     height: 28px;
  731.     line-height: 28px;
  732.     font-size: 12px;
  733.     margin: 0 auto;
  734.     color:#ff6700;
  735.     border:1px solid #ff6700;
  736.  
  737. }
  738. .kefu::before{
  739.     font-family: 'icomoon';
  740.     content:'\ea8e';
  741. }
  742. .footer_bd{
  743.     width: 100%;
  744.     height: 172px;
  745.     background-color: #fafafa;
  746.     padding: 30px 0;
  747.     margin-top: 40px;
  748.     font-size: 12px;
  749.     color: #757575;
  750. }
  751. .bd_logo{
  752.     float:left;
  753.     width: 57px;
  754.     height: 57px;
  755.     margin-right: 10px;
  756. }
  757. .info{
  758.     width: 1159px;
  759.     float:left;
  760.     text-align:left;
  761. }
  762. .p1{
  763.     height: 19px;
  764.     line-height: 19px;
  765. }
  766. .p3{
  767.     margin-top: 10px;
  768. }
  769. .p3 img{
  770.     height: 28px;
  771.     margin-right: 5px;
  772. }

其它的都在下面

链接：https://pan.baidu.com/s/1ZzmGNa8tZjahVoDADDbJ9A?pwd=mtql 
提取码：mtql

7.30 后面用flex布局重新写了一下

链接：https://pan.baidu.com/s/1z5wJyddWpklrUgX6VUMpBw?pwd=lur0 
提取码：lur0

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

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

  

闽ICP备14008679号