<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href=".css"><link rel="stylesheet" href="./CSS/reset.CSS"><link rel="stylesheet" href="./CSS/index.css">
</head><body><div class="mi"></div><div class="top"><div class="box"><div class="box1"><a href="##" class="box1-a1">小米官网</a><a href="##" class="box1-a2">小米商城</a><a href="##" class="box1-a3">MIUI</a><a href="##" class="box1-a4">loT</a><a href="##" class="box1-a5">云服务</a><a href="##" class="box1-a6">天星数科</a><a href="##" class="box1-a7">有品</a><a href="##" class="box1-a8">小爱开放平台</a><a href="##" class="box1-a9">资质证照</a><a href="##" class="box1-a10">协议规则</a><a href="##" class="app">下载app<div class="qr"><div class="qr-app"><img src="./images/download.png" ><br> 小米商城APP</div></div></a><a href="##">Select Location</a></div><div><div class="box2"><a href="##" class="box2-a1">登录</a><a href="##" class="box2-a2">注册</a><a href="##" class="box2-a3">消息通知</a><a href="##" class="nav"><span class="iconfont icon-gouwuchekong"></span>购物车（0）<div class="shopping"><div class="shopping-box">购物车中还没有商品，赶紧选购吧！</div></div></a></div></div></div></div><div class="top1"><div><img src="./images/logo-mi2.png"></div><div class="box3"><a href="##">Xiaomi手机</a><a href="##">Redmi手机</a><a href="##">电视</a><a href="##">笔记本</a><a href="##">平板</a><a href="##">家电</a><a href="##">路由器</a><a href="##">服务中心</a><a href="##">社区</a></div><div class="nav-search"><form action="" method="get"><input type="text" name="keyword"><button><span class="iconfont icon-31sousuo"></span></button><div class="form-box"></div></form></div></div><div class="banner"><div class="banner-one"> <div class="banner-box"><img src="./images/afec7c28eaa95a6126f33af275b04164.png"></div><div class="banner-box1"><img src="./images/lunbo.jpeg" ></div><div class="banner-box2"><img src="./images/lunbo1.webp" ></div><div class="banner-box3"><img src="./images/lunbo2.webp" ></div><div class="banner-box"><img src="./images/afec7c28eaa95a6126f33af275b04164.png" ></div></div><div class="banner-left"><div><div>手机</div><div>电视</div><div>家电</div><div>笔记本 平板</div><div>出行 穿戴</div><div>耳机 音箱</div><div>健康 儿童</div><div>生活 箱包</div><div>智能路由器 </div><div>电源 配件</div></div></div></div></div><div class="ad"><div class="ad-one"><div class="ad-one-box"><img src="./images/ad-left1.png" ><br>保障服务</div><div class="ad-one-box1"><img src="./images/ad-left2.png" ><br>企业团购</div><div class="ad-one-box2"><img src="./images/ad-left3.png" ><br>F码通道</div><div class="ad-one-box3"><img src="./images/ad-left4.png" ><br>米粉卡</div><div class="ad-one-box4"><img src="./images/ad-left5.png" ><br>以旧换新</div><div class="ad-one-box5"><img src="./images/ad-left6.png" ><br>话费充值</div></div><div class="ad-two"><img src="./images/ad1.jpeg" alt=""></div><div class="ad-three"><img src="./images/ad2.jpg" alt=""></div><div class="ad-four"><img src="./images/ad3.png" alt=""></div></div><div class="top-box"><img src="./images/1a7f2dc81ede03fdb143e84e11eb550e.webp" alt=""></div><div class="top-box1"><h2 class="title">手机</h2><div class="more"><a href="##">查看更多</a><i class="iconfont icon-xiangyou3"></i></div></div><div class="phone"><div class="k60 phone-box1-img"><img src="./images/k60.webp"></div><div class="phone-box1"><div class="phone-box1-img"><img src="./images/note13Pro.webp" alt=""><h3>Redmi Note 13 Pro</h3><a> 小金刚品质</a><p><br>1499元起</p></div><div class="phone-box1-img"><img src="./images/note13Pro+.webp" alt=""><h3>Redmi Note 13 Pro+</h3><a> 天玑 7200-Ultra 处理器</a><p><br>1999元起</p></div><div class="phone-box1-img"><img src="./images/note13.webp" alt=""><h3>Redmi Note 13 Pro 5G</h3><a> 1 亿像素 更快更清晰</a><p><br>1099元起</p></div><div class="phone-box1-img"><img src="./images/MIX Fold 3.webp" alt=""><h3>Xiaomi MIX Fold 3</h3><a>轻薄折叠屏丨徕卡光学丨全焦段四摄</a><p><br>8999元起</p></div><div class="phone-box1-img"><img src="./images/K60Ultra.webp" alt=""><h3>Redmi K60 至尊版</h3><a> 旗舰体验全面超预期</a><p><br>2599元起</p></div><div class="phone-box1-img"><img src="./images/12.webp"><h3> Redmi 12 5G</h3><a> 5G 骁龙芯，大屏大电量 </a><p><br> 949元起</p></div><div class="phone-box1-img"><img src="./images/note 12T Pro.webp" alt=""><h3>Redmi Note 12T Pro</h3><a> 年度 LCD 屏幕之光</a><p><br> 1499元起</p></div><div class="phone-box1-img"><img src="./images/civi3.webp" alt=""><h3> Xiaomi Civi 3</h3><a>   仿生双眸 天生出色</a><p><br>2499元起</p></div></div></div></div><div class="bottom-ad"><img src="./images/Bottom.webp" alt=""></div><div class="bottom"><div class="bottom-box1"><span class="iconfont icon-banshou"></span>预约维修服务<span class="iconfont icon-7tianwuliyoutuihuo"></span>七天无理由退货<span class="iconfont icon-15tianwuliyoutuihuo"></span>15天免费换货<span class="iconfont icon-liwuhuodong"></span>满69元包邮<span class="iconfont icon-weizhi"></span>1100余家售后网点</div><div class="bottom-box2"><div class="bottom-left">选购指南<p>手机</p><p>电视</p><p>笔记本</p><p>平板</p><p>穿戴</p><p>耳机</p><p>家电</p><p>路由器</p><p>音箱</p><p>配件</p></div><div class="bottom-left1">服务中心<p>申请售后</p><p>售后政策</p><p>维修服务价格</p><p>订单查询</p><p>以旧换新</p><p>保障服务</p><p>防伪查询</p><p>F码通道</p></div><div class="bottom-left2">线下门店<p>小米之家</p><p>服务网点</p><p>笔授权体验店/专区</p></div><div class="bottom-left3">关于小米<p>了解小米</p><p>加入小米</p><p>投资者关系</p><p>可持续发展</p><p>廉洁举报</p></div><div class="bottom-left4">关注我们<p>新浪微博</p><p>官方微信</p><p>联系我们</p><p>公益基金会</p></div><div class="bottom-right"><span>400-100-5678</span><div>8:00-18:00（仅收市话费）</div><button><ul class="iconfont icon-duihuakuang4">人工客服</ul></button></div ></div><div class="Xiaomi"><img src="./images/bottom.png" alt=""></div></div><div class="position-right"><img src="./images/phone.png"><br> 手机APP</div><div class="position-right1"><img src="./images/geren.png"><br> 个人中心</div><div class="position-right2"><img src="./images/banshou.png"><br> 售后服务</div><div class="position-right3"><img src="./images/kefu.png"><br> 人工客服</div><div class="position-right4"><img src="./images/gouwuche.png"><br> 购物车</div><div class="position-right5"><a href="#top"><img src="./images/dingbu.png" ><br> 回顶部</a></div>
</body></html>body {margin: 0px;width: 100%;background-color: #f5f5f5;}.top {width: 100%;height: 40px;background-size: cover;margin: 0 auto;background-color: #333333;
}.box {width: 1226px;height: 40px;background-color: #333333;display: flex;justify-content: space-between;margin: 0 auto;line-height: 40px;
}.box1 a {color: #b0b0b0;text-decoration: none;font-size: 12px;margin: 10px;line-height: 40px;}.box1 a:hover {color: cornflowerblue;
}.box2 a {color: #b0b0b0;text-decoration: none;font-size: 12px;margin: 0 7px;line-height: 40px;
}.box2 a:hover {color: cornflowerblue;
}.app {position: relative;z-index: 999;
}.nav-search {z-index: 999;
}.qr {width: 124px;height: 148px;position: absolute;left: -40px;background-color: #fff;line-height: 40px;box-shadow: 0 1px 5px #aaa;display: none;
}.qr img {width: 90px;height: 90px;text-align: center;margin-left: 15px;margin-top: 10px;position: relative;font-size: 14px;
}.app:hover .qr {display: block;color: #b0b0b0;
}.top1 {width: 1226px;height: 100px;background-size: cover;display: flex;justify-content: space-around;margin: 0 auto;
}.top1 img {width: 56px;height: 56px;margin-top: 20px;margin-left: -60px;
}.top1 a {font-size: 16px;color: #333333;width: 800px;height: 0px;margin: 5px;line-height: 100px;text-decoration: none;
}.top1 a:hover {color: rgb(255, 103, 0);
}.top1 .box3 {margin-left: 50px;
}.shopping {position: relative;padding-left: 20px;z-index: 1000;right: 75px;top: -1px;}.shopping-box {width: 316px;height: 100px;color: #333333;background-color: #fff;box-shadow: 0 1px 5px #aaa;position: absolute;left: 3px;top: 0px;line-height: 100px;text-align: center;display: none;
}.nav:hover .shopping-box {display: block;
}.nav-search form {display: flex;margin-top: 26px;margin-right: -117px;position: relative;
}.nav-search input {border: 1px solid #e0e0e0;height: 48px;width: 245px;text-indent: 1em;border-right: 0;
}.nav-search {margin-right: 55px;
}.nav-search button {width: 50px;height: 50px;border: 1px solid #e0e0e0;background-color: #fff;color: #616161;font-weight: bold;border: left 0;
}.nav-search form:hover input {border: 1px solid #515151;border-bottom: none;border-right: none;
}.nav-search form input:focus {border-color: #ff7600;
}.nav-search form input:focus+button {border-color: #ff7600;
}.nav-search form:hover button {border: 1px solid #515151;
}.nav-search form button:hover {background-color: #ff7600;color: #fff;border-color: #ff7600;
}.form-box {width: 245px;height: 300px;background-color: #fff;border: 1px solid #000000;position: absolute;top: 49px;left: 0;display: none;
}.banner-one {width: 4904px;display: flex;animation: run 20s linear infinite;
}@keyframes run {0% {transform: translateX(0);}12.5% {transform: translateX(-1226px);}25% {transform: translateX(-1226px);}37.5% {transform: translateX(-2452px);}50% {transform: translateX(-2452px);}62.5% {transform: translateX(-3678px);}75% {transform: translateX(-3678px);}87.5% {transform: translateX(-4904px);}100% {transform: translateX(-4904px);}
}.banner-one:hover {animation-play-state: paused;
}.banner-one img {width: 1226px;height: 460px;
}.nav-search:hover .form-box {display: block;
}.banner {width: 1226px;height: 460px;margin: 0 auto;position: relative;overflow: hidden;
}.banner-box img {width: 1226px;height: 460px;
}.banner-left {width: 234px;height: 460px;background-color: rgb(155, 154, 158);position: absolute;top: 0;
}.banner-left div {color: #fff;font-size: 14px;margin-top: 25px;margin-left: 15px;
}.ad {width: 1226px;height: 170px;margin: 0 auto;margin-top: 30px;display: flex;position: relative;
}.ad-one-box::after {content: "";background-color: #665e57;width: 1px;height: 64px;position: absolute;top: 5px;left: 75px;
}.ad-one-box1::after {content: "";background-color: #665e57;width: 1px;height: 64px;position: absolute;bottom: 5px;left: 75px;
}.ad-one-box3::after {content: "";background-color: #665e57;width: 1px;height: 64px;position: absolute;top: 5px;left: 150px;
}.ad-one-box4::after {content: "";background-color: #665e57;width: 1px;height: 64px;position: absolute;bottom: 5px;left: 150px;
}.ad-one-box::before {content: "";background-color: #665e57;width: 64px;height: 1px;position: absolute;top: 85px;left: 81px;
}.ad-one-box1::before {content: "";background-color: #665e57;width: 64px;height: 1px;position: absolute;top: 85px;left: 5px;
}.ad-one-box2::before {content: "";background-color: #665e57;width: 64px;height: 1px;position: absolute;top: 85px;left: 160px;
}.ad .ad-one {width: 234px;height: 170px;background-color: rgb(95, 87, 80);display: flex;flex-wrap: wrap;
}.ad .ad-one div {width: 76px;height: 82px;text-align: center;margin-top: 15px;font-size: 12px;color: rgb(207, 205, 203);
}.ad .ad-two {width: 316px;height: 170px;margin-left: 18px;
}.ad .ad-three {width: 316px;height: 170px;margin-left: 13px;
}.ad .ad-four {width: 316px;height: 170px;margin-left: 13px;
}.ad .ad-one img {width: 24px;height: 24px;
}.ad .ad-two img {width: 316px;height: 170px;
}.ad-two {transition: all 500ms;
}.ad .ad-two:hover {box-shadow: 0 0px 20px #aaa;
}.ad-three {transition: all 500ms;
}.ad .ad-three:hover {box-shadow: 0 0px 20px #aaa;
}.ad-four {transition: all 500ms;
}.ad .ad-four:hover {box-shadow: 0 0px 20px #aaa;
}.ad .ad-three img {width: 316px;height: 170px;
}.ad .ad-four img {width: 316px;height: 170px;
}.top-box {width: 1226px;height: 120px;margin: 0 auto;margin-top: 30px;
}.top-box img {width: 1226px;height: 120px;
}.top-box1 {width: 1226px;height: 58px;margin: 0 auto;margin-top: 30px;display: flex;justify-content: space-between;
}.title {font-size: 22px;font-weight: 200;line-height: 58px;color: #333;
}.more {width: 92px;height: 17.6px;
}.more .a,
.i {color: #424242;font-size: 16px;text-decoration: none;
}.top-box1 div:hover {color: #ff7600;
}.top-box1 a:hover {color: #ff7600;text-decoration: none;
}.phone {width: 1226px;height: 614px;margin: 5px auto;display: flex;background-color: #f5f5f5;padding: 0;
}.k60 img {width: 234px;height: 614px;
}.phone-box1 {width: 992px;height: 614px;display: flex;flex-wrap: wrap;margin-left: 6px;padding: 0;
}.phone-box1-img {transition: all 500ms;padding: 0;
}.phone-box1-img:hover {transform: translate(0px, -4px);box-shadow: 0 1px 20px #aaa;
}.phone-box1 img {width: 160px;height: 160px;margin-top: 20px;margin-left: 35px;
}.phone-box1 h3 {margin-left: 50px;font-size: 14px;
}.phone-box1 a {color: #b0b0b0;font-size: 12px;margin-left: 20px;text-decoration: none;
}.phone-box1 div {width: 234px;height: 300px;background-color: #fff;margin: 13px 6px;margin-top: 0px;
}.phone-box1 p {color: #ff6700;margin-left: 70px;
}.bottom-ad {width: 1226px;height: 120px;margin: 0 auto;margin-top: 30px;
}.bottom-ad img {width: 1226px;height: 120px;
}.bottom {width: 1226px;height: 100vh;margin: 0 auto;margin-top: 30px;
}.bottom-box1 {width: 1226px;height: 79.8px;font-size: 16px;color: #616161;position: relative;;
}.bottom-box1 .icon-banshou {font-size: 24px;line-height: 80px;margin-left: 35px;
}.bottom-box1 .icon-7tianwuliyoutuihuo {font-size: 24px;line-height: 80px;margin-left: 70px;
}.bottom-box1 .icon-15tianwuliyoutuihuo {font-size: 24px;line-height: 80px;margin-left: 105px;
}.bottom-box1 .icon-liwuhuodong {font-size: 24px;line-height: 80px;margin-left: 140px;
}.bottom-box1 .icon-weizhi {font-size: 24px;line-height: 80px;margin-left: 150px;
}.bottom-box2 {}.bottom-box1::before {content: "";background-color: #e0e0e0;width: 1226px;height: 1px;position: absolute;bottom: 0;
}.icon-banshou::after {content: "";background-color: #e0e0e0;width: 1px;height: 25px;position: absolute;left: 200px;top: 30px;
}.icon-7tianwuliyoutuihuo::after {content: "";background-color: #e0e0e0;width: 1px;height: 25px;position: absolute;left: 425px;top: 30px;
}.icon-15tianwuliyoutuihuo::after {content: "";background-color: #e0e0e0;width: 1px;height: 25px;position: absolute;left: 675px;top: 30px;
}.icon-weizhi::after {content: "";background-color: #e0e0e0;width: 1px;height: 25px;position: absolute;left: 940px;top: 30px;
}.bottom-box2 {margin-left: 100px;position: relative;width: 1226px;height: 392.5px;
}.bottom-left {width: 160px;height: 312.5px;margin-top: 38px;margin-left: 30px;font-size: 14px;
}.bottom-left1 {width: 160px;height: 312.5px;margin-top: -314px;margin-left: 200px;font-size: 14px;
}.bottom-left2 {width: 160px;height: 312.5px;margin-top: -314px;margin-left: 370px;font-size: 14px;
}.bottom-left3 {width: 160px;height: 312.5px;margin-top: -314px;margin-left: 540px;font-size: 14px;
}.bottom-left4 {width: 160px;height: 312.5px;margin-top: -314px;margin-left: 710px;font-size: 14px;position: relative;
}.bottom-right {width: 251.8px;height: 79.6px;margin-top: -314px;margin-left: 973px;
}.bottom-box2 p {font-size: 12px;margin-top: 10px;color: #757575;margin-top: 13px;
}.bottom-box2 p:hover {color: #ff6700;
}.bottom-left4::after {content: "";background-color: #e0e0e0;width: 1px;height: 79.6px;position: absolute;top: 0;right: 30px;
}.bottom-right {width: 251.8px;height: 79.6px;position: absolute;right: 50px;
}.bottom-right span {font-size: 22px;color: #ff6700;
}.bottom-right div {font-size: 12px;color: #616161;margin-top: 10px;}.bottom-right button {margin-top: 10px;width: 118px;height: 28px;border: 1px solid #ff6700;
}.icon-duihuakuang4 {color: #ff6700;
}.bottom-right button:hover {background-color: #ff6700;
}.bottom-right ul:hover {color: #fff;
}.Xiaomi {height: 19px;margin-left: 400px;margin-top: 30px;
}.Xiaomi img {width: 368px;height: 21px;
}.position-right {position: fixed;top: 128px;right: 0px;width: 83.6px;height: 91.6px;background-color: #fff;color: #999999;
}.position-right img {width: 30px;height: 30px;margin-top: 20px;margin-left: 25px;
}.position-right1 {position: fixed;top: 220px;right: 0px;width: 83.6px;height: 91.6px;background-color: #fff;color: #999999;
}.position-right1 img {width: 30px;height: 30px;margin-left: 25px;margin-top: 20px;
}.position-right2 {position: fixed;top: 310px;right: 0px;width: 83.6px;height: 91.6px;background-color: #fff;color: #999999;
}.position-right2 img {width: 30px;height: 30px;margin-left: 25px;margin-top: 20px;
}.position-right3 {position: fixed;top: 380px;right: 0px;width: 83.6px;height: 91.6px;background-color: #fff;color: #999999;
}.position-right3 img {width: 30px;height: 30px;margin-left: 25px;margin-top: 20px;
}.position-right4 {position: fixed;top: 460px;right: 0px;width: 83.6px;height: 91.6px;background-color: #fff;color: #999999;
}.position-right4 img {width: 30px;height: 30px;margin-left: 25px;margin-top: 20px;
}.position-right5 {position: fixed;top: 580px;right: 0px;width: 83.6px;height: 91.6px;background-color: #fff;color: #999999;
}.position-right5 img {width: 30px;height: 30px;margin-left: 25px;margin-top: 20px;
}.position-right5 a {text-decoration: none;color: #999999;
}本文发布于:2024-02-01 12:56:26，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170676338736748.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
