• 用vscode仿制小米官网

    html内容:

     

    1. 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>Documenttitle>
    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="#">小米澎湃OSa>
    20.                 <span class="sep">|span>
    21.                 <a href="#">loTa>
    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="#">下载appa>
    36.                 <span class="sep">|span>
    37.                 <a href="#">Select Locationa>
    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. }

     结果呈现:

  • 相关阅读:
    学生党用什么蓝牙耳机好？学生党性价比高的蓝牙耳机推荐
    TTS引用与选型
    一条 sql 语句可能导致的表锁和行锁以及死锁检测
    类中静态代码块、实例代码块、构造方法执行次序
    【数据库】03——初级开发需要掌握哪些SQL语句
    coredns无法启动
    温度响应性纳米水凝胶光子品体/纤维素修饰荧光水凝胶/载脂质体水凝胶的制备方法
    Pandas读取json文件
    rust变量
    西湖大学利用 Transformer 分析百亿多肽的自组装特性，破解自组装法则
  • 原文地址：https://blog.csdn.net/simply_happy/article/details/137197546