小米官网网页-CSDN博客

本文链接：https://blog.csdn.net/2401_84957042/article/details/139382013

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>小米官网-首页</title>
       <style>
       * {
       margin: 0;
       padding: 0
       }
       .clearfix:before,.clearfix:after{
       content: "";
       display: table;
       }
       .clearfix:after{
       clear:both;
       }
       .clearfix{
       *zoom:1;
       }
       @font-face {
       font-family: 'icomoon';
       src: url('fonts/icomoon.eot?7yi5yk');
       src: url('fonts/icomoon.eot?7yi5yk#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7yi5yk') format('truetype'),
       url('fonts/icomoon.woff?7yi5yk') format('woff'),
       url('fonts/icomoon.svg?7yi5yk#icomoon') format('svg');
       font-weight: normal;
       font-style: normal;
       font-display: block;
       }
       button {
       cursor: pointer;
       }
       button,
       input {
       font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
       border: 0;
       outline: none;
       }
       ul li {
       list-style: none;
       }
       a{
       text-decoration: none;
       }
       .w1 {
       width: 1226px;
       height: 100%;
       margin: 0 auto;
       }

       .w2 {
       width: 100%;

       }

       .advertisement {
       height: 96px;
       background-image: url(/images/顶部广告.png);
       background-position: 50%;
       background-repeat: no-repeat;
       }
       /* 导航栏 */
       .nav {
       height: 40px;
       background-color: rgb(51, 51, 51);

       }

       .header {
       height: 100%;
       margin: 0 auto;
       }

       .nav-left li {
       float: left;
       line-height: 40px;
       }
       .nav-left .app{
       position: relative;
       }
       .sub-app img{
       margin-top: 5px;
       width: 90px;
       height: 90px;
       }
       .sub-app{
       position: absolute;
       top: 40px;
       left: 41%;
       width: 124px;
       height: 0;
       background: #fff;
       margin-left: -55px;
       box-shadow: 0 1px 5px #aaa;
       text-align: center;
       font-size: 14px;
       color: #333;
       line-height: 1;
       overflow: hidden;
       transition: height .3s;
       z-index: 99;
       }
       .nav-left a,
       .nav-right a {
       font-size: 12px;
       color: #b0b0b0;
       text-decoration: none;
       transition: color .2s linear 0s;
       }
       .nav-left a:hover,
       .nav-right a:hover{
       color: #fff;
       }
       .app:hover>.sub-app{
       height: 120px;
       }
       .app:hover>.top-triango{
       visibility: visible;
       }
       .app:hover>a{
       color: #ffffff;
       }
       .nav-left span,
       .nav-right span {
       font-style: 10px;
       color: #424242;
       margin: 0 7px;
       }

       .nav-right li {
       float: right;
       line-height: 40px;
       }
       .car{
       position: relative;
       width: 120px;
       height: 40px;
       background-color: #424242;
       /* 字体水平居中 */
       text-align: center;
       margin-left: 20px;
       transition: all .2s linear 0s;
       }
       .car a{
       display: inline-block;
       font-family: 'icomoon';
       width: 100%;
       height: 100%;
       transition: all .2s linear 0s;
       }
       .car i{
       font-style: normal;
       font-size: 15px;
       }
       .empty{
       position: absolute;
       right: 0;
       top: 40px;
       z-index: 31;
       width: 316px;
       height: 0;
       color: #424242;
       font-size: 12px;
       line-height: 100px;
       background: #fff;
       box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
       overflow: hidden;
       transition: height .3s;
       }
       .car:hover{
       background-color: #fff;
       }
       .car:hover>a{
       color: #ff6700;
       }
       .car:hover>.empty{
       height: 100px;
       }
       /* 副导航栏 */
       .big-sub{
       width: 100%;
       height: 100px;
       }
       .sub-main{
       position: relative;
       width: 1226px;
       height: 100%;
       /* border: 1px solid red; */
       margin: 0 auto;
       }
       .sub-left{
       float: left;
       height: 100px;
       width: 850px;
       border: 1px solid transparent;

       }
       .sub-left li{
       float: left;
       position: relative;
       line-height: 100px;
       margin-left: 23px;
       }
       .sub-left li img{
       height: 60px;
       width: 60px;
       margin-left: -10px;
       margin-right: 100px;
       margin-top: 20px;
       }
       .sub-left li a{
       font-size: 16px;
       color: #333333;
       text-decoration: none;
       transition: all .2s linear 0s;
       }
       .left-change{
       position: absolute;
       top: 97px;
       left: -1267%;
       width: 2560px;
       height: 0;
       background: #fff;
       margin-left: -55px;
       box-shadow: 0 1px 5px #aaa;
       text-align: center;
       font-size: 16px;
       color: #333;
       /* line-height: 1; */
       overflow: hidden;
       transition: height .3s;
       z-index: 99;
       }
       .left-change ul{
       width: 1226px;
       height: 100%;
       background-color: #fff;
       margin-left: 669px;
       }
       .left-change li{
       float: left;
       width: 160px;
       height: 238px;
       margin-left: 42px;
       }
       .left-change li::before{
       position: absolute;
       top: 26px;
       right: 164px;
       width: 1px;
       height: 100px;
       content: "";
       background: rgb(225, 225, 225);
       margin: 0 26px;
       }
       .left-change1::before{
       visibility: hidden;
       }
       .left-change p{
       height: 21px;
       }
       .left-change i{
       font-style: normal;
       font-size: 12px;
       color: #ff6700;
       }
       .left-change1{
       margin-left: 50px;
       }
       .left-change ul li img{
       display: block;
       width: 160px;
       height: 110px;
       }
       .sub-left li:hover>a{
       color: #ff6700;
       }
       .sub-left li:hover>.left-change{
       height: 238px;
       }
       .sub-right{
       position: absolute;
       width: 374px;
       height: 100px;
       line-height: 100px;
       right: -6%;
       /* text-align: right; */
       }
       .search{
       display: inline-block;
       width: 245px;
       height: 50px;
       margin-right: -4px;
       border: 1px solid #e0e0e0;
       border-right: none;
       color: rgb(117, 117, 117);
       /* vertical-align:top； */
       }
       button{
       position: absolute;
       display: inline-block;
       width: 52px;
       height: 52px;
       margin-right: 50px;
       top: 25px;
       right: 26px;
       border: 1px solid #e0e0e0;
       background-color: #ffffff;
       font-family: 'icomoon';
       transition: all .2s linear 0s;
       /* vertical-align:top； */

       }
       button:hover{
       color: white;
       background-color: #ff6700;
       }
       /* 轮播图 */
       .m1{
       height: 460px;
       }
       .lbt{
       position: relative;
       width: 100%;
       height: 100%;
       background-image: url(/images/轮播图1.webp);
       background-size: 1226px 460px;
       background-repeat: no-repeat;
       animation:10s movie infinite;
       }
       @keyframes movie {
       0%{background-image: url(/images/轮播图1.webp)}
       25%{background-image: url(/images/轮播图2.jpg)}
       50%{background-image: url(/images/轮播图1.webp)}
       75%{background-image: url(/images/轮播图2.jpg)}
       100%{background-image: url(/images/轮播图1.webp)}
       }
       .button-right{
       position: absolute;
       right: 1px;
       top: 50%;
       width: 41px;
       height: 69px;
       margin-top: -35px;
       z-index: 10;
       /* outline: none; */
       }
       .button-right i{
       position: absolute;
       display: block;
       font-style: normal;
       left: -14px;
       }
       .button-left{
       position: absolute;
       left: 234px;
       top: 50%;
       width: 41px;
       height: 69px;
       margin-top: -35px;
       z-index: 10;
       }
       .button-right,
       .button-left{
       font-family: 'icomoon';
       font-size: 55px;
       color: rgb(216, 216, 217);
       background-color: transparent;
       line-height: 69px;
       cursor: pointer;
       text-align: center;
       }
       .button-right:hover,
       .button-left:hover{
       color: #fff;
       background-color: rgb(124,124,126);
       }
       .hdm{
       position: absolute;
       width: 234px;
       height: 100%;
       background: rgba(105, 101, 101, .6);
       }
       .hdm ul{
       margin-top: 20px;
       }
       .hdm li{
       width: 100%;
       height: 42px;
       line-height: 42px;
       }
       .hdm .hdm-left{
       background: rgba(105, 101, 101, 0);
       }
       .hdm li a{
       color: #ffffff;
       font-size: 14px;
       text-decoration: none;
       margin-left: 21px;
       }
       .hdm i{
       float: right;
       font-style: normal;
       font-weight: 900;
       color: #e0e0e0;
       margin-right: 20px;
       }
       .hdm-list{
       position: absolute;
       top: 0px;
       left: 289px;
       width: 0px;/* 992px */
       height: 460px;
       background: #fff;
       margin-left: -55px;
       box-shadow: 0 1px 4px #aaa;
       text-align: center;
       /* font-size: 16px;
       color: #333;
       line-height: 1; */
       overflow: hidden;
       transition: height .3s;
       z-index: 20;
       }
       .hdm-list ul{
       float: left;
       margin-top: 0;
       }
       .hdm-list li{
       width: 247px;
       height: 76px;
       line-height: 76px;
       background-color: #fff;
       }
       .color-change{
       font-size: 12px;
       color: #000;
       font-weight: normal;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       transition: all .2s;
       }
       .hdm-list img{
       float: left;
       width: 40px;
       height: 40px;
       margin: 17px 14px 0 54px;
       }
       .hdm li:hover>.hdm-left{
       background-color: rgb(255,103,0);
       }
       .hdm li:hover>.hdm-list{
       width: 992px;
       }
       .hdm-list li:hover>.color-change{
       color: #ff6700;
       }
       /* 促销商品区 */
       .m2{
       height: 170px;
       margin-top: 20px;
       margin-bottom: 25px;
       }
       .sp-div{
       float: left;
       width: 316px;
       height: 170px;
       background-color: red;
       margin-left: 14px;

       }
       .sp-div img{
       width: 100%;
       }
       .sp-first{
       width: 234px;
       background-color: #5F5750;
       margin-left: 0;
       }
       .sp-last{
       transition: box-shadow .3s linear 0s;

       }
       .sp-last:hover{
       box-shadow: -5px 7px 23px 4px rgb(0,0,0,30%);
       }
       .sp-first li{
       float: left;
       position: relative;
       width: 70px;
       height: 82px;
       margin: 0 3px;
       /* background-color: red; */
       }
       .sp-first li a{
       display: block;
       padding-top: 18px;
       text-overflow: ellipsis;
       color: #fff;
       opacity: .7;
       font-size: 10px;
       text-align: center;
       transition: opacity 0.5s linear 0s;
       }
       .sp-first li a:hover{
       opacity: 1;
       }
       .sp-first li img{
       display: block;
       width: 24px;
       height: 24px;
       margin: 0 auto 4px;
       }
       .sp-first li::before{
       top: 0px;
       left: 6px;
       width: 64px;
       height: 1px;
       }
       .sp-first li::after{
       top: 6px;
       /* left: 0; */
       width: 1px;
       height: 70px;
       }
       .sp-first li::after,
       .sp-first li::before{
       position: absolute;
       content: "";
       background: #665e57;
       }
       /* 商品区 */
       .m{
       width: 100%;
       height: 2380px;
       background: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
       overflow: hidden;
       }
       .m3{
       height: 120px;
       margin-top: 30px;
       margin-bottom: 20px;
       }
       .m3 img{
       height: 100%;
       }
       .phone h2{
       font-size: 22px;
       font-weight: 200;
       color: #333;
       margin: 15px 0;
       }
       .phone-left{
       float: left;
       width: 234px;
       height: 614px;
       }
       .phone-left img{
       height: 100%;
       width: 100%;
       transition: all .2s linear 0s;
       }
       .phone-right{
       float: right;
       /* width: 992px; */
       height: 614px;
       text-align: center;
       }
       .right1{
       width: 992px;
       }
       .right2{
       width: 1226px;
       }
       .phone-right div{
       float: left;
       width: 234px;
       height: 300px;
       background-color: #FFFFFF;
       margin-left: 14px;
       margin-bottom: 14px;
       transition: all .3s linear 0s;
       }
       .phone-right div:hover,
       .phone-left img:hover{
       transform: translateY(-4px);
       box-shadow: -5px 7px 23px 4px rgb(0,0,0,30%);
       }
       .phone-right img{
       width: 160px;
       height: 160px;
       margin-top: 35px;
       }
       .phone-right h3{
       margin: 0 10px 2px;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
       font-size: 14px;
       font-weight: 400;
       color: #333;
       }
       .phone-right p{
       margin: 0 10px 10px;
       height: 18px;
       font-size: 12px;
       color: #b0b0b0;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
       }
       .phone-right i{
       font-style: normal;
       font-size: 14px;
       color: #ff6700;
       /* margin: 10px 0px 10px 14px; */
       }
       .phone{
       height: 614px;
       margin-bottom: 60px;
       }
       .phone-right .left-move{
       margin-left: 0px;
       }
       .phone-right .left-move img{
       width: 100%;
       height: 100%;
       margin-top: 0;
       }
       .phone-right del{
       color: #b0b0b0;
       font-size: 14px;

       }
       .phone-right .small-box{
       position: relative;
       z-index: 1;
       float: left;
       width: 234px;
       height: 143px;
       margin-left: 14px;
       margin-bottom: 14px;
       background: #fff;
       }
       .small-box i{
       display: block;
       margin: 0 125px 0 0;
       }
       .small-box h3{
       display: block;
       margin: -10px 110px 5px 30px;
       font-size: 14px;
       font-weight: 400;
       }
       .small-box img{
       /* display: inline-block; */
       float: right;
       position: absolute;
       width: 80px;
       height: 80px;
       }
       .small-box a{
       display: inline-block;
       margin: 61px -16px 0px -20px;
       }
       .small-box p{
       display: block;
       margin: 0 88px 0 0;
       }
       .small-box h2{
       font-family: 'icomoon';
       float: right;
       position: absolute;
       font-size: 48px;
       color: #ff6700;
       margin: 46px 0px 0px 151px;
       }
       .kong{
       height: 1px;
       }
       /* 踝部区 */
       .mm{
       height: 472px;
       }
       .m4{
       height: 80px;
       border-bottom: 1px solid #e0e0e0;
       }
       .mm ul{
       padding: 27px 0;
       }
       .mm ul li a{
       float: left;
       width: 19.7%;
       height: 25px;
       border-left: 1px solid #e0e0e0;
       font-size: 16px;
       line-height: 25px;
       text-align: center;
       color: #979797;
       font-weight: 400;
       transition: all .25s ;
       }
       .mm ul li a:hover{
       color: #ff6700;
       }
       .mm ul li i{
       font-family: 'icomoon';
       font-style: normal;
       font-size: 24px;
       }
       #border-out{
       border-left: 0px;
       }
       .m5{
       height: 312.5px;
       padding: 40px 0;
       }
       .footer-dl{
       float: left;
       width: 160px;
       }
       #footer-dl{
       margin-left: 160px;
       }
       .footer-dl dt{
       margin: -1px 0 26px;
       font-size: 14px;
       line-height: 1.25;
       color: #424242;
       }
       .footer-dl dd a{
       color: #757575;
       font-size: 12px;
       transition: all .3s;
       }
       .footer-dl dd a:hover{
       color: #ff6700;
       }
       .phone-number{
       float: right;
       width: 251px;
       border-left: 1px solid #e0e0e0;
       text-align: center;
       color: #616161;
       }
       .phone-number i{
       font-style: normal;
       font-size: 22px;
       line-height: 1;
       color: #ff6700;
       margin: 0 0 5px 0;
       }
       .phone-number p{
       margin: 0 0 5px 0;
       font-size: 12px;
       color: #616161;
       }
       .phone-number a{
       display: inline-block;
       font-family: 'icomoon';
       width: 118px;
       height: 28px;
       font-size: 12px;
       line-height: 28px;
       background: #fff;
       color: #ff6700;
       border: 1px solid #ff6700;
       transition: all .4s;
       }
       .phone-number a em{
       font-style: normal;
       font-size: 13px;
       }
       .phone-number a:hover{
       color: #fff;
       background-color: #ff6700;
       }
       /* 底部区 */
       .mmm{
       height: 210px;/* 204px */
       padding: 30px 0;
       font-size: 12px;
       background: #fafafa;
       }
       .m6{
       position: relative;
       height: 157px;
       color: #b0b0b0;
       padding-left: 77px;
       font-size: 12px;
       }
       .bottom-logo{
       width: 56px;
       height: 56px;
       margin-right: 20px;
       background: url(/images/logo.png) no-repeat;
       background-size: 56px;
       position: absolute;
       top: 0;
       left: 0;
       }
       .bottom-font{
       color: #b0b0b0;
       padding-left: 4px;
       font-size: 12px;
       }
       .bottom-img{
       height: 28px;
       margin: 4px 0 15px;
       padding-left: 5px;
       }
       .bottom-img img{
       width: auto;
       height: 28px;
       margin-left: 0;
       }
       .bottom-change{
       color: #757575;
       transition: all .2s;
       }
       .bottom-change:hover{
       color: #ff6700;
       }
       /* 功能区 */
       .set{
       position: fixed;
       right: 0;
       bottom: 40px;
       text-align: center;
       z-index: 99;
       }
       .set1,
       .set2{
       position: relative;
       margin-top: -1px;
       background-color: #fff;
       border: 1px solid #f5f5f5;
       width: 25px;
       height: 40px;
       /* text-align: center; */
       font-family: 'icomoon';
       }
       .set2{
       margin-top: 14px;
       }
       .set1 a,
       .set2 a{
       position: absolute;
       bottom: -2px;
       left: -2px;
       width: 30px;
       height: 30px;
       color: #757575;
       transition: opacity .3s;
       }
       .set1 :hover,
       .set2 :hover{
       color: #ff6700;
       }
       .set-1{
       display: block;
       width: 100px;
       height: 100px;
       margin: 6px auto;
       /* visibility: hidden; */
       }
       .set-2{
       display: block;
       width: 82px;
       margin: 14px auto 0;
       color: #757575;
       text-align: center;
       }
       .set-2max{
       width: 56px;
       font-size: 14px;
       margin-top: 0;
       }
       #set-{
       position: absolute;
       left: -138px;
       top: 0;
       padding: 14px;
       background: #fff;
       border: 1px solid #f5f5f5;
       transition: opacity .3s;
       /* transform: translateZ(0); */
       /* opacity: 0; */
       visibility: hidden;
       z-index: 99;
       }
       #set-change{
       position: absolute;
       left: -84px;
       top: 0;
       padding: 9px;
       background: #fff;
       border: 1px solid #f5f5f5;
       transition: opacity .3s;
       /* transform: translateZ(0); */
       /* opacity: 0; */
       visibility: hidden;
       z-index: 99;
       }
       .right-triango{
       position: absolute;
       height: 0;
       width: 0;
       border: 8px solid #fff;
       border-right: 0;
       border-top-color: transparent;
       border-bottom-color: transparent;
       top: 11px;
       right: -6px;
       z-index: 100;
       visibility: hidden;
       }
       .top-triango{
       z-index: 100;
       position: absolute;
       height: 0;
       width: 0;
       border: 8px solid white;
       border-top: 0;
       border-left-color: transparent;
       border-right-color: transparent;
       top: 32px;
       right: 12px;
       visibility: hidden;
       }
       .set1:hover>#set-,
       .set1:hover>#set-change,
       .set2:hover>#set-change{
       visibility: visible;
       }
       .last{
       clear: both;
       margin: 30px auto 0;
       width: 100%;
       height: 19px;
       background: url(/images/last.png) no-repeat center 0;
       </style>
   </head>
   <body>
       <div class="advertisement w2"></div>
       <div class="nav w2">
       <div class="header w1">
       <div class="nav-left">
       <ul>
       <li><a href="">小米商城</a><span>|</span></li>
       <li><a href="">MIUI</a><span>|</span></li>
       <li><a href="">IoT</a><span>|</span></li>
       <li><a href="">云服务</a><span>|</span></li>
       <li><a href="">天星数科</a><span>|</span></li>
       <li><a href="">有品</a><span>|</span></li>
       <li><a href="">小爱开放平台</a><span>|</span></li>
       <li><a href="">企业团购</a><span>|</span></li>
       <li><a href="">资质证照</a><span>|</span></li>
       <li><a href="">协议规则</a><span>|</span></li>
       <li>
       <div class="app">
       <a href="">下载app</a>
       <div class="top-triango"></div>
       <div class="sub-app">
       <img src="/images/导航栏1.png" alt="">
       <p>小米商城APP</p>
       </div>
       </div>
       </li>
       <li><a href=""><span>|</span>智能生活</a><span>|</span></li>
       <li><a href="">Select Location</a></li>
       </ul>
       </div>
       <div class="nav-right">
       <ul>
       <li class="car"><a href=""><i></i> 购物车  (0)</a>
       <div class="empty">你家购物车空了，穷鬼</div>
       </li>
       <li><a href="">消息通知</a></li>
       <li><a href="">注册</a><span>|</span></li>
       <li><a href="">登录</a><span>|</span></li>
       </ul>
       </div>
       </div>
       </div>
       <div class="big-sub">
       <div class="sub-main w1 ">
       <div class="sub-left">
       <ul>
       <li><img src="./img/12.png" alt="" title="小米官网"></li>
       <li><a href="">小米手机</a>
       <div class="left-change">
       <ul>
       <li class="left-change1"><img src="img/222.png" alt="">
       <p>Xiaomi Civi 2</p><i>2399元起</i>
       </li>
       <li><img src="img/222.png" alt="">
       <p>Xiaomi MIX Fold 2</p><i>8999元起</i>
       </li>
       <li><img src="./img/45.png" alt="">
       <p>Xiaomi 12S UIrea</p><i>5999元起</i>
       </li>
       <li><img src="./img/45.png" alt="">
       <p>Xiaomi 12S Pro</p><i>4399元起</i>
       </li>
       <li><img src="./img/、333.png" alt="">
       <p>Xiaomi 12S</p><i>3699元起</i>
       </li>
       <li><img src="./img/222.png" alt="">
       <p>Xiaomi 12 Pro 天玑版</p><i>2999元起</i>
       </li>
       </ul>
       </div>
       </li>
       <li><a href="">红米手机</a></li>
       <li><a href="">电视</a></li>
       <li><a href="">笔记本</a></li>
       <li><a href="">平板</a></li>
       <li><a href="">家电</a></li>
       <li><a href="">路由器</a></li>
       <li><a href="">服务中心</a></li>
       <li><a href="">社区</a></li>
       </ul>
       </div>
       <div class="sub-right">
       <input type="text" class="search" value="  iphone 14 pro max 暗夜紫">
       <button></button>
       </div>
       </div>
       </div>
       <div class="w2 m1">
       <div class="w1">
       <div class="lbt">
       <div class="button-left"></div>
       <div class="button-right"><i></i></div>
       <div class="hdm">
       <ul>
       <li><div class="hdm-left"><a href="">手机</a><i>></i></div></li>
       <li><div class="hdm-left"><a href="">电视</a><i>></i></div></li>
       <li><div class="hdm-left"><a href="">笔记本平板</a><i>></i></div></li>
       <li><div class="hdm-left"><a href="">出行穿戴</a><i>></i></div></li>
       <li><div class="hdm-left"><a href="">耳机音响</a><i>></i></div>
       <div class="hdm-list">
       </div>
       </li>
       <li><div class="hdm-left"><a href="">家电</a><i>></i></div></li>
       <li><div class="hdm-left"><a href="">智能路由器</a><i>></i></div></li>
       <li><div class="hdm-left"><a href="">电源配件</a><i>></i></div></li>
       <li><div class="hdm-left"><a href="">健康</a><i>></i></div></li>
       <li><div class="hdm-left"><a href="">生活箱包</a><i>></i></div></li>
       </ul>
       </div>
       </div>
       </div>
       </div>
       <div class="w2 m2">
       <div class="w1">
       <div class="sp-div sp-first">
       <ul>
       <li><a href=""><img src="./img/6.jpg" alt="">保障服务</a></li>
       <li><a href=""><img src="./img/、333.png" alt="">企业团购</a></li>
       <li><a href=""><img src="./img/5.jpg" alt="">F码通道</a></li>
       <li><a href=""><img src="./img/5.jpg" alt="">米粉卡</a></li>
       <li><a href=""><img src="./img/9.jpg" alt="">以旧换新</a></li>
       <li><a href=""><img src="./img/8.jpg" alt="">话费充值</a></li>
       </ul>
       </div>
       <div class="sp-div sp-last"><a href=""><img src="./img/5.jpg" alt=""></a></div>
       <div class="sp-div sp-last"><a href=""><img src="./img/9.jpg" alt=""></a></div>
       <div class="sp-div sp-last"><a href=""><img src="./img/5.jpg" alt=""></a></div>
       </div>
       </div>
       <div class="m">
       <div class="w1 m3"><a href=""><img src="./img/k.jpg" alt=""></a></div>
       <div class="w1 phone">
       <h2>手机</h2>
       <div class="phone-left">
       <a href="">
       <img src="./img/266.jpg" alt="">
       </a>
       </div>
       <div class="phone-right right1">
       <div><img src="./img/001.jpg" alt="">
       <h3>Redmi Note 12 5G</h3>
       <p>三星 OLED 护眼屏｜骁龙 5G 芯｜5000mAh 电量</p>
       <i>1199元起</i>
       </div>
       <div><img src="./img/001.jpg" alt="">
       <h3>Redmi K50</h3>
       <p>2K直屏的狠旗舰</p>
       <i>1699元起</i>
       </div>
       <div><img src="./img/001.jpg" alt="">
       <h3>Redmi Note 12 Pro</h3>
       <p>IMX766 防抖相机｜OLED 柔性直屏｜67W 闪充</p>
       <i>2099元起</i>
       </div>
       <div><img src="./img/996.jpg" alt="">
       <h3>Redmi Note 12 Pro+</h3>
       <p>2亿超清防抖相机｜OLED 柔性直屏</p>
       <i>1099元起</i>
       </div>
       <div><img src="./img/996.jpg" alt="">
       <h3>Redmi Note 11 5G</h3>
       <p>5000mAh大电量</p>
       <i>2099元起</i>
       </div>
       <div><img src="./img/996.jpg" alt="">
       <h3>Redmi Note 11T Pro</h3>
       <p>天玑8100｜真旗舰芯</p>
       <i>1599元起</i>
       </div>
       <div><img src="./img/001.jpg" alt="">
       <h3>Xiaomi 12S Pro</h3>
       <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
       <i>4399元起</i>
       </div>
       <div><img src="./img/5.jpg" alt="">
       <h3>Redmi K50 至尊版</h3>
       <p>骁龙8+ ｜1.5K 高清直屏</p>
       <i>2699元起</i>
       </div>
       </div>
       </div>
       <div class="w1 phone">
       <h2>智能家居</h2>
       <div class="phone-right right2">
       <div class="left-move"><img src="./img/44.jpg" alt="">
       </div>
       <div><img src="./img/n.jpg" alt="">
       <h3>小米小爱音箱 Pro</h3>
       <p>澎湃低音，语音遥控传统家电</p>
       <i>899元</i> <del>999元</del>
       </div>
       <div><img src="./img/b.jpg" alt="">
       <h3>小米AI音箱（第二代）</h3>
       <p>低频饱满有深度，人声清晰有细节</p>
       <i>199元</i> <del>299元</del>
       </div>
       <div><img src="img/p.jpg" alt="">
       <h3>Xiaomi智能家庭屏 10</h3>
       <p>MIUI Home｜10.1" 高清大屏｜115°超广角摄像头｜儿童模式｜家庭 KTV｜小爱同学</p>
       <i>499元</i> <del>599元</del>
       </div>
       <div><img src="./img/n.jpg" alt="">
       <h3>小米小爱音箱Play 增强版</h3>
       <p>LED时钟显示，语音控制传统家电</p>
       <i>99元</i> <del>199元</del>
       </div>
       <div class="left-move"><img src="./img/d.jpg" alt="">
       </div>
       <div><img src="./img/f.jpg" alt="">
       <h3>小米小爱音箱 Play</h3>
       <p>听音乐、语音遥控家电</p>
       <i>219元</i> <del>299元</del>
       </div>
       <div><img src="./img/s.jpg" alt="">
       <h3>小米小爱触屏音箱</h3>
       <p>可视化智能家居，海量视听资源</p>
       <i>269元</i> <del>299元</del>
       </div>
       <div><img src="./img/f.jpg" alt="">
       <h3>Xiaomi Sound</h3>
       <p>HARMAN工程师专业调音，高保真震撼音质</p>
       <i>179元</i> <del>199元</del>
       </div>

       <div class="small-box"><img src="./3355.png" alt=""><a href=""></a>
       <h3>小米小爱音箱</h3>
       <i>209元</i></a>
       </div>
       <div class="small-box">
       <h2></h2><a href="">
       <h3>浏览更多</h3>
       <p>小爱音响</p>
       </a>
       </div>
       </div>
       </div>
       <div class="kong"></div>
       <div class="w1 m3"><a href=""><img src="./img/x.jpg" alt=""></a></div>
       <div class="w1 phone">
       <h2>智能</h2>
       <div class="phone-right right2">
       <div class="left-move"><img src="./img/z.jpg" alt="">
       </div>
       <div><img src="./img/n.jpg" alt="">
       <h3>米家声波电动牙刷T700</h3>
       <p>智能洁齿丨强劲动力</p>
       <i>29元</i> <del>39元</del>
       </div>
       <div><img src="./img/n.jpg" alt="">
       <h3>米家电动剃须刀S500</h3>
       <p>3刀头360°浮动丨超长续航</p>
       <i>159元</i> <del>179元</del>
       </div>
       <div><img src="./img/a.jpg" alt="">
       <h3>米家理发器</h3>
       <p>米家理发器</p>
       <i>129元</i> <del>149元</del>
       </div>
       <div><img src="./img/d.jpg" alt="">
       <h3>米家自动洗手机套装</h3>
       <p>伸手出泡，抑菌有效</p>
       <i>69元</i> <del>79元</del>
       </div>
       <div class="left-move"><img src="./img/f.jpg" alt="">
       </div>
       <div><img src="./img/s.jpg" alt="">
       <h3>米家电动冲牙器</h3>
       <p>超长待机丨4挡模式</p>
       <i>199元</i> <del>219元</del>
       </div>
       <div><img src="./img/f.jpg" alt="">
       <h3>电动牙刷</h3>
       <p>过压提醒丨健康报告</p>
       <i>159元</i> <del>199元</del>
       </div>
       <div><img src="./img/8.jpg" alt="">
       <h3>米家电子体温计</h3>
       <p>快速知体温，精准更智能</p>
       <i>89元</i> <del>99元</del>
       </div>
       <div class="small-box"><img src="./img/s.jpg" alt=""><a href=""></a>
       <h3>米家电子体温计</h3>
       <i>89元</i></a>
       </div>
       <div class="small-box">
       <h2></h2><a href="">
       <h3>浏览更多</h3>
       <p>健康防护</p>
       </a>
       </div>
       </div>
       </div>
       </div>
       <div class="w2 mm">
       <div class="w1 m4">
       <ul>
       <li><a href="" id="border-out"><i></i> 预约维修服务</a></li>
       <li><a href=""><i></i> 7天无理由退货</a></li>
       <li><a href=""><i></i> 15天免费换货</a></li>
       <li><a href=""><i></i> 满69元包邮</a></li>
       <li><a href=""><i></i> 1100余家售后网点</a></li>
       </ul>
       </div>
       <div class="w1 m5">
       <dl class="footer-dl" id="footer-dl">
       <dt>选购指南</dt>
       <dd><a href="">手机</a></dd>
       <dd><a href="">电视</a></dd>
       <dd><a href="">笔记本</a></dd>
       <dd><a href="">平板</a></dd>
       <dd><a href="">穿戴</a></dd>
       <dd><a href="">耳机</a></dd>
       <dd><a href="">家电</a></dd>
       <dd><a href="">路由器</a></dd>
       <dd><a href="">音箱</a></dd>
       <dd><a href="">配件</a></dd>
       </dl>
       <dl class="footer-dl">
       <dt>服务中心</dt>
       <dd><a href="">申请售后</a></dd>
       <dd><a href="">售后服务</a></dd>
       <dd><a href="">维修服务价格</a></dd>
       <dd><a href="">订单查询</a></dd>
       <dd><a href="">以旧换新</a></dd>
       <dd><a href="">保障服务</a></dd>
       <dd><a href="">防伪查询</a></dd>
       <dd><a href="">F码通道</a></dd>
       </dl>
       <dl class="footer-dl">
       <dt>线下门店</dt>
       <dd><a href="">小米之家</a></dd>
       <dd><a href="">服务网点</a></dd>
       <dd><a href="">授权体验</a></dd>
       </dl>
       <dl class="footer-dl">
       <dt>关于小米</dt>
       <dd><a href="">了解小米</a></dd>
       <dd><a href="">加入小米</a></dd>
       <dd><a href="">投资者关系</a></dd>
       <dd><a href="">环境，社会管制</a></dd>
       <dd><a href="">廉洁举报</a></dd>
       </dl>
       <dl class="footer-dl">
       <dt>关注我们</dt>
       <dd><a href="">新浪微博</a></dd>
       <dd><a href="">官方微信</a></dd>
       <dd><a href="">联系我们</a></dd>
       <dd><a href="">公益基金会</a></dd>
       </dl>
       <div class="phone-number">
       <i>400-100-5678</i>
       <p>8:00-18:00 （仅收市话费）</p>
       <a href=""><em></em> 人工客服</a>
       </div>
       </div>
       </div>
       <div class="w2 mmm">
       <div class="m6 w1">
       <div class="bottom-logo"></div>
       <div class="bottom-font">
       <p><a href="" class="bottom-change">小米商城</a>|<a href="" class="bottom-change"> MIUI </a>|<a href=""
       class="bottom-change">米家</a>|<a href="" class="bottom-change">米聊</a>|<a href=""
       class="bottom-change">多看</a>|<a href="" class="bottom-change">游戏</a>|<a href=""
       class="bottom-change">政企服务</a>|<a href="" class="bottom-change">小米天猫店</a>|<a href=""
       class="bottom-change">小米集团隐私政策</a>|<a href="" class="bottom-change">小米公司儿童信息保护规则</a>|<a href=""
       class="bottom-change">小米商城隐私政策</a>|<a href="" class="bottom-change">小米商城用户协议</a>|<a href=""
       class="bottom-change">问题反馈</a>|<a href="" class="bottom-change">Select Location</a></p>
       <p><a href="" class="bottom-change">北京互联网法院法律服务工作站</a>|<a href="" class="bottom-change">中国消费者协会</a>|<a
       href="" class="bottom-change">北京市消费者协会</a></p>
       <p>© mi.com京ICP证110507号 京ICP备10046444号 公网安备11010802020134号 京网文[2020]0276-042号<br>
       (京) 网械平台备字 (2018) 第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
       增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证<br>
       违法和不良信息举报电话: 171-5104-4404 知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
       </p>
       </div>
       <div class="bottom-img">
       <img src="/images/底部1.png" alt="">
       <img src="/images/底部2.png" alt="">
       <img src="/images/底部3.png" alt="">
       <img src="/images/底部4.png" alt="">
       <img src="/images/底部5.png" alt="">
       </div>
       <div class="last"></div>
       </div>
       </div>
       <div class="set">
       <div class="set1">
       <a href=""></a>
       <div id="set-">
       <img src="/images/底部6.png" alt="" class="set-1">
       <span class="set-2">扫码领取新人百元礼包</span>
       <div class="right-triango"></div>
       </div>
       </div>
       <div class="set1">
       <a href=""></a>
       <div id="set-change">
       <span class="set-2 set-2max">个人中心</span>
       <div class="right-triango"></div>
       </div>
       </div>
       <div class="set1">
       <a href=""></a>
       <div id="set-change">
       <span class="set-2 set-2max">售后服务</span>
       <div class="right-triango"></div>
       </div>
       </div>
       <div class="set1">
       <a href=""></a>
       <div id="set-change">
       <span class="set-2 set-2max">人工客服</span>
       <div class="right-triango"></div>
       </div>
       </div>
       <div class="set1">
       <a href=""></a>
       <div id="set-change">
       <span class="set-2 set-2max">购物车</span>
       <div class="right-triango"></div>
       </div>
       </div>
       <div class="set2">
       <a href=""></a>
       <div id="set-change">
       <span class="set-2 set-2max">回到顶部</span>
       <div class="right-triango"></div>
       </div>
       </div>
       </div>
   </body>
</html>