仿写小米商城首页（静态网页）代码

惜之谊梦
已于 2024-02-26 10:25:30 修改
阅读量671
点赞数 12
文章标签：前端 css
于 2024-02-26 10:24:22 首次发布
本文链接：https://blog.csdn.net/weixin_68228680/article/details/136293141
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
     <style>
     body{
            margin: 0;
        }
    .container{
            width: 1226px;
            margin:0 auto;
        }
      .left{
              float: left;
          }
      img{
            width: 100%;
            height: 100%;
        }
    .header{
            background-color: #333;
        }
     .container{
            width: 1226px;
            margin: 0 auto;
        }
    .header .menu {
            float: left;
            color: white;
        }
    .header .account{
            float: right;
            color: white;

        }
     .header  a{
             color: #b0b0b0;
             line-height: 40px;
             display: inline-block;
             font-size: 12px;
             margin-right: 10px;

             text-decoration: none;
         }
      .header  a:hover{
              color: white;
          }

    .sub-header{
            height: 100px;
        }

        .sub-header .h1{
            height:100px ;
        }
        .sub-header .logo{
            width: 234px;
            float: left;
        }
        .sub-header .logo a{
            margin-top: 22px;display: inline-block
        }
         .sub-header .logo a img{
           width: 56px;height: 56px
        }
        .sub-header .menu-list{
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;

            text-decoration: none;
        }
         .sub-header .menu-list a:hover{
             color: #ff6788;
         }
        .sub-header .search{
            float: right;
        }


        .sub-header .h1{
            height:100px ;
        }
        .sub-header .logo{
            width: 234px;
            float: left;
        }
        .sub-header .logo a{
            margin-top: 22px;display: inline-block
        }
         .sub-header .logo a img{
           width: 56px;height: 56px
        }
        .sub-header .menu-list{
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;

            text-decoration: none;
        }
         .sub-header .menu-list a:hover{
             color: #ff6788;
         }
        .sub-header .search{
            float: right;
        }
        .slider .sd-img{
            width: 1226px;
            height: 460px;
        }
         .news{
             margin-top: 14px;
         }
      .news .channel{
          width: 228px;
          height: 164px;
          background-color:#5f5750;
          padding: 3px;

      }
      .news .channel .item{
          height: 82px;
          width: 76px;
          float: left;
          text-align: center;

      }
       .news .channel .item a{
           display: inline-block;
           font-size: 12px;
           padding-top:18px;
           color: #fff;
           opacity: 0.7;
           text-decoration: none;
       }
       .news .channel .item a:hover{
           opacity: 1;
       }
       .news .channel .item img{
           height: 24px;
           width: 24px;
           display: block;
           margin: 0 auto 4px;
       }
      .news .list-item{
          width: 316px;
          height: 170px;
      }
      .app{position: relative}
      .app .download{
        position: absolute;
          height: 100px;
          width: 100px;
          display: none;
      }
      .app:hover .download{
          display: block;
      }
    </style>
