admin管理员组文章数量:1530298
一：页面展示
1.主页轮播图展现
2.商品列表滑动显示
3.购物车滑动显示添加提醒
4.商品分类展示
5.登录界面
账号密码输入提醒
6.注册界面
下拉列表选择地区
二：相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<script src="./js/index.js"></script>
<script src="./js/swiper.min.js"></script>
<title>小米官网首页</title>
</head>
<body>
<!-- 导航栏1 -->
<div class="nav-box">
<div class="w">
<ul class="nav-xl">
<li><a href="#">小米商城</a></li>
<li><a href="#">MUI</a></li>
<li><a href="#">loT</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>
<li><a href="#">下载APP</a>
<div class="download">
<img src="./image/xiaomi-android.png">
<P>小米商城APP</P>
</div>
<div class="triangle"></div>
</li>
<li><a href="#">智能生活</a></li>
<li><a href="#">Select Location</a></li>
</ul>
<div class="nav-xr">
<form action="#">
<li><a href="./login.html" id="indexDL">登录</a></li>
<li><a href="./zhuce.html" id="indexZC">注册</a></li>
<!-- <a href="login.html"><input type="submit" value="登录" name="login" id="indexDL"></a>-->
<!-- <input type="submit" value="注册" name="register" id="indexZC">-->
</form>
<li><a href="#">消息通知</a></li>
<li id="gwc">
<span class="glyphicon glyphicon-shopping-cart gwc">购物车(0)</span>
<div class="gwc-list">购物车中还没有商品,赶紧选购吧！</div>
</li>
</div>
</div>
</div>
<div class="banner-box">
<!-- 导航栏2 -->
<div class="nav2-box">
<div class="w">
<div class="logo">
<img src="./image/This_is_tow_Mi.png" alt="">
</div>
<ul class="nav-m">
<li>
<a href="#">Xiaomi手机</a>
<div class="nav-item1 ">
<div class="w">
<ul class='nav-phone'>
<li>
<img src="./image/images/Mi_images//Mi10.webp" alt="">
<a href="#">
<p>Xiaomi MIX 4</p>
<p>4999元起</p>
</a>
</li>
<li>
<img src="./image/images/Mi_images/Mi_10pro.jpg" alt="">
<a href="#">
<p>小米MIX FOLD</p>
<p>9999元起</p>
</a>
</li>
<li>
<img src="./image/images/Mi_images/Mi_cc9e.png" alt="">
<a href="#">
<p>小米11 UItra</p>
<p>5499元起</p>
</a>
</li>
<li>
<img src="./image/images/Mi_images/Mi_cc9定制.png" alt="">
<a href="#">
<p>小米11 Pro</p>
<p>4499元起</p>
</a>
</li>
<li>
<img src="./image/images/Mi_images/Micc9.png" alt="">
<a href="#">
<p>小米11 青春版</p>
<p>2099元起</p>
</a>
</li>
<li>
<img src="./image/images/Mi_images/Mix Aloha.webp" alt="">
<a href="#">
<p>小米10S</p>
<p>2999元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Redmi红米</a>
<div class="nav-item1">
<div class="w">
<ul class='nav-phone'>
<li>
<img src="./image/images/RedMi_红米/RedMi__8A.webp" alt="">
<a href="#">
<p>RedMi__8A</p>
<p>1999元起</p>
</a>
</li>
<li>
<img src="./image/images/RedMi_红米/RedMi_K30.webp" alt="">
<a href="#">
<p>RedMi_K30</p>
<p>1199元起</p>
</a>
</li>
<li>
<img src="./image/images/RedMi_红米/RedMi_Note8.webp" alt="">
<a href="#">
<p>RedMi_Note8</p>
<p>1499元起</p>
</a>
</li>
<li>
<img src="./image/images/RedMi_红米/RedMiK30.webp" alt="">
<a href="#">
<p>RedMiK30</p>
<p>1099元起</p>
</a>
</li>
<li>
<img src="./image/images/RedMi_红米/RedMiK30_5G.webp" alt="">
<a href="#">
<p>RedMiK30_5G</p>
<p>2099元起</p>
</a>
</li>
<li>
<img src="./image/images/RedMi_红米/RedMiK30_Pro聚焦版.webp" alt="">
<a href="#">
<p>RedMiK30_Pro</p>
<p>2999元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">电视</a>
<div class="nav-item1">
<div class="w">
<ul class='nav-phone'>
<li>
<img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
<a href="#">
<p>Redmi智能电视R70A</p>
<p>2999元</p>
</a>
</li>
<li>
<img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
<a href="#">
<p>Redmi智能电视MAX98</p>
<p>1199元</p>
</a>
</li>
<li>
<img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
<a href="#">
<p>小米全面屏电视E55A</p>
<p>6499元</p>
</a>
</li>
<li>
<img src="./image/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">
<a href="#">
<p>小米壁画电视</p>
<p>6999元</p>
</a>
</li>
<li>
<img src="./image/images/RedMi-tv/小米电视4A32英寸.png" alt="">
<a href="#">
<p>小米电视4A32英寸</p>
<p>3099元</p>
</a>
</li>
<li>
<img src="./image/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">
<a href="#">
<p>小米电视4A55英寸</p>
<p>4999元</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">笔记本</a>
<div class="nav-item1">
<div class="w">
<ul class='nav-phone'>
<li>
<img src="./image/images/computer/RedmiBook 13.webp" alt="">
<a href="#">
<p>RedmiBook 13</p>
<p>5299元起</p>
</a>
</li>
<li>
<img src="./image/images/computer/RedmiBook 14.webp" alt="">
<a href="#">
<p>RedmiBook 14</p>
<p>7999元起</p>
</a>
</li>
<li>
<img src="./image/images/computer/小米笔记本 15.6.png" alt="">
<a href="#">
<p>小米笔记本 15.6</p>
<p>6499元起</p>
</a>
</li>
<li>
<img src="./image/images/computer/小米笔记本Air 12.5.png" alt="">
<a href="#">
<p>小米笔记本Air 12.5</p>
<p>5999元起</p>
</a>
</li>
<li>
<img src="./image/images/computer/小米笔记本Pro 15.png" alt="">
<a href="#">
<p>小米笔记本Pro 15</p>
<p>7099元起</p>
</a>
</li>
<li>
<img src="./image/images/computer/游戏本2019款.webp" alt="">
<a href="#">
<p>小米游戏本2019款</p>
<p>4999元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">平板</a>
<div class="nav-item1">
<div class="w">
<ul class='nav-phone'>
<li>
<img src="./image/images/MI_pad.webp" alt="">
<a href="#">
<p>小米平板5</p>
<p>1999元起</p>
</a>
</li>
<li>
<img src="./image/images/MI_pad.webp" alt="">
<a href="#">
<p>小米平板5 Pro</p>
<p>2499元起</p>
</a>
</ul>
</div>
</div>
</li>
<li>
<a href="#">家电</a>
<div class="nav-item1">
<div class="w">
<ul class='nav-phone'>
<li>
<img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<a href="#">
<p>Redmi全自动波轮洗衣机1A</p>
<p>799元</p>
</a>
</li>
<li>
<img src="./image/images/home appliances/小米净水器.jpg" alt="">
<a href="#">
<p>小米净水器S1 800G</p>
<p>2199元</p>
</a>
</li>
<li>
<img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<a href="#">
<p>米家互联网洗烘一体机10kg</p>
<p>1966元</p>
</a>
</li>
<li>
<img src="./image/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<a href="#">
<p>米家互联网空调C1</p>
<p>3999元</p>
</a>
</li>
<li>
<img src="./image/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<a href="#">
<p>米家互联网空调</p>
<p>2999元</p>
</a>
</li>
<li>
<img src="./image/images/home appliances/米家扫地机器人.jpg" alt="">
<a href="#">
<p>米家扫地机器人</p>
<p>1999元</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">路由器</a>
<div class="nav-item1">
<div class="w">
<ul class='nav-phone'>
<li>
<img src="./image/images/Router/Redmi路由器AC2100.webp" alt="">
<a href="#">
<p>Redmi路由器AC2100</p>
<p>169元</p>
</a>
</li>
<li>
<img src="./image/images/Router/小米AIoT路由器AX3600.webp" alt="">
<a href="#">
<p>小米AIoT路由器AX3600</p>
<p>599元</p>
</a>
</li>
<li>
<img src="./image/images/Router/小米路由器 4C.jpg" alt="">
<a href="#">
<p>小米路由器 4C</p>
<p>59元</p>
</a>
</li>
<li>
<img src="./image/images/Router/小米路由器 Mesh.jpg" alt="">
<a href="#">
<p>小米路由器 Mesh</p>
<p>999元</p>
</a>
</li>
<li>
<img src="./image/images/Router/小米路由器4A 千兆版.jpg" alt="">
<a href="#">
<p>小米路由器4A 千兆版</p>
<p>119元</p>
</a>
</li>
<li>
<img src="./image/images/Router/小米路由器AC2100.webp" alt="">
<a href="#">
<p>小米路由器AC2100</p>
<p>999元</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">智能硬件</a>
<div class="nav-item1">
<div class="w">
<ul class='nav-phone'>
<li>
<img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
<a href="#">
<p>Redmi小爱触屏音箱 8</p>
<p>399元</p>
</a>
</li>
<li>
<img src="./image/images/intelligent hardware/Redmi小爱音箱 Play.webp" alt="">
<a href="#">
<p>Redmi小爱音箱 Play</p>
<p>499元</p>
</a>
</li>
<li>
<img src="./image/images/intelligent hardware/小米小爱老师.jpg" alt="">
<a href="#">
<p>小米小爱同学</p>
<p>199元</p>
</a>
</li>
<li>
<img src="./image/images/intelligent hardware/小米小爱触屏音箱.jpg" alt="">
<a href="#">
<p>小米小爱触屏音箱</p>
<p>299元</p>
</a>
</li>
<li>
<img src="./image/images/intelligent hardware/小米米家智能摄像机云台版.jpg" alt="">
<a href="#">
<p>小米米家智能摄像机云台版</p>
<p>299元</p>
</a>
</li>
<li>
<img src="./image/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<a href="#">
<p>小米米家智能门锁</p>
<p>3299元</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<div class="search">
<input type="search" value="智能门锁">
<span class="glyphicon glyphicon-search"></span>
</div>
</ul>
</div>
</div>
<!-- 焦点图 能滑动-->
<div class="main-box">
<div class="w mb">
<ul class="nav-l" >
<li>
<!--当鼠标悬停在.nav-l li上时，显示.item-box -->
<a href="#">手机
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- 这里是隐藏的内容 -->
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/小米Alpha/CC9定制.jpg" alt="">小米 CC9定制</a>
<a href="#"><img src="./image/images/小米Alpha/Mi10.webp" alt="">小米 Mi10</a>
<a href="#"><img src="./image/images/小米Alpha/Redmi8.webp" alt="">Redmi8</a>
<a href="#"><img src="./image/images/小米Alpha/RedMiK30_Pro聚焦版.webp"
alt="">RedMiK30_Pro聚焦版</a>
<a href="#"><img src="./image/images/小米Alpha/RedmiK30Pro变焦版.webp"
alt="">RedmiK30Pro变焦版</a>
<a href="#"><img src="./image/images/小米Alpha/小米10Pro.webp" alt="">小米10Pro</a>
</ol>
<ol>
<a href="#"><img src="./image/images/小米Alpha/CC9定制.jpg" alt="">小米 CC9定制</a>
<a href="#"><img src="./image/images/小米Alpha/Mi10.webp" alt="">小米 Mi10</a>
<a href="#"><img src="./image/images/小米Alpha/Redmi8.webp" alt="">Redmi8</a>
<a href="#"><img src="./image/images/小米Alpha/RedMiK30_Pro聚焦版.webp"
alt="">RedMiK30_Pro聚焦版</a>
<a href="#"><img src="./image/images/小米Alpha/RedmiK30Pro变焦版.webp"
alt="">RedmiK30Pro变焦版</a>
<a href="#"><img src="./image/images/小米Alpha/小米10Pro.webp" alt="">小米10Pro</a>
</ol>
<ol>
<a href="#"><img src="./image/images/小米Alpha/CC9定制.jpg" alt="">小米 CC9定制</a>
<a href="#"><img src="./image/images/小米Alpha/Mi10.webp" alt="">小米 Mi10</a>
<a href="#"><img src="./image/images/小米Alpha/Redmi8.webp" alt="">Redmi8</a>
<a href="#"><img src="./image/images/小米Alpha/RedMiK30_Pro聚焦版.webp"
alt="">RedMiK30_Pro聚焦版</a>
<a href="#"><img src="./image/images/小米Alpha/RedmiK30Pro变焦版.webp"
alt="">RedmiK30Pro变焦版</a>
<a href="#"><img src="./image/images/小米Alpha/小米10Pro.webp" alt="">小米10Pro</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">电视 <span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp"
alt="">Redmi红米电视R70A</a>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp"
alt="">Redmi智能电视MAX98</a>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg"
alt="">小米全面屏电视E55A</a>
<a href="#"><img src="./image/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">小米壁画电视
65英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A32英寸.png" alt="">小米电视4A32英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">小米电视4A55英寸</a>
</ol>
<ol>
<a href="#"><img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp"
alt="">Redmi红米电视R70A</a>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp"
alt="">Redmi智能电视MAX98</a>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg"
alt="">小米全面屏电视E55A</a>
<a href="#"><img src="./image/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">小米壁画电视
65英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A32英寸.png" alt="">小米电视4A32英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">小米电视4A55英寸</a>
</ol>
<ol>
<a href="#"><img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp"
alt="">Redmi红米电视R70A</a>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp"
alt="">Redmi智能电视MAX98</a>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg"
alt="">小米全面屏电视E55A</a>
<a href="#"><img src="./image/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">小米壁画电视
65英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A32英寸.png" alt="">小米电视4A32英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">小米电视4A55英寸</a>
</ol>
<ol>
<a href="#"><img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp"
alt="">Redmi红米电视R70A</a>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp"
alt="">Redmi智能电视MAX98</a>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg"
alt="">小米全面屏电视E55A</a>
<a href="#"><img src="./image/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">小米壁画电视
65英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A32英寸.png" alt="">小米电视4A32英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">小米电视4A55英寸</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">笔记本 平板<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/computer/游戏本2019款.webp" alt="">游戏本2019款</a>
<a href="#"><img src="./image/images/computer/小米笔记本Pro 15.png" alt="">小米笔记本Pro
15</a>
<a href="#"><img src="./image/images/computer/小米笔记本Air 12.5.png" alt="">小米笔记本Air
12.5</a>
<a href="#"><img src="./image/images/computer/小米笔记本 15.6.png" alt="">小米笔记本 15.6</a>
<a href="#"><img src="./image/images/computer/RedmiBook 14.webp" alt="">RedmiBook
14</a>
<a href="#"><img src="./image/images/computer/RedmiBook 13.webp" alt="">RedmiBook
13</a>
</ol>
<ol>
<a href="#"><img src="./image/images/computer/游戏本2019款.webp" alt="">游戏本2019款</a>
<a href="#"><img src="./image/images/computer/小米笔记本Pro 15.png" alt="">小米笔记本Pro
15</a>
<a href="#"><img src="./image/images/computer/小米笔记本Air 12.5.png" alt="">小米笔记本Air
12.5</a>
<a href="#"><img src="./image/images/computer/小米笔记本 15.6.png" alt="">小米笔记本 15.6</a>
<a href="#"><img src="./image/images/computer/RedmiBook 14.webp" alt="">RedmiBook
14</a>
<a href="#"><img src="./image/images/computer/RedmiBook 13.webp" alt="">RedmiBook
13</a>
</ol>
<ol>
<a href="#"><img src="./image/images/computer/游戏本2019款.webp" alt="">游戏本2019款</a>
<a href="#"><img src="./image/images/computer/小米笔记本Pro 15.png" alt="">小米笔记本Pro
15</a>
<a href="#"><img src="./image/images/computer/小米笔记本Air 12.5.png" alt="">小米笔记本Air
12.5</a>
<a href="#"><img src="./image/images/computer/小米笔记本 15.6.png" alt="">小米笔记本 15.6</a>
<a href="#"><img src="./image/images/computer/RedmiBook 14.webp" alt="">RedmiBook
14</a>
<a href="#"><img src="./image/images/computer/RedmiBook 13.webp" alt="">RedmiBook
13</a>
</ol>
<ol>
<a href="#"><img src="./image/images/computer/游戏本2019款.webp" alt="">游戏本2019款</a>
<a href="#"><img src="./image/images/computer/RedmiBook 13.webp" alt="">RedmiBook
13</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">家电 <span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg"
alt="">小米全自动波轮洗衣机1A</a>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">小米净水器</a>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png"
alt="">米家互联网洗烘一体机</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调C1（一级能效）.webp"
alt="">米家互联网空调C1</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png"
alt="">米家互联网空调</a>
<a href="#"><img src="./image/images/home appliances/米家扫地机器人.jpg" alt="">米家扫地机器人</a>
</ol>
<ol>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg"
alt="">小米全自动波轮洗衣机1A</a>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">小米净水器</a>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png"
alt="">米家互联网洗烘一体机</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调C1（一级能效）.webp"
alt="">米家互联网空调C1</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png"
alt="">米家互联网空调</a>
<a href="#"><img src="./image/images/home appliances/米家扫地机器人.jpg" alt="">米家扫地机器人</a>
</ol>
<ol>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg"
alt="">小米全自动波轮洗衣机1A</a>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">小米净水器</a>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png"
alt="">米家互联网洗烘一体机</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调C1（一级能效）.webp"
alt="">米家互联网空调C1</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png"
alt="">米家互联网空调</a>
<a href="#"><img src="./image/images/home appliances/米家扫地机器人.jpg" alt="">米家扫地机器人</a>
</ol>
<ol>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg"
alt="">小米全自动波轮洗衣机1A</a>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">小米净水器</a>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png"
alt="">米家互联网洗烘一体机</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调C1（一级能效）.webp"
alt="">米家互联网空调C1</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png"
alt="">米家互联网空调</a>
<a href="#"><img src="./image/images/home appliances/米家扫地机器人.jpg" alt="">米家扫地机器人</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">出行 穿戴<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/第八部分images/title.jfif" alt="">手表</a>
<a href="#"><img src="./image/images/第八部分images/title.jpg" alt="">小米手表</a>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 充电座.jpg"
alt="">小米手表充电座</a>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 雅典黑.jpg"
alt="">小米手表典雅黑</a>
<a href="#"><img src="./image/images/第八部分images/小米手表标准版.jpg" alt="">小米手表标准版</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg "
alt="">小米兔儿童学习手表</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第八部分images/米家石英经典版 白色.jpg" alt="">米家石英经典版白色</a>
<a href="#"><img src="./image/images/第八部分images/米家石英经典版 黑色.jpg" alt="">米家石英经典版黑色</a>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 充电座.jpg"
alt="">小米手表充电座</a>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 雅典黑.jpg"
alt="">小米手表典雅黑</a>
<a href="#"><img src="./image/images/第八部分images/小米手表标准版.jpg" alt="">小米手表标准版</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg "
alt="">小米兔儿童学习手表</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 充电座.jpg"
alt="">小米手表充电座</a>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 雅典黑.jpg"
alt="">小米手表典雅黑</a>
<a href="#"><img src="./image/images/第八部分images/小米手表标准版.jpg" alt="">小米手表标准版</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg "
alt="">小米兔儿童学习手表</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">智能 路由器<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱</a>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱 8</a>
<a href="#"><img src="./image/images/intelligent hardware/小米小爱老师.jpg"
alt="">小爱老师</a>
<a href="#"><img src="./image/images/intelligent hardware/小米小爱触屏音箱.jpg"
alt="">小米小爱触屏音箱</a>
<a href="#"><img src="./image/images/intelligent hardware/小米米家智能摄像机云台版.jpg"
alt="">智能摄像机云台版</a>
<a href="#"><img src="./image/images/intelligent hardware/小米米家智能门锁.jpg"
alt="">智能门锁</a>
</ol>
<ol>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱</a>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱 8</a>
<a href="#"><img src="./image/images/intelligent hardware/小米小爱老师.jpg"
alt="">小爱老师</a>
<a href="#"><img src="./image/images/intelligent hardware/小米小爱触屏音箱.jpg"
alt="">小米小爱触屏音箱</a>
<a href="#"><img src="./image/images/intelligent hardware/小米米家智能摄像机云台版.jpg"
alt="">智能摄像机云台版</a>
<a href="#"><img src="./image/images/intelligent hardware/小米米家智能门锁.jpg"
alt="">智能门锁</a>
</ol>
<ol>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱</a>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱 8</a>
<a href="#"><img src="./image/images/intelligent hardware/小米米家智能门锁.jpg"
alt="">智能门锁</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">电源 配件<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/身体第五个部分/9号平衡车.jpg" alt="">9号平衡车</a>
<a href="#"><img src="./image/images/身体第五个部分/Redmi AirDots真无线蓝牙耳机.webp" alt="">Redmi
AirDots</a>
<a href="#"><img src="./image/images/身体第五个部分/光家剃须刀.webp" alt="">米家剃须刀</a>
<a href="#"><img src="./image/images/身体第五个部分/小米小爱音响.webp" alt="">小米小爱音响</a>
<a href="#"><img src="./image/images/身体第五个部分/小米插线板5孔位.jpg" alt="">小米插线板5孔位</a>
<a href="#"><img src="./image/images/身体第五个部分/小米真无线蓝牙耳机.webp" alt="">小米真无线蓝牙耳机</a>
</ol>
<ol>
<a href="#"><img src="./image/images/身体第五个部分/9号平衡车.jpg" alt="">9号平衡车</a>
<a href="#"><img src="./image/images/身体第五个部分/Redmi AirDots真无线蓝牙耳机.webp" alt="">Redmi
AirDots</a>
<a href="#"><img src="./image/images/身体第五个部分/光家剃须刀.webp" alt="">米家剃须刀</a>
<a href="#"><img src="./image/images/身体第五个部分/小米小爱音响.webp" alt="">小米小爱音响</a>
<a href="#"><img src="./image/images/身体第五个部分/小米插线板5孔位.jpg" alt="">小米插线板5孔位</a>
<a href="#"><img src="./image/images/身体第五个部分/小米真无线蓝牙耳机.webp" alt="">小米真无线蓝牙耳机</a>
</ol>
<ol>
<a href="#"><img src="./image/images/身体第五个部分/Redmi AirDots真无线蓝牙耳机.webp" alt="">Redmi
AirDots</a>
<a href="#"><img src="./image/images/身体第五个部分/小米真无线蓝牙耳机.webp" alt="">小米真无线蓝牙耳机</a>
<a href="#"><img src="./image/images/身体第五个部分/9号平衡车.jpg" alt="">9号平衡车</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">健康 儿童<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/Top1images/Mi 米家电磁炉.jpg" alt="">米家电磁炉</a>
<a href="#"><img src="./image/images/Top1images/MiAOPPE.jpg" alt="">/MiAOPPE</a>
<a href="#"><img src="./image/images/Top1images/Mi电饭煲.jpg" alt="">Mi电饭煲</a>
<a href="#"><img src="./image/images/Top1images/RedMiK30show.webp"
alt="">RedMiK30show</a>
<a href="#"><img src="./image/images/Top1images/蓝牙音箱.jpg" alt="">蓝牙音箱</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg"
alt="">米兔儿童学习手表</a>
</ol>
<ol>
<a href="#"><img src="./image/images/Top1images/Mi 米家电磁炉.jpg" alt="">米家电磁炉</a>
<a href="#"><img src="./image/images/Top1images/MiAOPPE.jpg" alt="">/MiAOPPE</a>
<a href="#"><img src="./image/images/Top1images/Mi电饭煲.jpg" alt="">Mi电饭煲</a>
<a href="#"><img src="./image/images/Top1images/RedMiK30show.webp"
alt="">RedMiK30show</a>
<a href="#"><img src="./image/images/Top1images/蓝牙音箱.jpg" alt="">蓝牙音箱</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg"
alt="">米兔儿童学习手表</a>
</ol>
<ol>
<a href="#"><img src="./image/images/Top1images/Mi 米家电磁炉.jpg" alt="">米家电磁炉</a>
<a href="#"><img src="./image/images/Top1images/MiAOPPE.jpg" alt="">/MiAOPPE</a>
<a href="#"><img src="./image/images/Top1images/Mi电饭煲.jpg" alt="">Mi电饭煲</a>
<a href="#"><img src="./image/images/Top1images/RedMiK30show.webp"
alt="">RedMiK30show</a>
<a href="#"><img src="./image/images/Top1images/蓝牙音箱.jpg" alt="">蓝牙音箱</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg"
alt="">米兔儿童学习手表</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">耳机 音响<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/第六部分images/titleimages.webp" alt="">耳机</a>
<a href="#"><img src="./image/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">小米9ARE U
OK保护壳</a>
<a href="#"><img src="./image/images/第六部分images/小米USB充电器30W快充版.webp"
alt="">小米USB充电器30W</a>
<a href="#"><img src="./image/images/第六部分images/小米USB充电器36W快充版(2...).jpg"
alt="">小米USB充电器36W</a>
<a href="#"><img src="./image/images/第六部分images/小米二合一数据线100cm.jpg"
alt="">小米二合一数据线100cm</a>
<a href="#"><img src="./image/images/第六部分images/小米无线充电宝青春版.webp"
alt="">小米无线充电宝青春版</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第六部分images/小米车载充电器快充版(37W).webp"
alt="">小米车载充电器37W</a>
<a href="#"><img src="./image/images/第六部分images/洗手机.jfif" alt="">洗手机</a>
<a href="#"><img src="./image/images/第六部分images/米家LED随身灯.jpg" alt="">米家LED随身灯</a>
<a href="#"><img src="./image/images/第六部分images/米家自动洗手机套装.webp" alt="">米家自动洗手机套装</a>
<a href="#"><img src="./image/images/第六部分images/蓝牙耳机AirDots.webp"
alt="">蓝牙耳机AirDots</a>
<a href="#"><img src="./image/images/第六部分images/蓝牙耳机AirDots1.jpg"
alt="">蓝牙耳机AirDots1</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第六部分images/titleimages.webp" alt="">耳机</a>
<a href="#"><img src="./image/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">小米9ARE U
OK保护壳</a>
<a href="#"><img src="./image/images/第六部分images/小米USB充电器30W快充版.webp"
alt="">小米USB充电器30W</a>
<a href="#"><img src="./image/images/第六部分images/小米USB充电器36W快充版(2...).jpg"
alt="">小米USB充电器36W</a>
<a href="#"><img src="./image/images/第六部分images/小米二合一数据线100cm.jpg"
alt="">小米二合一数据线100cm</a>
<a href="#"><img src="./image/images/第六部分images/小米无线充电宝青春版.webp"
alt="">小米无线充电宝青春版</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第六部分images/小米车载充电器快充版(37W).webp"
alt="">小米车载充电器37W</a>
<a href="#"><img src="./image/images/第六部分images/洗手机.jfif" alt="">洗手机</a>
<a href="#"><img src="./image/images/第六部分images/米家LED随身灯.jpg" alt="">米家LED随身灯</a>
<a href="#"><img src="./image/images/第六部分images/米家自动洗手机套装.webp" alt="">米家自动洗手机套装</a>
<a href="#"><img src="./image/images/第六部分images/蓝牙耳机AirDots.webp"
alt="">蓝牙耳机AirDots</a>
<a href="#"><img src="./image/images/第六部分images/蓝牙耳机AirDots1.jpg"
alt="">蓝牙耳机AirDots1</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">生活 箱包<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/第七部分images/米家背包.webp" alt="">米家背包</a>
<a href="#"><img src="./image/images/第七部分images/米家驱蚊器基础.版webp.webp"
alt="">米家驱蚊器基础版</a>
<a href="#"><img src="./image/images/第七部分images/小米商务旅多功能双肩包.webp"
alt="">小米商务旅多功能双肩包</a>
<a href="#"><img src="./image/images/第七部分images/小米巨能写中性笔.webp" alt="">小米巨能写中性笔</a>
<a href="#"><img src="./image/images/第七部分images/最生活毛巾-青春系列.jpg"
alt="">最生活毛巾-青春系列</a>
<a href="#"><img src="./image/images/第七部分images/米家保温杯.webp" alt="">米家保温杯</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第七部分images/米家飞行眼镜.webp " alt="">米家飞行眼镜</a>
<a href="#"><img src="./image/images/第七部分images/米家驱蚊器基础.版webp.webp"
alt="">米家驱蚊器基础版</a>
<a href="#"><img src="./image/images/第七部分images/自动折叠伞.jpg" alt="">自动折叠伞</a>
<a href="#"><img src="./image/images/第七部分images/小米巨能写中性笔.webp" alt="">小米巨能写中性笔</a>
<a href="#"><img src="./image/images/第七部分images/最生活毛巾-青春系列.jpg"
alt="">最生活毛巾-青春系列</a>
<a href="#"><img src="./image/images/第七部分images/米家保温杯.webp" alt="">米家保温杯</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第七部分images/米家飞行眼镜.webp " alt="">米家飞行眼镜</a>
<a href="#"><img src="./image/images/第七部分images/米家驱蚊器基础.版webp.webp"
alt="">米家驱蚊器基础版</a>
<a href="#"><img src="./image/images/第七部分images/自动折叠伞.jpg" alt="">自动折叠伞</a>
<a href="#"><img src="./image/images/第七部分images/小米巨能写中性笔.webp" alt="">小米巨能写中性笔</a>
<a href="#"><img src="./image/images/第七部分images/最生活毛巾-青春系列.jpg"
alt="">最生活毛巾-青春系列</a>
<a href="#"><img src="./image/images/第七部分images/米家保温杯.webp" alt="">米家保温杯</a>
</ol>
</div>
</div>
</li>
</ul>
<div class="banner">
<div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./image/XaioMi10background.jpg "alt="Image 1">
</div>
<div class="swiper-slide"><img src="./image/小米Reami.jpg" alt="Image 2"> </div>
<div class="swiper-slide"><img src="./image/小米red.webp" alt="Image 3"> </div>
</div>
<!---<div class="points">
<a class="show" href="#"></a>
<a class="hidden" href="#"></a>
<a class="hidden" href="#"></a>
</div>-->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条
<div class="swiper-scrollbar"></div>-->
</div>
</div>
</div>
<!--
<script>
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>-->
<script>
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
on: {
slideChange: function () {
// 获取当前激活的pagination元素
var activeIndex = this.activeIndex;
var bullets = document.querySelectorAll('.swiper-pagination span');
// 先将所有圆圈重置为灰色
bullets.forEach(function (bullet) {
bullet.classList.remove('active');
});
// 设置当前激活的圆圈为白色
bullets[activeIndex].classList.add('active');
},
},
});
</script>
<style>
.swiper-pagination {
position: absolute;
right: 10px;
bottom: 10px;
text-align: center;
z-index: 10;
}
.swiper-pagination span {
display: inline-block;
width: 8px;
height: 8px;
background-color: #ccc;
margin: 0 5px;
border-radius: 50%;
cursor: pointer;
}
.swiper-pagination .active {
background-color: blue;
/* 白色 */
}
/* Swiper原样式 */
.swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%23007aff'%3E%3C/svg%3E");
}
/*改变了颜色和加粗的样式*/
.swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
</style>
</div>
</div>
</div>
</div>
<!-- 小焦点图-->
<div class="ad-box">
<div class="w">
<div class="adnavv">
<ul class="adnav">
<li><a href="#"><img src="./image/images/twolevelimages/小米秒杀png.png" alt="">保障服务</a></li>
<li><a href="#"><img src="./image/images/twolevelimages/企业团购.png" alt="">企业团购</a></li>
<li><a href="#"><img src="./image/images/twolevelimages/F码通道.png" alt="">F码通道</a></li>
<li><a href="#"><img src="./image/images/twolevelimages/米粉卡.png" alt="">米粉卡</a></li>
<li><a href="#"><img src="./image/images/twolevelimages/以旧换新.png" alt="">依旧换新</a></li>
<li><a href="#"><img src="./image/images/twolevelimages/话费充值.png" alt="">话费充值</a></li>
</ul>
</div>
<div class="adpic">
<div class="ad-pic">
<a href="#"><img src="./image/images/twolevelimages/RedNote8Box.jpg" alt=""></a>
<a href="#"><img src="./image/images/twolevelimages/RedK30(5G)Box.jpg" alt=""></a>
<a href="#"><img src="./image/images/twolevelimages/小米手环4(Box).jpg" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<!-- 广告 -->
<div class="ad_pic">
<div class="w">
<a href="#"><img src="./image/images/ate/titlebody.webp" alt=""></a>
</div>
</div>
<!-- 商品推荐 -->
<div class="mian-items">
<div class="w">
<!-- 手机 -->
<div class="items">
<div class="item-title">
<h2>手机</h2>
<div class="moreinfo">
<a href="#">
查看更多
<i class="icon6 glyphicon glyphicon-circle-arrow-right"></i>
</a>
</div>
</div>
<div class="item-left">
<a href="#"><img src="./image/images/小米Alpha/XiaoMIMIxAlpha.webp" alt=""></a>
</div>
<ul class="item-box">
<li>
<a href="#">
<img src="./image/images/小米Alpha/CC9定制.jpg" alt="">
<p class="title">Redmi Note 11 Pro系列</p>
<p class="desc">Redmi Note 11 Pro系列</p>
<p class="pric">1799元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/小米Alpha/Mi10.webp" alt="">
<p class="title">Redmi Mi10</p>
<p class="desc">5000mAh大电量</p>
<p class="pric">1199元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/小米Alpha/Redmi8.webp" alt="">
<p class="title">Redmi8</p>
<p class="desc">3200万高清质感自拍</p>
<p class="pric">2599元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<p class="title">RedMiK30_Pro聚焦版</p>
<p class="desc">CUP全面屏</p>
<p class="pric">4199元起</p>
<span>4999元</span>
</a>
</li>
<li>
<a href="#"><img src="./image/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<p class="title">RedmiK30Pro变焦版</p>
<p class="desc">变焦拍照</p>
<p class="pric">4999元起</p>
<span>5799元</span>
</a>
</li>
<li>
<a href="#"><img src="./image/images/小米Alpha/黑鲨Pro.png" alt="">
<p class="title">黑鲨Pro</p>
<p class="desc">磁动力升降启键</p>
<p class="pric">2699元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/小米Alpha/小米10Pro.webp" alt="">
<p class="title">小米10Pro</p>
<p class="desc">5G小金刚</p>
<p class="pric">3499元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/小米Alpha/小米9.JPG" alt="">
<p class="title">小米9</p>
<p class="desc">长续航</p>
<p class="pric">1499元起</p>
</a>
</li>
</ul>
</div>
<!-- 智能穿戴 -->
<div class="items">
<div class="item-title">
<h2>智能穿戴</h2>
<div class="moreinfo">
<a href="#">热门</a>
<a href="#">穿戴</a>
</div>
</div>
<div class="item-left">
<a href="#"><img src="./image/images/9895c56a7b792fb9053e3085fc261072.webp" alt=""></a>
</div>
<ul class="item-box">
<li>
<a href="#">
<img src="./image/images/身体第五个部分/Redmi AirDots真无线蓝牙耳机.webp" alt="">
<p class="title">Redmi AirDots真无线蓝牙耳机</p>
<p class="desc">放肆用 畅快听</p>
<p class="pric">169元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/小米真无线蓝牙耳机.webp" alt="">
<p class="title">小米真无线蓝牙耳机</p>
<p class="desc">放肆用 畅快听</p>
<p class="pric">199元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/小米蓝牙项圈耳机.jpg" alt="">
<p class="title">小米蓝牙项圈耳机</p>
<p class="desc">畅快听</p>
<p class="pric">259元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/小米运动蓝牙耳机青春版.webp" alt="">
<p class="title">小米运动蓝牙耳机青春版</p>
<p class="desc">主动降噪</p>
<p class="pric">429元</p>
<span>699元</span>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/高速无线充套装.webp" alt="">
<p class="title">高速无线充套装</p>
<p class="desc">高速充电</p>
<p class="pric">199元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/9号平衡车.webp" alt="">
<p class="title">9号平衡车</p>
<p class="desc">9号平衡车</p>
<p class="pric">2699元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/小米小爱音响.webp" alt="">
<p class="title">小米小爱音响</p>
<p class="desc">小爱音响</p>
<p class="pric">399元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/Redmi充电宝 10000MAh标准版.webp" alt="">
<p class="title">Redmi充电宝 10000MAh</p>
<p class="desc">长续航</p>
<p class="pric">199元起</p>
</a>
</li>
</ul>
</div>
<!-- 家电 -->
<div class="items">
<div class="item-title">
<h2>家电</h2>
<div class="moreinfo">
<a href="#">热门</a>
<a href="#">电视影音</a>
</div>
<div class="item-left-2">
<a href="#"><img src="./image/images/bodyhomeimages/3d47879ec183e25a36e67e0219636e60.webp"
alt=""></a>
<a href="#"><img src="./image/images/bodyhomeimages/ca83e0294e7d725690b0576a1a4681e2.webp"
alt=""></a>
</div>
<ul class="item-box">
<li>
<a href="#">
<img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
<p class="title">红米电视 70英寸 R70A</p>
<p class="desc">红米电视 70英寸 R70A</p>
<p class="pric">6999元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
<p class="title">Redmi_智能电视_MAX98</p>
<p class="desc">画质新境界</p>
<p class="pric">7799元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
<p class="title">小米全面屏电视E55A</p>
<p class="desc">多分区，画质轻旗舰</p>
<p class="pric">2899元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p class="title">Redmi全自动波轮洗衣机1A</p>
<p class="desc">/Redmi全自动波轮洗衣机1A</p>
<p class="pric">799元</p>
<span>899元</span>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/高速无线充套装.webp" alt="">
<p class="title">高速无线充套装</p>
<p class="desc">高速充电</p>
<p class="pric">199元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">
<p class="title">小米净水器</p>
<p class="desc">父母都爱用</p>
<p class="pric">699元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p class="title">米家互联网空调（一级能效)</p>
<p class="desc">一键操作</p>
<p class="pric">4399元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p class="title">米家互联网洗烘一体机</p>
<p class="desc">一键操作，解放双手</p>
<p class="pric">1099元起</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 生活电器 -->
<div class="items">
<div class="item-title">
<h2>家电</h2>
<div class="moreinfo">
<a href="#">热门</a>
<a href="#">电视影音</a>
</div>
<div class="item-left-2">
<a href="#"><img src="./image/images/bodyhomeimages/3d47879ec183e25a36e67e0219636e60.webp"
alt=""></a>
<a href="#"><img src="./image/images/bodyhomeimages/ca83e0294e7d725690b0576a1a4681e2.webp"
alt=""></a>
</div>
<ul class="item-box">
<li>
<a href="#">
<img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
<p class="title">红米电视 70英寸 R70A</p>
<p class="desc">红米电视 70英寸 R70A</p>
<p class="pric">6999元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
<p class="title">Redmi_智能电视_MAX98</p>
<p class="desc">画质新境界</p>
<p class="pric">7799元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
<p class="title">小米全面屏电视E55A</p>
<p class="desc">多分区，画质轻旗舰</p>
<p class="pric">2899元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p class="title">Redmi全自动波轮洗衣机1A</p>
<p class="desc">/Redmi全自动波轮洗衣机1A</p>
<p class="pric">799元</p>
<span>899元</span>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/高速无线充套装.webp" alt="">
<p class="title">高速无线充套装</p>
<p class="desc">高速充电</p>
<p class="pric">199元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">
<p class="title">小米净水器</p>
<p class="desc">父母都爱用</p>
<p class="pric">699元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p class="title">米家互联网空调（一级能效)</p>
<p class="desc">一键操作</p>
<p class="pric">4399元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p class="title">米家互联网洗烘一体机</p>
<p class="desc">一键操作，解放双手</p>
<p class="pric">1099元起</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 生活电器广告 -->
<div class="ad_pic">
<div class="w">
<a href="#"><img src="./image/images/bodyfour zhinneg/小米智能.webp" alt=""></a>
</div>
</div>
<!-- 厨房电器 -->
<div class="items">
<div class="item-title">
<h2>家电</h2>
<div class="moreinfo">
<a href="#">热门</a>
<a href="#">电视影音</a>
</div>
<div class="item-left-2">
<a href="#"><img src="./image/images/bodyhomeimages/3d47879ec183e25a36e67e0219636e60.webp"
alt=""></a>
<a href="#"><img src="./image/images/bodyhomeimages/ca83e0294e7d725690b0576a1a4681e2.webp"
alt=""></a>
</div>
<ul class="item-box">
<li>
<a href="#">
<img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
<p class="title">红米电视 70英寸 R70A</p>
<p class="desc">红米电视 70英寸 R70A</p>
<p class="pric">6999元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
<p class="title">Redmi_智能电视_MAX98</p>
<p class="desc">画质新境界</p>
<p class="pric">7799元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
<p class="title">小米全面屏电视E55A</p>
<p class="desc">多分区，画质轻旗舰</p>
<p class="pric">2899元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p class="title">Redmi全自动波轮洗衣机1A</p>
<p class="desc">/Redmi全自动波轮洗衣机1A</p>
<p class="pric">799元</p>
<span>899元</span>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/高速无线充套装.webp" alt="">
<p class="title">高速无线充套装</p>
<p class="desc">高速充电</p>
<p class="pric">199元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">
<p class="title">小米净水器</p>
<p class="desc">父母都爱用</p>
<p class="pric">699元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p class="title">米家互联网空调（一级能效)</p>
<p class="desc">一键操作</p>
<p class="pric">4399元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p class="title">米家互联网洗烘一体机</p>
<p class="desc">一键操作，解放双手</p>
<p class="pric">1099元起</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 智能家居 -->
<div class="items">
<div class="item-title">
<h2>家电</h2>
<div class="moreinfo">
<a href="#">热门</a>
<a href="#">电视影音</a>
</div>
<div class="item-left-2">
<a href="#"><img src="./image/images/bodyhomeimages/3d47879ec183e25a36e67e0219636e60.webp"
alt=""></a>
<a href="#"><img src="./image/images/bodyhomeimages/ca83e0294e7d725690b0576a1a4681e2.webp"
alt=""></a>
</div>
<ul class="item-box">
<li>
<a href="#">
<img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
<p class="title">红米电视 70英寸 R70A</p>
<p class="desc">红米电视 70英寸 R70A</p>
<p class="pric">6999元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
<p class="title">Redmi_智能电视_MAX98</p>
<p class="desc">画质新境界</p>
<p class="pric">7799元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
<p class="title">小米全面屏电视E55A</p>
<p class="desc">多分区，画质轻旗舰</p>
<p class="pric">2899元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p class="title">Redmi全自动波轮洗衣机1A</p>
<p class="desc">/Redmi全自动波轮洗衣机1A</p>
<p class="pric">799元</p>
<span>899元</span>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/高速无线充套装.webp" alt="">
<p class="title">高速无线充套装</p>
<p class="desc">高速充电</p>
<p class="pric">199元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">
<p class="title">小米净水器</p>
<p class="desc">父母都爱用</p>
<p class="pric">699元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p class="title">米家互联网空调（一级能效)</p>
<p class="desc">一键操作</p>
<p class="pric">4399元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p class="title">米家互联网洗烘一体机</p>
<p class="desc">一键操作，解放双手</p>
<p class="pric">1099元起</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 广告 -->
<div class="ad_pic">
<div class="w">
<a href="#"><img src="./image/images/第七部分images/中性笔.webp" alt=""></a>
</div>
</div>
<!-- 日用百货 -->
<div class="items">
<div class="item-title">
<h2>家电</h2>
<div class="moreinfo">
<a href="#">热门</a>
<a href="#">电视影音</a>
</div>
<div class="item-left-2">
<a href="#"><img src="./image/images/bodyhomeimages/3d47879ec183e25a36e67e0219636e60.webp"
alt=""></a>
<a href="#"><img src="./image/images/bodyhomeimages/ca83e0294e7d725690b0576a1a4681e2.webp"
alt=""></a>
</div>
<ul class="item-box">
<li>
<a href="#">
<img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
<p class="title">红米电视 70英寸 R70A</p>
<p class="desc">红米电视 70英寸 R70A</p>
<p class="pric">6999元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
<p class="title">Redmi_智能电视_MAX98</p>
<p class="desc">画质新境界</p>
<p class="pric">7799元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
<p class="title">小米全面屏电视E55A</p>
<p class="desc">多分区，画质轻旗舰</p>
<p class="pric">2899元</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p class="title">Redmi全自动波轮洗衣机1A</p>
<p class="desc">/Redmi全自动波轮洗衣机1A</p>
<p class="pric">799元</p>
<span>899元</span>
</a>
</li>
<li>
<a href="#"><img src="./image/images/身体第五个部分/高速无线充套装.webp" alt="">
<p class="title">高速无线充套装</p>
<p class="desc">高速充电</p>
<p class="pric">199元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">
<p class="title">小米净水器</p>
<p class="desc">父母都爱用</p>
<p class="pric">699元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p class="title">米家互联网空调（一级能效)</p>
<p class="desc">一键操作</p>
<p class="pric">4399元起</p>
</a>
</li>
<li>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p class="title">米家互联网洗烘一体机</p>
<p class="desc">一键操作，解放双手</p>
<p class="pric">1099元起</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 视频 -->
<div class="items">
<div class="item-title">
<h2>视频</h2>
<div class="moreinfo">
<a href="#">
查看全部
<i class="icon6 glyphicon glyphicon-circle-arrow-right"></i>
</a>
</div>
</div>
<ul class="item-box-mv">
<li>
<a href="#">
<div class="mv">
<img src="./image/images/Top2Mp4/小米10拍大片.webp" alt="">
<p><i class="glyphicon glyphicon-play icon7"></i></p>
</div>
<p class="title">小米10拍大片</p>
</a>
</li>
<li>
<a href="#">
<div class="mv">
<img src="./image/images/Top2Mp4/小米5G首发.webp" alt="">
<p><i class="glyphicon glyphicon-play icon7"></i></p>
</div>
<p class="title">小米5G首发</p>
</a>
</li>
<li>
<a href="#">
<div class="mv">
<img src="./image/images/Top2Mp4/小米MIX_Alpha开箱视频.webp" alt="">
<p><i class="glyphicon glyphicon-play icon7"></i></p>
</div>
<p class="title">小米MIX_Alpha开箱视频</p>
</a>
</li>
<li>
<a href="#">
<div class="mv">
<img src="./image/images/Top2Mp4/米10发布会.webp" alt="">
<p><i class="glyphicon glyphicon-play icon7"></i></p>
</div>
<p class="title">米10发布会</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 页脚 -->
<footer>
<div class="w">
</div>
<div class="footer-b1 w ">
<ul class="footer-title">
<li>
<a href="#">
<img src="./image/images/navgation/navgation3.png" alt="">
<span>预约维修服务</span>
</a>
</li>
<li>
<a href="#"> <img src="./image/images/navgation/navgation3.png" alt="">
<span>7天无理由退货</span>
</a>
</li>
<li>
<a href="#">
<img src="./image/images/navgation/navgation3.png" alt="">
<span>预约维修服务</span>
</a>
</li>
<li>
<a href="#">
<img src="./image/images/navgation/navgation3.png" alt="">
<span>15天免费换货</span>
</a>
</li>
<li>
<a href="#">
<img src="./image/images/navgation/navgation3.png" alt="">
<span>满69包邮</span>
</a>
</li>
<li>
<a href="#">
<img src="./image/images/navgation/navgation3.png" alt="">
<span>520余家售后网点</span>
</a>
</li>
</ul>
</div>
<div class="footer-b2 w ">
<ul class="footer-p">
<h5>帮助中心</h5>
<li><a href="#">账户管理</a></li>
<li><a href="#">购物管理</a></li>
<li><a href="#">订单操作</a></li>
</ul>
<ul class="footer-p">
<h5>服务支持</h5>
<li><a href="#">售后政策</a></li>
<li><a href="#">自助服务</a></li>
<li><a href="#">相关下载</a></li>
</ul>
<ul class="footer-p">
<h5>线下门店</h5>
<li><a href="#">小米之家</a></li>
<li><a href="#">服务网点</a></li>
<li><a href="#">授权体验店/专区</a></li>
</ul>
<ul class="footer-p">
<h5>关于小米</h5>
<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>
<ul class="footer-p">
<h5>关注我们</h5>
<li><a href="#">新浪微博</a></li>
<li><a href="#">官方微信</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">公益基金会</a></li>
</ul>
<ul class="footer-p">
<h5>特色服务</h5>
<li><a href="#">F码通信</a></li>
<li><a href="#">礼物码</a></li>
<li><a href="#">防伪查询</a></li>
</ul>
<ul class="footer-b3">
<div class="fb3-box">
<h3>400-100-5678</h3>
<p>8:00-18:00(仅收市话费)</p>
<div class="kf">
<a href="#">人工客服</a>
<i class="glyphicon glyphicon-phone-alt icon8"></i>
<p> 关注小米：
<span><img src="./image/images/wb.png" alt=""></span>
<span class="ewm-pic">
<img src="./image/images/vx.png" alt="">
<img src="./image/主页图片/xiaomi-android.png" alt="" class="xiaomi-erweima">
</span>
</p>
</div>
</div>
</ul>
</div>
</footer>
<script src="js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
//direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
</script>
</body>
</html>
版权声明：本文标题：小白自制小米官网，基于Vscode使用（HTML+CSS+JS） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726414980a1069704.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论