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

用vscode仿制小米官网

作者：知新_RL | 2024-04-10 20:38:10

赞

踩

用vscode仿制小米官网

html内容:

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="./08-index.css">
  8.     <link rel="stylesheet" href="../作业/download/font_4488556_kzk9knke5t/iconfont.css">
  9.     
  10. </head>
  11. <body>
  12.     <div class="header">
  13.         <div class="content">
  14.             <div class="header-left">
  15.                 <a href="#">小米官网</a>
  16.                 <span class="sep">|</span>
  17.                 <a href="#">小米商城</a>
  18.                 <span class="sep">|</span>
  19.                 <a href="#">小米澎湃OS</a>
  20.                 <span class="sep">|</span>
  21.                 <a href="#">loT</a>
  22.                 <span class="sep">|</span>
  23.                 <a href="#">云服务</a>
  24.                 <span class="sep">|</span>
  25.                 <a href="#">天星数科</a>
  26.                 <span class="sep">|</span>
  27.                 <a href="#">有品</a>
  28.                 <span class="sep">|</span>
  29.                 <a href="#">小爱开放平台</a>
  30.                 <span class="sep">|</span>
  31.                 <a href="#">资质证照</a>
  32.                 <span class="sep">|</span>
  33.                 <a href="#">协议规则</a>
  34.                 <span class="sep">|</span>
  35.                 <a href="#">下载app</a>
  36.                 <span class="sep">|</span>
  37.                 <a href="#">Select Location</a>
  38.             </div>
  39.             <div class="header-right">
  40.                 <a href="#"class="sep">登录</a>
  41.                 <span class="sep">|</span>
  42.                 <a href="#"class="sep">注册</a>
  43.                 <span class="sep">|</span>
  44.                 <a href="#"class="sep">信息通知</a>
  45.                 <span class="sep">|</span>
  46.                     <span class="iconfont icon-gouwuchekong"></span>
  47.                     <a href="#"class="shopping">购物车</a>
  48.             </div>
  49.         </div>
  50.     </div>
  51.     <div class="top-nav">
  52.         <div class="content">
  53.             <div class="top-nav-left">
  54.                
  55.             </div>
  56.             <div class="top-nav-mid">
  57.                 <ul>
  58.                     <li><a href="#">Xiaomi手机</a></li>
  59.                     <li><a href="#">Redmi手机</a></li>
  60.                     <li><a href="#">电视</a></li>
  61.                     <li><a href="#">笔记本</a></li>
  62.                     <li><a href="#">平板</a></li>
  63.                     <li><a href="#">家电</a></li>
  64.                     <li><a href="#">路由器</a></li>
  65.                     <li><a href="#">服务中心</a></li>
  66.                     <li><a href="#">社区</a></li>
  67.                 </ul>
  68.             </div>
  69.             <div class="top-nav-right">
  70.                 <form action="#">
  71.                     <input type="text">
  72.                     <span class="iconfont icon-sousuo"></span>
  73.                  </form>
  74.             </div>
  75.         </div>
  76.     </div>
  77.     <div class="top-mid">
  78.         <div class="content">
  79.             <div class="top-mid-left">
  80.                 <ul>
  81.                     <li><a href="#"class="title">手机      ></a></li>
  82.                     <li><a href="#"class="title">电视      ></a></li>
  83.                     <li><a href="#"class="title">家电      ></a></li>
  84.                     <li><a href="#"class="title">笔记本平板 ></a></li>
  85.                     <li><a href="#"class="title">出行 穿戴 ></a></li>
  86.                     <li><a href="#"class="title">耳机 音箱 ></a></li>
  87.                     <li><a href="#"class="title">健康 儿童 ></a></li>
  88.                     <li><a href="#"class="title">生活 箱包 ></a></li>
  89.                     <li><a href="#"class="title">智能路由器 ></a></li>
  90.                     <li><a href="#"class="title">电源配件 ></a></li>
  91.                 </ul>
  92.             </div>
  93.             <div class="top-mid-right" style="transition-duration: 1s ;">
  94.                 <div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div>
  95.                 <div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div>
  96.                 <div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div>
  97.                 <div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div>
  98.                 <div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div>
  99.                 <div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div>
  100.             </div>
  101.             
  102.         </div>    
  103.     </div>
  104.     <div class="top-bottom">
  105.         <div class="content">
  106.             <ul class="top-bottom-left">
  107.                 <li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"width="24px"height="24px">保障服务</a></li>
  108.                 <li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48"width="24px"height="24px">企业团购</a></li>
  109.                 <li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48"width="24px"height="24px">F码通道</a></li>
  110.                 <li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48"width="24px"height="24px">米粉卡</a></li>
  111.                 <li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48"width="24px"height="24px">以旧换新</a></li>
  112.                 <li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48"width="24px"height="24px">话费充值</a></li>
  113.             </ul>
  114.             <div class="top-bottom-right1"></div>
  115.             <div class="top-bottom-right2"></div>
  116.             <div class="top-bottom-right3"></div>
  117.         </div>
  118.     </div>
  119. </div>  
  120.     
  121. </body>
  122. </html>

 css内容:

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.  
  6. }
  7. li{
  8.     list-style: none;
  9. }
  10. a{
  11.     text-decoration: none;
  12. }
  13. .content{
  14.     width: 1226;
  15.     margin: 0 auto;
  16.  
  17. }
  18. /* header开始 */
  19. .header{
  20.     height: 40px;
  21.     background-color: #333;
  22.     color: #b0b0b0;
  23.     font-size: 12px;
  24.     overflow: hidden;
  25. }
  26. .header-left{
  27.     width: 769px;
  28.     height: 40px;
  29.  
  30. }
  31. .header-right{
  32.     width: 200px;
  33.     height: 40px;
  34.  
  35. }
  36. .header .content{
  37.     display: flex;
  38.     justify-content:space-evenly
  39. }
  40. .header .content a{
  41.     font-size: 12px;
  42.     color: #b0b0b0;
  43.     line-height: 40px;
  44. }
  45. .header-left .sep{
  46.     margin: 0 ;
  47. }
  48. .header .shopping{
  49.     margin-left: 0px;
  50.  
  51. }
  52. /* header结束 */
  53. /* top-nav开始 */
  54. .top-nav{
  55.     height: 100px;
  56.     overflow: hidden;
  57.  
  58. }
  59. .top-nav .content {
  60.     display: flex;
  61.     justify-content: space-evenly;
  62. }
  63. .top-nav-left{
  64.     background: url("https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png") no-repeat;
  65.     width: 56px;
  66.     height: 56px;
  67.     background-size: 56px;
  68.     margin-top: 20px;
  69. }
  70. .top-nav-mid ul{
  71.     display: flex;
  72.     justify-content: space-between;
  73.     width: 700px;
  74.     height: 100px;
  75.     line-height: 100px;
  76. }
  77. .top-nav-mid ul a{
  78.     color: #333;
  79. }
  80. .top-nav-mid ul a:hover{
  81.     color: chocolate;
  82. }
  83. .top-nav-right {
  84.     padding-top: 25px;
  85.     width: 296px;
  86.     height: 100px;
  87.     line-height: 100px;
  88. }
  89. .top-nav-right form {
  90.     position: relative;
  91.     width: 296px;
  92.     height: 50px;
  93.  
  94. }
  95. .top-nav-right input{
  96.     position: absolute;
  97.     left: 0;
  98.     top: 0;
  99.     width: 245px;
  100.     height: 50px;
  101.     vertical-align: middle;
  102.     outline: none;
  103.     
  104. }
  105. .top-nav-right span{
  106.     display: inline-block;
  107.     position: absolute;
  108.     right: 0;
  109.     top: 0;
  110.     width: 52px;
  111.     height: 50px;
  112.     line-height: 50px;
  113.     border: 1px solid black;
  114.     text-align: center;
  115.     font-size: 24px;
  116.     
  117. }
  118. /* top-nav 结束*/
  119. .a{
  120.     height: 100px;
  121. }
  122. /* top-mid */
  123. .top-mid{
  124.     width: 1226px;
  125.     height: 420px;
  126.     margin: 0 auto;
  127. }
  128. .top-mid .content {
  129.     display: flex;
  130.     justify-content: space-evenly;
  131. }
  132. .top-mid-left{
  133.     background-color: #B0B0B0;
  134.     width: 234px;
  135.     height: 420px;
  136.     position: relative;
  137. }
  138. .top-mid .title{
  139.     width: 234px;
  140.     height: 42px;
  141.     text-decoration:none;
  142.     color: aliceblue;
  143.     padding: 0px 0px 0px 30px;
  144.     display: flex;
  145.     flex-direction: column;
  146. }
  147. .top-mid-left ul a {
  148.     color: #f0f8ff;
  149. }
  150. .top-mid-right{
  151.     width: 992px;
  152.     height: 420px;
  153.     background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/079f2eab16fdcb6132f7f58ffcf24b0a.jpg?thumb=1&w=1839&h=690&f=webp&q=90);
  154.     background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6ddaa05fc2385ded9081a56dfb20ae0d.jpg?thumb=1&w=1839&h=690&f=webp&q=90);
  155.     background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aad6b7322cba5a5c13ee316610711fdc.jpg?thumb=1&w=1839&h=690&f=webp&q=90);
  156.     background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/802443805243d8505730c204a391bf0a.jpg?thumb=1&w=1839&h=690&f=webp&q=90);
  157.     background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/daa8668ce81bc05a5b8a6ef05072047d.jpg?w=2452&h=920);
  158.     background-size: cover;
  159.  
  160. }
  161. .top-mid-right-yuan{
  162.     width: 10px;
  163.     height: 10px;
  164.     border-radius: 100px;
  165.     display: inline-block;
  166.     position: relative;
  167.     left: 900px;
  168.     top: 400px;
  169.     background-color: #B0B0B0;
  170. }
  171. /* top-bottom */
  172. .top-bottom{
  173.     width: 1240px;
  174.     height: 170px;
  175.     margin: 0 auto;
  176. }
  177. .top-bottom .content {
  178.     display: flex;
  179.     justify-content: space-evenly;
  180. }
  181. .top-bottom-left{
  182.     display: inline-block;
  183.     background-color: #5f5750;
  184.     width: 234px;
  185.     height: 170px;
  186.     font-display: flex;
  187.     flex-wrap: wrap;
  188.     justify-content: space-between;
  189.     align-content: space-evenly;
  190. }
  191. /* .top-bottom ul{
  192.     width: 76px;
  193.     height: 82px;
  194.     padding: 0 3px;
  195.     display: flex;
  196.     flex-wrap: wrap;
  197.     justify-content: space-between;
  198.     align-content: space-evenly;
  200. } */
  201. .top-bottom .other{
  202.     width: 70px;
  203.     height: 64px;
  204.     color: aliceblue;
  205.     padding: 18px 0px 0px ;
  206.     list-style: none;
  207. }
  208. .top-bottom-right1{
  209.     width: 316px;
  210.     height: 170px;
  211.     background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340);
  212.     background-size: cover;
  213. }
  214. .top-bottom-right2{
  215.     width: 316px;
  216.     height: 170px;
  217.     background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8dede2520f8dfff9c9b690af498cafe8.jpg?w=632&h=340);
  218.     background-size: cover;
  219. }
  220. .top-bottom-right3{
  221.     width: 316px;
  222.     height: 170px;
  223.     background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ac77590368ff636d0b4f6a988133f55.png?w=632&h=340);
  224.     background-size: cover;
  225. }

 结果呈现:

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

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

  

闽ICP备14008679号