</head>
<body>
        <!--顶部-->
     <div class="header">
        <div class="container">
        <div class="menu">
            <a href="https://www.mi.com/">小米官网</a>
            <a href="https://www.mi.com/shop">小米商城</a>
            <a href="https://hyperos.mi.com/">小米澎湃OS</a>
            <a href="https://www.mi.com/shop">IOT</a>
            <a href="https://www.mi.com/shop">云服务</a>
            <a href="https://www.mi.com/shop">天星数科</a>
            <a href="https://www.mi.com/shop">有品</a>
            <a href="https://www.mi.com/shop">小爱开放平台</a>
            <a href="https://www.mi.com/shop">资质证照</a>
            <a href="https://www.mi.com/shop">协议规则</a>
            <a href="https://www.mi.com/shop" class="app">下载APP
                <div class="download">
                    <img src="images/download.png" alt=""><需更该为自己的图片地址>
                </div>
            </a>
            <a href="https://www.mi.com/shop">Select location</a>
        </div>
        <div class="account">
            <a> 登录 </a>
            <a> 注册 </a>
            <a> 消息通知 </a>
        </div>
        <div style="clear: both"></div>
        </div>
    </div>
        <!--二级菜单-->
     <div class="sub-header">
        <div class="container">
            <div class="h1 logo">
                <a href="https://www.mi.com">
                    <img src="#" ><!--#需替换为自己的图片地址-->
                </a>
            </div>
            <div class="h1 menu-list">
                <a href="https://www.mi.com/shop/search?keyword=xiaomi%E6%95%B0%E5%AD%97%E7%B3%BB%E5%88%97"> Xiaomi手机</a>
                <a  href="https://www.mi.com/shop/search?keyword=redmiK%E7%B3%BB%E5%88%97"> Redmi 红米</a>
                <a href="https://www.mi.com/shop/search?keyword=%E5%B0%8F%E7%B1%B3%E7%94%B5%E8%A7%86%20%E5%A4%A7%E5%B8%88%E7%B3%BB%E5%88%97"> 电视</a>
                <a href="https://www.mi.com/shop/buy/detail?product_id=10050057"> 笔记本</a>
                <a href="https://www.mi.com/shop/buy/detail?product_id=19013"> 平板</a>
                <a href="https://www.mi.com/"> 家电</a>
                <a href="https://www.mi.com/"> 路由器</a>
                <a href="https://www.mi.com/shop"> 服务</a>
                <a href="https://www.xiaomi.cn/"> 社区</a>
            </div>

            <div class="h1 search"></div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div class="slider">
        <div class="container">
            <div class="sd-img">
                <img src="#" ><!--#需替换为自己的图片地址-->
            </div>
        </div>
    </div>

    <div class="news">
        <div class="container">
            <div class="channel left">
                <div class="item ">
                    <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                        <img src="#" ><!--#需替换为自己的图片地址-->
                        <span>保障服务</span>
                    </a>
                </div>
                <div class="item ">
                      <a href="https://business.qiye.mi.com/">
                        <img src="#" ><!--#需替换为自己的图片地址-->
                        <span>企业团购</span>
                    </a>
                </div>
                <div class="item">
                     <a href="https://www.mi.com/shop/order/fcode">
                        <img src="#" ><!--#需替换为自己的图片地址-->
                        <span>F码通道</span>
                    </a>
                </div>
                <div class="item">
                      <a href="https://10046.mi.com/">
                        <img src="#" ><!--#需替换为自己的图片地址-->
                        <span>米粉卡</span>
                    </a>
                </div>
                <div class="item">
                    <a href="https://www.mi.com/a/h/16769.html">
                       <img src="#" ><!--#需替换为自己的图片地址-->
                        <span>以旧换新</span>
                    </a>
                </div>
                <div class="item">
                      <a href="https://account.xiaomi.com/fe/service/login/password?_group=DEFAULT&sid=recharge&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Frecharge.10046.mi.com%25252Fsts%25253Fsign%25253DbC%2525252Bk1yrraTJbriZ0UbiV7hfzHz4%2525253D%252526followup%25253Dhttp%2525253A%2525252F%2525252Frecharge.10046.mi.com%2525252F%2526sid%253Drecharge%2526_group%253DDEFAULT&callback=http%3A%2F%2Frecharge.10046.mi.com%2Fsts%3Fsign%3DbC%252Bk1yrraTJbriZ0UbiV7hfzHz4%253D%26followup%3Dhttp%253A%252F%252Frecharge.10046.mi.com%252F&_sign=E3rd43%2B2d7vT%2FQp3jj0CJzZ6VhQ%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN">
                        <img src="images/v1.png">
                        <span>话费充值</span>
                    </a>
                </div>
                <div style="clear: both"></div>
            </div>
            <div class="list-item left" style="margin-left: 14px">
                <img src="#" ><!--#需替换为自己的图片地址-->
            </div>
            <div class="list-item left"  style="margin-left: 15px">
                <img src="#" ><!--#需替换为自己的图片地址-->
            </div>
            <div class="list-item left" style="margin-left: 15px" >
                <img src="#" ><!--#需替换为自己的图片地址-->
            </div>
            <div style="clear: both"></div>
        </div>
    </div>


</body>
</html>