小米官网项目的整体布局就不多说了，在项目一：《小米官网》中我就写过了，我就是直接复制粘贴的之前的 html 和 css，只是把JS部分用jQuery重新写了一遍，不想打字了，直接分享下我的jQuery部分的代码吧！
首页部分代码：
// 小米二维码
// $('li.download').on("mouseenter mouseleave", (function() {
// $(this).children().eq(2).stop().toggle();
// $(this).children().eq(3).stop().toggleClass("xm-height");
// }));
$('li.download').hover(function() {
$(this).children().eq(2).stop().toggle();
$(this).children().eq(3).stop().toggleClass("xm-height");
});
// 购物车
$("li.shopcar").mouseenter(function() {
$(this).css("backgroundColor", "#fff").children("img").prop("src", "images/navgation/h5.png");
$(this).children("a").css("color", "#ff6700");
}).mouseleave(function() {
$(this).css("backgroundColor", "#424242").children("img").prop("src", "images/navgation/5.png");
$(this).children("a").css("color", "#b0b0b0");
}).hover(function() {
$(this).children().eq(2).stop().toggleClass("incar-height");
});
// 头部导航
$(".ul-list li").on("mouseenter", function() {
// 设置序列号
var index = $(this).index();
$(this).children().css("color", "#ff6700");
// 展开
$(this).parent().siblings().removeClass("hidden").addClass("hnc-height");
// 打开对应序列号的菜单，同时隐藏兄弟菜单
$(this).parent().siblings().children().eq(index).show().siblings().hide();
if (index == 7 || index == 8) {
$(this).parent().siblings().addClass("hidden").removeClass("hnc-height");
}
}).mouseleave(function() {
$(this).children().css("color", "#333");
// 收起
$(this).parent().siblings().addClass("hidden").removeClass("hnc-height");
});
// 展开与收起
// $(".hn-cont").on("mouseenter mouseleave", (function() {
// $(this).stop().toggleClass("hidden").stop().toggleClass("hnc-height");
// }));
$(".hn-cont").hover(function() {
$(this).stop().toggleClass("hidden").stop().toggleClass("hnc-height");
});
// 左侧导航
$(".left-nav>ul>li").hover(function() {
// 获取索引号
var index = $(this).index();
$(this).addClass("bgc").parent().siblings("div.items").eq(index).show();
}, function() {
$(this).removeClass("bgc").parent().siblings("div.items").hide();
});
$(".items").hover(function() {
$(this).toggle();
});
// 侧边栏
$(".side-list").hover(function() {
var index = $(this).index(); // 获取索引号
if (index == 1) $(this).siblings(".scan").toggle();
$(this).parent().children(".side-list").eq(index - 1).children("img").prop("src", 'images/navgation/h' + index + '.png').siblings("p").css("color", "#ff6700");
}, function() {
var index = $(this).index(); // 获取索引号
$(this).siblings(".scan").hide();
$(this).parent().children(".side-list").eq(index - 1).children("img").prop("src", 'images/navgation/' + index + '.png').siblings("p").css("color", "#757575");
});
// 返回顶部
$(".backtop").hide();
var boxTop = $(".list").offset().top;
$(window).scroll(function() {
if ($(document).scrollTop() >= boxTop) {
$(".backtop").show();
} else {
$(".backtop").hide();
}
});
$(".backtop").click(function() {
$("body, html").stop().animate({
scrollTop: 0
});
})
// 内容部分的图片显隐
$(".text-r>ul>li").hover(function() {
// 获取索引号
var index = $(this).index();
$(this).addClass("now").siblings().removeClass("now");
// console.log($(this).parent("ul").parent(".text-r").parent(".items-text").siblings(".items-img").children(".img-r").children("ul"));
$(this).parent("ul").parent(".text-r").parent(".items-text")
.siblings(".items-img").children(".img-r").children("ul")
.eq(index).addClass("block").removeClass("none")
.siblings().addClass("none").removeClass("block");
});登录注册页面部分代码：
$(function() {
// 右上角language
$(".language").hover(function() {
$(this).children("div").toggleClass("langh");
});
// $(".lang").on({
// mouseenter: function() {
// $(this).children("p").css("background", "#f5f5f5");
// },
// mouseleave: function() {
// $(this).children("p").css("background", "#fff");
// },
// });
// 三角
$(".corner").on({
mouseenter: function() {
$(this).css("background-color", "#ff5c00").children(".alert").show();
},
mouseleave: function() {
$(this).css("background-color", "#ffbe99").children(".alert").hide();
},
click: function() {
if ($(this).position().left > 963) {
$(this).children("img").prop("src", "images/img/loading/whitecodecomputer.png");
} else {
$(this).children("img").prop("src", "images/img/loading/white_cod.png");
}
$(this).children().children("p").eq(0).toggle().eq(1).toggle();
$(this).toggleClass("position").siblings(".login_code").toggle().siblings(".login_form").toggle();
}
});
// 移动切换
$(".login>a>h3").on("click", function() {
$(this).addClass("hcolor").parent("a").parent(".login").siblings(".register").children("a").children("h3").removeClass("hcolor");
$(this).siblings("span").css("left", "10px");
$(this).parent("a").parent(".login").parent(".title").siblings(".register_body").addClass("position_register").siblings(".login_body").removeClass("position_login");
$(this).parent("a").parent(".login").parent(".title").siblings(".register_body").css({ "opacity": "0", "transform": "translateX(450px)" })
.siblings(".login_body").css({ "opacity": "1", "transform": "translateX(0px)" });
});
$(".register>a>h3").on("click", function() {
$(this).addClass("hcolor").parent("a").parent(".register").siblings(".login").children("a").children("h3").removeClass("hcolor");
$(this).parent("a").parent(".register").siblings(".login").children("a").children("span").css("left", "68px");
$(this).parent("a").parent(".register").parent(".title").siblings(".register_body").removeClass("position_register").siblings(".login_body").addClass("position_login");
$(this).parent("a").parent(".register").parent(".title").siblings(".register_body").css({ "opacity": "1", "transform": "translateX(0px)" })
.siblings(".login_body").css({ "opacity": "0", "transform": "translateX(-450px)" });
});
// 密码显隐
var flag = 0;
$("#eye").on("click", function() {
if (flag == 0) {
$(this).siblings("#pwd").prop("type", "text");
$(this).prop("src", "images/open.png");
flag = 1;
} else {
$(this).siblings("#pwd").prop("type", "password");
$(this).prop("src", "images/close.png");
flag = 0;
}
});
// 文字缩小上移、背景、边框、按钮等的变化
$(".user,#pwd,.tel,.yzm").on({ // 账号、密码、手机号、验证码
focus: function() {
if ($(this).val() == "") {
$(this).addClass("input_focus text_focus");
} else {
$(this).addClass("input_focus");
}
},
blur: function() {
$(this).addClass("input_blur text_blur").removeClass("input_focus text_focus");
if ($(this).val() == "") { // tips
$(this).siblings("p").show().css({ "float": "left", "margin-left": "20px" });
} else {
$(this).removeClass("input_blur text_blur").siblings("p").hide();
}
}
});
// 国家/地区
$(".area").hover(function() {
$(this).siblings(".tips").toggle();
});
// placeholder 替换
setInterval(function() {
if ($(".user").val() == "") {
$(".user").siblings("i").hide();
} else {
$(".user").siblings("i").show();
}
}, 10);
setInterval(function() {
if ($("#pwd").val() == "") {
$("#pwd").siblings("i").hide();
} else {
$("#pwd").siblings("i").show();
}
}, 10);
setInterval(function() {
if ($(".tel").val() == "") {
$(".tel").siblings("i").hide();
} else {
$(".tel").siblings("i").show();
}
}, 10);
setInterval(function() {
if ($(".yzm").val() == "") {
$(".yzm").siblings("i").hide();
} else {
$(".yzm").siblings("i").show();
}
}, 10);
// 登录按钮
setInterval(function() {
if ($(".user").val() !== "" && $("#pwd").val() !== "" && $("#dl").is(":checked")) {
$("button").eq(0).prop("disabled", false);
} else {
$("button").eq(0).prop("disabled", true);
}
}, 10);
// 注册按钮
setInterval(function() {
if ($(".tel").val() !== "" && $(".yzm").val() !== "" && $("#zc").is(":checked")) {
$("button").eq(1).prop("disabled", false);
} else {
$("button").eq(1).prop("disabled", true);
}
}, 10);
// 链接跳转
var address = location.href; // 获取地址
var key = address.indexOf("?") + 1; // 获取?后一位字符的索引号
// 根据索引号获取字符并进行判断
if (address.charAt(key) == "d") {
$(".login>a>h3").click();
}
if (address.charAt(key) == "z") {
$(".register>a>h3").click();
}
})结构和布局部分我做过一些小改动，还是放在下面吧！
index.hml：
<!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">
<title>小米</title>
<!-- 引入 css 文件 -->
<link rel="stylesheet" href="css/index.css">
<!-- 引入 js 文件 -->
<script type="text/javascript" src="js/jQuery.min.js"></script>
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="div">
<!-- 上 -->
<div class="upper">
<!-- 顶部导航栏 -->
<div class="top">
<div class="w">
<div class="top-left l">
<ul>
<li><a href="javascript:;">小米官网</a>
<span>|</span></li>
<li><a href="javascript:;">小米商城</a>
<span>|</span></li>
<li><a href="javascript:;">MIUI</a>
<span>|</span></li>
<li><a href="javascript:;">IoT</a>
<span>|</span></li>
<li><a href="javascript:;">云服务</a>
<span>|</span></li>
<li><a href="javascript:;">天星数科</a>
<span>|</span></li>
<li><a href="javascript:;">有品</a>
<span>|</span></li>
<li><a href="javascript:;">小爱开放平台</a>
<span>|</span></li>
<li><a href="javascript:;">企业团购</a>
<span>|</span></li>
<li><a href="javascript:;">资质证照</a>
<span>|</span></li>
<li><a href="javascript:;">协议规则</a>
<span>|</span></li>
<li class="download"><a href="javascript:;">下载app</a>
<span>|</span>
<div class="triangle"></div>
<div class="xiaomi">
<img src="images/images/xiaomi-android.png" alt="">
<p>小米商城APP</p>
</div>
</li>
<li><a href="javascript:;">Select Location</a>
</li>
</ul>
</div>
<div class="top-right r">
<ul>
<li><a href="login.html?denglu">登录</a>
<span>|</span></li>
<li><a href="login.html?zhuce">注册</a>
<span>|</span></li>
<li><a href="javascript:;">消息通知</a>
</li>
<!-- 购物车 -->
<li class="shopcar">
<img src="images/navgation/5.png" alt="">
<a>购物车（0）</a>
<div class="in-car">
<p>购物车中还没有商品，赶紧选购吧！</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 侧边栏 -->
<div class="sidebar">
<div class="scan">
<img src="images/images/xiaomi-android.png" alt="">
<p>扫码领取新人百元礼包</p>
</div>
<div class="side-list">
<img src="images/navgation/1.png" alt="">
<p>手机APP</p>
</div>
<div class="side-list">
<img src="images/navgation/2.png" alt="">
<p>个人中心</p>
</div>
<div class="side-list">
<img src="images/navgation/3.png" alt="">
<p>售后服务</p>
</div>
<div class="side-list">
<img src="images/navgation/4.png" alt="">
<p>人工客服</p>
</div>
<div class="side-list">
<img src="images/navgation/5.png" alt="">
<p>购物车</p>
</div>
<div class="side-list backtop">
<img src="images/navgation/6.png" alt="">
<p>回顶部</p>
</div>
</div>
<!-- 头部 -->
<div class="head w">
<!-- 头部导航 -->
<div class="head-nav">
<!-- logo -->
<div class="logo">
<img src="images/This_is_tow_Mi.png" alt="">
</div>
<!-- 导航 -->
<div class="head-nav-nav">
<ul class="ul-list">
<li><a href="javascript:;">Xiaomi手机</a></li>
<li><a href="javascript:;">Redmi手机</a></li>
<li><a href="javascript:;">电视</a></li>
<li><a href="javascript:;">笔记本</a></li>
<li><a href="javascript:;">平板</a></li>
<li><a href="javascript:;">家电</a></li>
<li><a href="javascript:;">路由器</a></li>
<li><a href="javascript:;">服务中心</a></li>
<li><a href="javascript:;">社区</a></li>
</ul>
<div class="hn-cont hidden">
<ul class="cont-items">
<li>
<img src="images/images/Mi_images/Mi10.webp" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Mi_images/Mi_10pro.jpg" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Mi_images/Mi_cc9e.png" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Mi_images/Mi_cc9定制.png" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Mi_images/Micc9.png" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Mi_images/Mix Aloha.webp" alt="">
<p>Xiaomi MIX Fold 2</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/images/RedMi_红米/RedMi__8A.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi_红米/RedMi_K30.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi_红米/RedMi_Note8.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi_红米/RedMiK30.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi_红米/RedMiK30_5G.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi_红米/RedMiK30_Pro聚焦版.webp" alt="">
<p>Redmi K50 至尊版</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米电视4A32英寸.png" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">
<p>Redmi智能电视X55 2022</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/images/computer/RedmiBook 13.webp" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/computer/RedmiBook 14.webp" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本 15.6.png" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本Air 12.5.png" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本Pro 15.png" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/computer/游戏本2019款.webp" alt="">
<p>Xiaomi Book Pro 14 锐龙版</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/img/paidul7.png" alt="">
<p>小米平板5 Pro 12.4</p>
<span>8999元起</span>
</li>
<li>
<img src="images/img/paidul7.png" alt="">
<p>小米平板5 Pro 12.4</p>
<span>8999元起</span>
</li>
<li>
<img src="images/img/paidul7.png" alt="">
<p>小米平板5 Pro 12.4</p>
<span>8999元起</span>
</li>
<li>
<img src="images/img/paidul7.png" alt="">
<p>小米平板5 Pro 12.4</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<p>巨省电 | 米家空调 新一级 1.5匹 睡眠版</p>
<span>8999元起</span>
</li>
</ul>
<ul class="cont-items">
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Router/小米AIoT路由器AX3600.webp" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Router/小米路由器 4C.jpg" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Router/小米路由器 Mesh.jpg" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
<li>
<img src="images/images/Router/小米路由器AC2100.webp" alt="">
<p>Redmi 电竞路由器 AX5400</p>
<span>8999元起</span>
</li>
</ul>
</div>
</div>
<!-- 搜索框 -->
<div class="search">
<input type="text" value="红米">
<span></span>
</div>
</div>
<!-- 头部内容 -->
<div class="head-content">
<!-- 左侧导航模块 -->
<div class="left-nav">
<ul>
<li class="out"><a href="javascript:;">手机</a>
<span></span>
</li>
<li class="out"><a href="javascript:;">电视</a>
<span></span>
</li>
<li class="out"><a href="javascript:;">笔记本 平板</a>
<span></span>
</li>
<li class="out"><a href="javascript:;">出行 穿戴</a>
<span></span>
</li>
<li class="out"><a href="javascript:;">耳机 音箱</a>
<span></span>
</li>
<li class="out"><a href="javascript:;">家电</a>
<span></span>
</li>
<li class="out"><a href="javascript:;">智能 路由器</a>
<span></span>
</li>
<li class="out"><a href="javascript:;">电源 配件</a>
<span></span>
</li>
<li class="out"><a href="javascript:;">健康 儿童</a>
<span></span>
</li>
<li class="out"><a href="javascript:;">生活 箱包</a>
<span></span>
</li>
</ul>
<div class="items">
<ul>
<li><img src="images/img/list/list1/ul1_1.png" alt="">
<p>Xiaomi MIX Fold 2</p>
</li>
<li><img src="images/img/list/list1/ul1_2.png" alt="">
<p>Redmi K50 至尊版</p>
</li>
<li><img src="images/img/list/list1/ul3_1.png" alt="">
<p>Xiaomi 12 S Ultra</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Xiaomi 12 S Pro</p>
</li>
<li><img src="images/img/list/list1/ul2_1.png" alt="">
<p>Xiaomi 12 S</p>
</li>
<li><img src="images/img/list/list1/ul2_2.png" alt="">
<p>Xiaomi 12 Pro 天玑版</p>
</li>
<li><img src="images/img/list/list1/ul2_3.png" alt="">
<p>Note 11 T Pro +</p>
</li>
<li><img src="images/img/list/list1/ul2_4.png" alt="">
<p>Note 11 T Pro</p>
</li>
<li><img src="images/img/list/list1/ul2_5.png" alt="">
<p>Note 11 SE</p>
</li>
<li><img src="images/img/list/list1/ul2_6.png" alt="">
<p>Xiaomi Civi 1 S</p>
</li>
<li><img src="images/img/list/list1/ul3_2.png" alt="">
<p>黑鲨5 Pro</p>
</li>
<li><img src="images/img/list/list1/ul3_3.png" alt="">
<p>黑鲨5</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Redmi 10 A</p>
</li>
<li><img src="images/img/list/list1/ul4_2.png" alt="">
<p>Redmi K50 Pro</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Redmi K50</p>
</li>
<li><img src="images/img/list/list1/ul4_3.png" alt="">
<p>Redmi K40S</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Redmi K50 电竞版</p>
</li>
<li><img src="images/img/list/list1/ul4_4.png" alt="">
<p>Xiaomi 12 Pro</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Xiaomi 12</p>
</li>
<li><img src="images/img/list/list1/ul4_5.png" alt="">
<p>Xiaomi 12 X</p>
</li>
<li><img src="images/img/list/list1/ul4_1.png" alt="">
<p>Xiaomi 11 青春活力版</p>
</li>
<li><img src="images/img/list/list1/ul4_6.png" alt="">
<p>Note 11 Pro 系列</p>
</li>
<li><img src="images/img/list/list1/ul3_5.png" alt="">
<p>Note 11 4 G</p>
</li>
<li><img src="images/img/list/list1/ul3_6.png" alt="">
<p>Note 11 5 G</p>
</li>
</ul>
</div>
<div class="items">
<ul>
<li><img src="images/img/list/list2/ul1_1.png" alt="">
<p>小米拍拍4K高清投屏器</p>
</li>
<li><img src="images/img/list/list2/ul1_2.png" alt="">
<p>小米电视6 55” OLED</p>
</li>
<li><img src="images/img/list/list2/ul3_1.png" alt="">
<p>Redmi X55 2022款</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>小米电视6 65” OLED</p>
</li>
<li><img src="images/img/list/list2/ul2_1.png" alt="">
<p>小米电视 大师 77” OLED</p>
</li>
<li><img src="images/img/list/list2/ul2_2.png" alt="">
<p>小米电视6 至尊版 55英寸</p>
</li>
<li><img src="images/img/list/list2/ul2_3.png" alt="">
<p>小米电视6 至尊版 65英寸</p>
</li>
<li><img src="images/img/list/list2/ul2_4.png" alt="">
<p>小米电视6 至尊版 75英寸</p>
</li>
<li><img src="images/img/list/list2/ul2_5.png" alt="">
<p>小米电视 ES43 2022款</p>
</li>
<li><img src="images/img/list/list2/ul2_6.png" alt="">
<p>小米电视 ES55 2022款</p>
</li>
<li><img src="images/img/list/list2/ul3_2.png" alt="">
<p>小米电视 ES65 2022款</p>
</li>
<li><img src="images/img/list/list2/ul3_3.png" alt="">
<p>小米电视 ES75 2022款</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>金属全面屏电视</p>
</li>
<li><img src="images/img/list/list2/ul4_2.png" alt="">
<p>小米全面屏电视</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>米家激光投影仪</p>
</li>
<li><img src="images/img/list/list2/ul4_3.png" alt="">
<p>Redmi 智能电视 X55</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>激光投影电视</p>
</li>
<li><img src="images/img/list/list2/ul4_4.png" alt="">
<p>大师电视 65英寸 OLED</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>小米电视4A 60英寸</p>
</li>
<li><img src="images/img/list/list2/ul4_5.png" alt="">
<p>Redmi 智能电视 MAX 98"</p>
</li>
<li><img src="images/img/list/list2/ul4_1.png" alt="">
<p>Xiaomi 11 青春活力版</p>
</li>
<li><img src="images/img/list/list2/ul4_6.png" alt="">
<p>小米电视5 75英寸</p>
</li>
<li><img src="images/img/list/list2/ul3_5.png" alt="">
<p>小米电视4A 70英寸</p>
</li>
<li><img src="images/img/list/list2/ul3_6.png" alt="">
<p>小米电视4S 75 英寸</p>
</li>
</ul>
</div>
<div class="items">
<ul>
<li><img src="images/img/list/list3/ul1_1.png" alt="">
<p>小米平板5 Pro 12.4</p>
</li>
<li><img src="images/img/list/list3/ul1_2.png" alt="">
<p>Redmi G 游戏本 2022</p>
</li>
<li><img src="images/img/list/list3/ul3_1.png" alt="">
<p>RedmiBook Pro14 2022</p>
</li>
<li><img src="images/img/list/list3/ul4_1.png" alt="">
<p>RedmiBook Pro15 2022</p>
</li>
<li><img src="images/img/list/list3/ul2_1.png" alt="">
<p>RedmiBook Pro 14 增强版</p>
</li>
<li><img src="images/img/list/list3/ul2_2.png" alt="">
<p>小米笔记本 Pro 14 锐龙版</p>
</li>
<li><img src="images/img/list/list3/ul2_3.png" alt="">
<p>RedmiBook Pro 15 增强版</p>
</li>
<li><img src="images/img/list/list3/ul2_4.png" alt="">
<p>小米笔记本 Pro X 14</p>
</li>
<li><img src="images/img/list/list3/ul2_5.png" alt="">
<p>Redmi G 2021 Intel版</p>
</li>
<li><img src="images/img/list/list3/ul2_6.png" alt="">
<p>Redmi G 2021 AMD版</p>
</li>
<li><img src="images/img/list/list3/ul3_2.png" alt="">
<p>小米平板5</p>
</li>
<li><img src="images/img/list/list3/ul3_3.png" alt="">
<p>小米平板5 Pro</p>
</li>
<li><img src="images/img/list/list3/ul4_1.png" alt="">
<p>小米平板5 Pro 5G</p>
</li>
<li><img src="images/img/list/list3/ul2_2.png" alt="">
<p>小米笔记本 Pro 14 增强版</p>
</li>
<li><img src="images/img/list/list3/ul1_1.png" alt="">
<p>小米笔记本 Pro 15 增强版</p>
</li>
<li><img src="images/img/list/list3/ul1_3.png" alt="">
<p>小米笔记本 Pro X 15</p>
</li>
<li><img src="images/img/list/list3/ul3_1.png" alt="">
<p>RedmiBook Pro 14 锐龙版</p>
</li>
<li><img src="images/img/list/list3/ul2_4.png" alt="">
<p>RedmiBook Pro 15 锐龙版</p>
</li>
<li><img src="images/img/list/list3/ul3_1.png" alt="">
<p>小米笔记本 Pro</p>
</li>
<li><img src="images/img/list/list3/ul3_5.png" alt="">
<p>小米笔记本Pro 15</p>
</li>
<li><img src="images/img/list/list3/ul4_1.png" alt="">
<p>小米笔记本Pro 14</p>
</li>
<li><img src="images/img/list/list3/ul4_2.png" alt="">
<p>RedmiBook Air 13</p>
</li>
<li><img src="images/img/list/list3/ul4_3.png" alt="">
<p>键鼠套装</p>
</li>
<li><img src="images/img/list/list3/ul4_4.png" alt="">
<p>鼠标</p>
</li>
</ul>
</div>
<div class="items">
<ul>
<li><img src="images/img/list/list4/ul1_1.png" alt="">
<p>Xiaomi Watch S1 Pro</p>
</li>
<li><img src="images/img/list/list4/ul1_2.png" alt="">
<p>小米手环7 Pro</p>
</li>
<li><img src="images/img/list/list4/ul1_3.png" alt="">
<p>小米手环7 NFC版</p>
</li>
<li><img src="images/img/list/list4/ul1_4.png" alt="">
<p>小米手环7</p>
</li>
<li><img src="images/img/list/list4/ul1_5.png" alt="">
<p>Xiaomi Watch S1</p>
</li>
<li><img src="images/img/list/list4/ul1_6.png" alt="">
<p>Xiaomi Watch Color 2</p>
</li>
<li><img src="images/img/list/list4/ul2_1.png" alt="">
<p>Redmi 手表 2</p>
</li>
<li><img src="images/img/list/list4/ul2_2.png" alt="">
<p>小米手环6 NFC版</p>
</li>
<li><img src="images/img/list/list4/ul2_3.png" alt="">
<p>平衡车</p>
</li>
<li><img src="images/img/list/list4/ul2_4.png" alt="">
<p>自行车</p>
</li>
<li><img src="images/img/list/list4/ul2_5.png" alt="">
<p>滑板车</p>
</li>
<li><img src="images/img/list/list4/ul2_6.png" alt="">
<p>车载充电器</p>
</li>
<li><img src="images/img/list/list4/ul3_1.png" alt="">
<p>智能记录仪</p>
</li>
<li><img src="images/img/list/list4/ul3_2.png" alt="">
<p>充气宝</p>
</li>
<li><img src="images/img/list/list4/ul3_3.png" alt="">
<p>石英表</p>
</li>
</ul>
</div>
<div class="items">
<ul>
<li><img src="images/img/list/list5/ul1_1.png" alt="">
<p>Xiaomi Buds 4 Pro</p>
</li>
<li><img src="images/img/list/list5/ul1_2.png" alt="">
<p>Redmi Buds 4 Pro</p>
</li>
<li><img src="images/img/list/list5/ul1_3.png" alt="">
<p>Redmi Buds 4</p>
</li>
<li><img src="images/img/list/list5/ul1_4.png" alt="">
<p>Xiaomi 真无线降噪耳机 3 Pro</p>
</li>
<li><img src="images/img/list/list5/ul1_5.png" alt="">
<p>Xiaomi 真无线降噪耳机 3</p>
</li>
<li><img src="images/img/list/list5/ul1_6.png" alt="">
<p>Redmi Buds 3</p>
</li>
<li><img src="images/img/list/list5/ul1_1.png" alt="">
<p>Air2 se</p>
</li>
<li><img src="images/img/list/list5/ul1_2.png" alt="">
<p>Redmi Buds 3 青春版</p>
</li>
<li><img src="images/img/list/list5/ul1_3.png" alt="">
<p>小米小爱音箱</p>
</li>
<li><img src="images/img/list/list5/ul1_4.png" alt="">
<p>小爱触屏音箱Pro 8</p>
</li>
<li><img src="images/img/list/list5/ul1_5.png" alt="">
<p>Xiaomi Sound</p>
</li>
<li><img src="images/img/list/list5/ul1_6.png" alt="">
<p>Redmi小爱触屏音箱 8</p>
</li>
<li><img src="images/img/list/list5/ul1_1.png" alt="">
<p>小爱音箱 Pro</p>
</li>
<li><img src="images/img/list/list5/ul1_2.png" alt="">
<p>小米小爱触屏音箱</p>
</li>
<li><img src="images/img/list/list5/ul1_3.png" alt="">
<p>Redmi音箱</p>
</li>
<li><img src="images/img/list/list5/ul1_4.png" alt="">
<p>小米小爱音箱 Play</p>
</li>
<li><img src="images/img/list/list5/ul1_5.png" alt="">
<p>线控耳机</p>
</li>
<li><img src="images/img/list/list5/ul2_4.png" alt="">
<p>蓝牙耳机</p>
</li>
<li><img src="images/img/list/list5/ul2_1.png" alt="">
<p>蓝牙音箱</p>
</li>
<li><img src="images/img/list/list5/ul2_2.png" alt="">
<p>小米AI音箱</p>
</li>
<li><img src="images/img/list/list5/ul2_3.png" alt="">
<p>小米小爱音箱HD</p>
</li>
</ul>
</div>
<div class="items">
<ul>
<li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p>壁挂空调</p>
</li>
<li><img src="images/images/home appliances/小米净水器.jpg" alt="">
<p>立式空调</p>
</li>
<li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p>冰箱</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<p>滚筒洗衣机</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p>波轮洗衣机</p>
</li>
<li><img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<p>净水器</p>
</li>
<li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p>微蒸烤</p>
</li>
<li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p>烟灶</p>
</li>
<li><img src="images/images/home appliances/小米净水器.jpg" alt="">
<p>洗碗机</p>
</li>
<li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p>扫地机器人</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<p>吸尘器</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p>空气净化器</p>
</li>
<li><img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<p>电饭煲</p>
</li>
<li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p>电磁炉</p>
</li>
<li><img src="images/images/home appliances/小米净水器.jpg" alt="">
<p>水壶</p>
</li>
<li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p>落地风扇</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<p>投影仪</p>
</li>
<li><img src="images/images/home appliances/米家互联网空调（一级能效）.png" alt="">
<p>灯具</p>
</li>
<li><img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<p>插线板</p>
</li>
<li><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt="">
<p>新风机</p>
</li>
<li><img src="images/images/home appliances/小米净水器.jpg" alt="">
<p>电暖器</p>
</li>
<li><img src="images/images/home appliances/米家互联网洗烘一体机10kg.png" alt="">
<p>料理机</p>
</li>
</ul>
</div>
<div class="items">
<ul>
<li><img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<p>CyberDog</p>
</li>
<li><img src="images/images/Router/小米AIoT路由器AX3600.webp" alt="">
<p>MIJIA K歌麦克风</p>
</li>
<li><img src="images/images/Router/小米路由器 4C.jpg" alt="">
<p>打印机</p>
</li>
<li><img src="images/images/Router/小米路由器 Mesh.jpg" alt="">
<p>喷墨打印机</p>
</li>
<li><img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
<p>喷墨打印机墨水</p>
</li>
<li><img src="images/images/Router/小米路由器AC2100.webp" alt="">
<p>小米路由器</p>
</li>
<li><img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
<p>智能家庭</p>
</li>
<li><img src="images/images/Router/小米路由器 Mesh.jpg" alt="">
<p>对讲机</p>
</li>
<li><img src="images/images/Router/小米路由器 4C.jpg" alt="">
<p>摄像机</p>
</li>
<li><img src="images/images/Router/小米AIoT路由器AX3600.webp" alt="">
<p>智能门锁</p>
</li>
<li><img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<p>视频门铃</p>
</li>
<li><img src="images/images/Router/小米路由器 4C.jpg" alt="">
<p>小爱老师</p>
</li>
<li><img src="images/images/Router/小米路由器4A 千兆版.jpg" alt="">
<p>Redmi路由器</p>
</li>
<li><img src="images/images/Router/小米路由器AC2100.webp" alt="">
<p>小爱音箱</p>
</li>
</ul>
</div>
<div class="items">
<ul>
<li><img src="images/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">
<p>移动电源</p>
</li>
<li><img src="images/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">
<p>数据线</p>
</li>
<li><img src="images/images/第六部分images/小米cc9定制钢化膜.webp" alt="">
<p>充电器</p>
</li>
<li><img src="images/images/第六部分images/小米USB充电器30W快充版.webp" alt="">
<p>电池</p>
</li>
<li><img src="images/images/第六部分images/小米USB充电器36W快充版(2...).jpg" alt="">
<p>自拍杆</p>
</li>
<li><img src="images/images/第六部分images/小米二合一数据线100cm.jpg" alt="">
<p>手机壳</p>
</li>
<li><img src="images/images/第六部分images/小米无线充电宝青春版.webp" alt="">
<p>手机贴膜</p>
</li>
<li><img src="images/images/第六部分images/小米车载充电器快充版(37W).webp" alt="">
<p>无线充电器</p>
</li>
<li><img src="images/images/第六部分images/米家LED随身灯.jpg" alt="">
<p>平板配件</p>
</li>
<li><img src="images/images/第六部分images/小米二合一数据线100cm.jpg" alt="">
<p>黑鲨配件</p>
</li>
<li><img src="images/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">
<p>其他配件</p>
</li>
</ul>
</div>
<div class="items">
<ul>
<li><img src="images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt="">
<p>米家跑步机</p>
</li>
<li><img src="images/images/第八部分images/title.jpg" alt="">
<p>洗手机</p>
</li>
<li><img src="images/images/第八部分images/小米手表Color 充电座.jpg" alt="">
<p>剃须刀</p>
</li>
<li><img src="images/images/第八部分images/小米手表Color 雅典黑.jpg" alt="">
<p>修剪器</p>
</li>
<li><img src="images/images/第八部分images/小米手表标准版.jpg" alt="">
<p>牙刷</p>
</li>
<li><img src="images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt="">
<p>吹风机</p>
</li>
<li><img src="images/images/第八部分images/米家石英经典版 白色.jpg" alt="">
<p>体重秤</p>
</li>
<li><img src="images/images/第八部分images/米家石英经典版 黑色.jpg" alt="">
<p>体脂秤</p>
</li>
<li><img src="images/images/第八部分images/title.jpg" alt="">
<p>早教启智</p>
</li>
<li><img src="images/images/第八部分images/小米手表Color 雅典黑.jpg" alt="">
<p>益智积木</p>
</li>
<li><img src="images/images/第八部分images/小米手表Color 充电座.jpg" alt="">
<p>儿童手表</p>
</li>
<li><img src="images/images/第八部分images/米兔儿童学习手表 4Pro.jpg" alt="">
<p>儿童滑板车</p>
</li>
<li><img src="images/images/第八部分images/小米手表标准版.jpg" alt="">
<p>婴儿推车</p>
</li>
<li><img src="images/images/第八部分images/小米手表Color 充电座.jpg" alt="">
<p>理发器</p>
</li>
<li><img src="images/images/第八部分images/小米手表标准版.jpg" alt="">
<p>走步机</p>
</li>
<li><img src="images/images/第八部分images/title.jpg" alt="">
<p>智能遥控车</p>
</li>
</ul>
</div>
<div class="items">
<ul>
<li><img src="images/images/第七部分images/小米商务旅多功能双肩包.webp" alt="">
<p>小背包</p>
</li>
<li><img src="images/images/第七部分images/3卷装抽绳式垃圾袋.webp" alt="">
<p>双肩包</p>
</li>
<li><img src="images/images/第七部分images/自动折叠伞.jpg" alt="">
<p>胸包</p>
</li>
<li><img src="images/images/第七部分images/90分框体旅行箱.webp" alt="">
<p>旅行箱</p>
</li>
<li><img src="images/images/第七部分images/小米巨能写中性笔.webp" alt="">
<p>运动鞋</p>
</li>
<li><img src="images/images/第七部分images/最生活毛巾-青春系列.jpg" alt="">
<p>眼镜</p>
</li>
<li><img src="images/images/第七部分images/米家飞行眼镜.webp" alt="">
<p>床垫</p>
</li>
<li><img src="images/images/第七部分images/米家驱蚊器基础.版webp.webp" alt="">
<p>枕头</p>
</li>
<li><img src="images/images/第七部分images/自动折叠伞.jpg" alt="">
<p>螺丝刀</p>
</li>
<li><img src="images/images/第七部分images/小米商务旅多功能双肩包.webp" alt="">
<p>保温杯</p>
</li>
<li><img src="images/images/第七部分images/3卷装抽绳式垃圾袋.webp" alt="">
<p>伞</p>
</li>
<li><img src="images/images/第七部分images/最生活毛巾-青春系列.jpg" alt="">
<p>驱蚊器</p>
</li>
<li><img src="images/images/第七部分images/自动折叠伞.jpg" alt="">
<p>毛巾/浴巾</p>
</li>
<li><img src="images/images/第七部分images/米家保温杯hover附图.jpg" alt="">
<p>米兔</p>
</li>
<li><img src="images/images/第七部分images/米家背包hover附图.jpg" alt="">
<p>笔</p>
</li>
</ul>
</div>
</div>
<!-- 右侧轮播图 -->
<div class="carousel">
<a href="javascript:;" class="arrow-l"><span></span></a>
<a href="javascript:;" class="arrow-r"><span></span></a>
<ul>
<li>
<a href="javascript:;"><img src="images/小米red.webp" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="images/小米Reami.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="images/XaioMibackground.webp" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="images/XaioMi10background.jpg" alt=""></a>
</li>
</ul>
<ol class="circle"></ol>
</div>
</div>
<!-- 头部结束部分 -->
<div class="introduce">
<!-- 左侧盒子 -->
<div class="left-item">
<table>
<tbody>
<tr>
<td>
<img src="images/images/twolevelimages/小米秒杀png.png" alt="">
<p>保障服务</p>
</td>
<td>
<img src="images/images/twolevelimages/企业团购.png" alt="">
<p>企业团购</p>
</td>
<td>
<img src="images/images/twolevelimages/F码通道.png" alt="">
<p>F码通道</p>
</td>
</tr>
<tr>
<td>
<img src="images/images/twolevelimages/米粉卡.png" alt="">
<p>米粉卡</p>
</td>
<td>
<img src="images/images/twolevelimages/以旧换新.png" alt="">
<p>以旧换新</p>
</td>
<td>
<img src="images/images/twolevelimages/话费充值.png" alt="">
<p>话费充值</p>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 右侧图片 -->
<div class="right-item">
<ul>
<li><img src="images/images/twolevelimages/RedK30(5G)Box.jpg" alt=""></li>
<li><img src="images/images/twolevelimages/RedNote8Box.jpg" alt=""></li>
<li><img src="images/images/twolevelimages/小米手环4(Box).jpg" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 中 -->
<div class="in">
<div class="w">
<!-- 内容部分 -->
<div class="list">
<!-- 头部图片 -->
<div class="top-box">
<a href="javascript:;"><img src="images/images/Top1images/RedMiK30show.webp" alt=""></a>
</div>
<div class="list-items">
<!-- text area-->
<div class="items-text">
<div class="text-l">
<h2>手机</h2>
</div>
<div class="text-r">
<p>查看更多</p>
<span></span>
</div>
</div>
<!-- img area-->
<div class="items-img">
<div class="img-l">
<a href="javascript:;"><img src="images/images/小米Alpha/XiaoMIMIxAlpha.webp" alt=""></a>
</div>
<div class="img-r">
<ul>
<li>
<img src="images/images/小米Alpha/CC9定制.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/Mi10.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/Redmi8.webp" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米10Pro.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/小米9.JPG" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/黑鲨Pro.png" alt="">
<h5>黑鲨Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
</ul>
</div>
</div>
</div>
<div class="list-items">
<!-- text area-->
<div class="items-text">
<div class="text-l">
<h2>智能穿戴</h2>
</div>
<div class="text-r">
<ul>
<li class="now"><a href="javascript:;">热门</a></li>
<li><a href="javascript:;">穿戴</a></li>
</ul>
</div>
</div>
<!-- img area-->
<div class="items-img">
<div class="img-l">
<img src="images/images/小米Alpha/wear.webp" alt="">
</div>
<div class="img-r">
<ul class="block">
<li>
<img src="images/img/smartwearul1.png" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/img/smartwearul2.png" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/img/smartwearul3.png" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/img/smartwearul4.png" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/img/smartwearul5.png" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/img/smartwearul6.png" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/img/smartwearul7.png" alt="">
<h5>黑鲨Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>热门</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/img/smartwearul7.png" alt="">
<h5>黑鲨Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>穿戴</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
</div>
</div>
</div>
<div class="list-items">
<!-- text area-->
<div class="items-text">
<div class="text-l">
<h2>笔记本 | 平板</h2>
</div>
<div class="text-r">
<ul>
<li class="now"><a href="javascript:;">热门</a></li>
</ul>
</div>
</div>
<!-- img area-->
<div class="items-img">
<div class="img-l">
<img src="images/images/小米Alpha/computer.webp" alt="">
</div>
<div class="img-r">
<ul>
<li>
<img src="images/images/computer/RedmiBook 13.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/computer/RedmiBook 14.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本 15.6.png" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本 15.6.png" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/computer/小米笔记本Air 12.5.png" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/computer/小米笔记本Pro 15.png" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/computer/游戏本2019款.webp" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>热门</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
</div>
</div>
</div>
<div class="list-items">
<!-- text area-->
<div class="items-text">
<div class="text-l">
<h2>家电</h2>
</div>
<div class="text-r">
<ul>
<li class="now"><a href="javascript:;">热门</a></li>
<li><a href="javascript:;">电视影音</a></li>
</ul>
</div>
</div>
<!-- img area-->
<div class="items-img">
<div class="img-l">
<ul>
<li><img src="images/images/bodyhomeimages/jdtop1.webp" alt=""></li>
<li><img src="images/images/bodyhomeimages/jdtop2.webp" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block">
<li>
<img src="images/images/小米Alpha/CC9定制.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/Mi10.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/Redmi8.webp" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米10Pro.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米9.JPG" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h4>米家全自动波轮洗衣机8kg</h4>
<i>399元</i>
</div>
<div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>热门</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/RedMi-tv/Redmi_智能电视_MAX98.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米全面屏电视E55A.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/RedMi-tv/小米电视4A32英寸.png" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>热门</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
</div>
</div>
</div>
<div class="list-items">
<!-- text area-->
<div class="items-text">
<div class="text-l">
<h2>生活电器</h2>
</div>
<div class="text-r">
<ul>
<li class="now"><a href="javascript:;">扫地机</a></li>
<li><a href="javascript:;">空净</a></li>
<li><a href="javascript:;">清洁</a></li>
<li><a href="javascript:;">风扇</a></li>
</ul>
</div>
</div>
<!-- img area-->
<div class="items-img">
<div class="img-l">
<ul>
<li><img src="images/images/bodyhomeimages/top1head.webp" alt=""></li>
<li><img src="images/images/bodyhomeimages/top2head.webp" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block">
<li>
<img src="images/images/bodyhomeimages/小米扫地机.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/智能拖地机.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/小米扫地机.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/智能拖地机.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/米家扫地机器人.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/小米扫地机.jpg" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h4>米家全自动波轮洗衣机8kg</h4>
<i>399元</i>
</div>
<div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>扫地机</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/images/bodyhomeimages/Redmi全自动波轮洗衣机1A.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/米家互联网空调C1（一级能效）.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家空调.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家空调1.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家互联网空调C1（一级能效）.webp" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h4>米家全自动波轮洗衣机8kg</h4>
<i>399元</i>
</div>
<div class="rt"><img src="images/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg" alt=""></div>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>空净</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米10Pro.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米9.JPG" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h4>米家全自动波轮洗衣机8kg</h4>
<i>399元</i>
</div>
<div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>清洁</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/images/bodyhomeimages/小爱同学.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/Mi10.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/Redmi8.webp" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米10Pro.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米9.JPG" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h4>米家全自动波轮洗衣机8kg</h4>
<i>399元</i>
</div>
<div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>风扇</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
</div>
</div>
</div>
<div class="top-box">
<a href="javascript:;"><img src="images/images/ate/titlebody.webp" alt=""></a>
</div>
<div class="list-items">
<!-- text area-->
<div class="items-text">
<div class="text-l">
<h2>厨房电器</h2>
</div>
<div class="text-r">
<ul>
<li class="now"><a href="javascript:;">净水器</a></li>
<li><a href="javascript:;">烟灶</a></li>
<li><a href="javascript:;">电饭煲</a></li>
<li><a href="javascript:;">微蒸烤</a></li>
</ul>
</div>
</div>
<!-- img area-->
<div class="items-img">
<div class="img-l">
<ul>
<li><img src="images/img/kc_big1.png" alt=""></li>
<li><img src="images/img/kc_big2.png" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block">
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>净水器</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>净水器</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>净水器</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyhomeimages/米家净水器.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/home appliances/小米净水器.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>净水器</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
</div>
</div>
</div>
<div class="list-items">
<!-- text area-->
<div class="items-text">
<div class="text-l">
<h2>智能家居</h2>
</div>
<div class="text-r">
<ul>
<li class="now"><a href="javascript:;">小爱音箱</a></li>
<li><a href="javascript:;">门锁</a></li>
<li><a href="javascript:;">路由器</a></li>
<li><a href="javascript:;">智能设备</a></li>
</ul>
</div>
</div>
<!-- img area-->
<div class="items-img">
<div class="img-l">
<ul>
<li><img src="images/images/bodyhomeimages/top1head.webp" alt=""></li>
<li><img src="images/images/bodyhomeimages/top2head.webp" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block">
<li>
<img src="images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/Redmi小爱音箱 Play.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米小爱老师.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/intelligent hardware/小米小爱触屏音箱.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能摄像机云台版.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li class="more">
<div class="lt">
<h4>米家全自动波轮洗衣机8kg</h4>
<i>399元</i>
</div>
<div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>小爱音箱</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>门锁</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/Router/Redmi路由器AC2100.webp" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li class="more">
<div class="lt">
<h4>米家全自动波轮洗衣机8kg</h4>
<i>399元</i>
</div>
<div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>路由器</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/Redmi小爱音箱 Play.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米小爱老师.jpg" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/intelligent hardware/小米小爱触屏音箱.jpg" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能摄像机云台版.jpg" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/intelligent hardware/小米米家智能门锁.jpg" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/intelligent hardware/Redmi小爱触屏音箱 8.webp" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li class="more">
<div class="lt">
<h4>米家全自动波轮洗衣机8kg</h4>
<i>399元</i>
</div>
<div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>小爱音箱</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
</div>
</div>
</div>
<div class="list-items">
<!-- text area-->
<div class="items-text">
<div class="text-l">
<h2>运动出行</h2>
</div>
<div class="text-r">
<ul>
<li class="now"><a href="javascript:;">平衡车/滑板车</a></li>
<li><a href="javascript:;">运动健身</a></li>
<li><a href="javascript:;">箱包配饰</a></li>
<li><a href="javascript:;">出行工具</a></li>
</ul>
</div>
</div>
<!-- img area-->
<div class="items-img">
<div class="img-l">
<ul>
<li><img src="images/img/sp_big1.png" alt=""></li>
<li><img src="images/img/sp_big2.png" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block">
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/bodyfour zhinneg/九号平衡车Plus.png" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h4>米家全自动波轮洗衣机8kg</h4>
<i>399元</i>
</div>
<div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>平衡车/滑板车</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/img/smartwearul7.png" alt="">
<h5>黑鲨Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>运动健身</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/img/smartwearul7.png" alt="">
<h5>黑鲨Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>箱包配饰</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/img/smartwearul7.png" alt="">
<h5>黑鲨Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>出行工具</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
</div>
</div>
</div>
<div class="top-box">
<a href="javascript:;"><img src="images/images/第六部分images/titleimages.webp" alt=""></a>
</div>
<div class="list-items">
<!-- text area-->
<div class="items-text">
<div class="text-l">
<h2>日用百货</h2>
</div>
<div class="text-r">
<ul>
<li class="now"><a href="javascript:;">个护健康</a></li>
<li><a href="javascript:;">电源/线材</a></li>
<li><a href="javascript:;">儿童用品</a></li>
<li><a href="javascript:;">家居床品</a></li>
</ul>
</div>
</div>
<!-- img area-->
<div class="items-img">
<div class="img-l">
<ul>
<li><img src="images/img/du_big1.png" alt=""></li>
<li><img src="images/img/du_big2.png" alt=""></li>
</ul>
</div>
<div class="img-r">
<ul class="block">
<li>
<img src="images/images/小米Alpha/CC9定制.jpg" alt="">
<h5>CC9定制</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/Mi10.webp" alt="">
<h5>Mi10</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/Redmi8.webp" alt="">
<h5>Redmi8</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/RedMiK30_Pro聚焦版.webp" alt="">
<h5>RedMiK30_Pro聚焦版</h5>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/RedmiK30Pro变焦版.webp" alt="">
<h5>RedmiK30Pro变焦版</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li>
<img src="images/images/小米Alpha/小米10Pro.webp" alt="">
<h5>小米10Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li>
<img src="images/images/小米Alpha/小米9.JPG" alt="">
<h5>小米9</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起</span>
</li>
<li class="more">
<div class="lt">
<h4>米家全自动波轮洗衣机8kg</h4>
<i>399元</i>
</div>
<div class="rt"><img src="images/images/Top1images/蓝牙音箱.jpg" alt=""></div>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>个护健康</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/img/smartwearul7.png" alt="">
<h5>黑鲨Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>电源/线材</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/img/smartwearul7.png" alt="">
<h5>黑鲨Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>儿童用品</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
<ul class="none">
<li>
<img src="images/img/smartwearul7.png" alt="">
<h5>黑鲨Pro</h5>
<p>天玑8100｜真旗舰芯</p>
<span>2999元起<i>3999元</i></span>
</li>
<li class="more">
<div class="lt">
<h3>浏览更多</h3>
<p>家居床品</p>
</div>
<div class="rt"><span></span></div>
</li>
</ul>
</div>
</div>
</div>
<div class="list-items">
<!-- text area-->
<div class="items-text">
<div class="text-l">
<h2>视频</h2>
</div>
<div class="text-r">
<p>查看全部</p>
<span></span>
</div>
</div>
<!-- vidio area-->
<div class="items-vidio">
<ul>
<li>
<video controls="controls" muted></video>
<p>2021年春季新品发布会第一场</p>
</li>
<li>
<video controls="controls" muted></video>
<p>2021年春季新品发布会第一场</p>
</li>
<li>
<video controls="controls" muted></video>
<p>2021年春季新品发布会第一场</p>
</li>
<li>
<video controls="controls" muted></video>
<p>2021年春季新品发布会第一场</p>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部模块 -->
</div>
</div>
<!-- 下 -->
<div class="lower">
<!-- 服务模块 -->
<div class="server w">
<div class="uhalf">
<ul>
<li>
<span class="repair">预约维修服务</span>
</li>
<li>
<span class="return">7天无理由退货</span>
</li>
<li>
<span class="exchange">15天免费换货</span>
</li>
<li>
<span class="ship">满69元包邮</span>
</li>
<li>
<span class="sales">1100余家售后网点</span>
</li>
</ul>
</div>
<div class="lhalf">
<div class="ltnav">
<ul>
<li>
<h4>选购指南</h4>
</li>
<li><a href="javascript:;">手机</a></li>
<li><a href="javascript:;">电视</a></li>
<li><a href="javascript:;">笔记本</a></li>
<li><a href="javascript:;">平板</a></li>
<li><a href="javascript:;">穿戴</a></li>
<li><a href="javascript:;">耳机</a></li>
<li><a href="javascript:;">家电</a></li>
<li><a href="javascript:;">路由器</a></li>
<li><a href="javascript:;">音箱</a></li>
<li><a href="javascript:;">配件</a></li>
</ul>
<ul>
<li>
<h4>服务中心</h4>
</li>
<li><a href="javascript:;">申请售后</a></li>
<li><a href="javascript:;">售后政策</a></li>
<li><a href="javascript:;">维修服务价格</a></li>
<li><a href="javascript:;">订单查询</a></li>
<li><a href="javascript:;">以旧换新</a></li>
<li><a href="javascript:;">保障服务</a></li>
<li><a href="javascript:;">防伪查询</a></li>
<li><a href="javascript:;">F码通道</a></li>
</ul>
<ul>
<li>
<h4>线下门店</h4>
</li>
<li><a href="javascript:;">小米之家</a></li>
<li><a href="javascript:;">服务网点</a></li>
<li><a href="javascript:;">授权体验店/专区</a></li>
</ul>
<ul>
<li>
<h4>关于小米</h4>
</li>
<li><a href="javascript:;">了解小米</a></li>
<li><a href="javascript:;">加入小米</a></li>
<li><a href="javascript:;">投资者关系</a></li>
<li><a href="javascript:;">环境，社会及管治</a></li>
<li><a href="javascript:;">廉洁举报</a></li>
</ul>
<ul>
<li>
<h4>关注我们</h4>
</li>
<li><a href="javascript:;">新浪微博</a></li>
<li><a href="javascript:;">官方微信</a></li>
<li><a href="javascript:;">联系我们</a></li>
<li><a href="javascript:;">公益基金会</a></li>
</ul>
</div>
<div class="rtbut">
<h3>400-100-5678</h3>
<p>8:00-18:00（仅收市话费）</p>
<button>人工客服</button>
</div>
</div>
</div>
<!-- footer模块 -->
<div class="footer">
<div class="w">
<!-- 左侧logo -->
<div class="footer-left l">
<div class="logo">
<img src="images/This_is_tow_Mi.png" alt="">
</div>
</div>
<!-- 右侧内容 -->
<div class="footer-right l">
<div class="footer-content">
<ul>
<li><a href="javascript:;">小米商城</a>
<span>|</span>
</li>
<li><a href="javascript:;">MIUI</a>
<span>|</span>
</li>
<li><a href="javascript:;">米家</a>
<span>|</span>
</li>
<li><a href="javascript:;">米聊</a>
<span>|</span>
</li>
<li><a href="javascript:;">多看</a>
<span>|</span>
</li>
<li><a href="javascript:;">游戏</a>
<span>|</span>
</li>
<li><a href="javascript:;">政企服务</a>
<span>|</span>
</li>
<li><a href="javascript:;">小米天猫店</a>
<span>|</span>
</li>
<li><a href="javascript:;">小米集团隐私政策</a>
<span>|</span>
</li>
<li><a href="javascript:;">小米公司儿童信息保护规则</a>
<span>|</span>
</li>
<li><a href="javascript:;">小米商城隐私政策</a>
<span>|</span>
</li>
<li><a href="javascript:;">小米商城用户协议</a>
<span>|</span>
</li>
<li><a href="javascript:;">问题反馈</a>
<span>|</span>
</li>
<li><a href="javascript:;">Select Location</a>
</li>
</ul>
<ul>
<li><a href="javascript:;">北京互联网法院法律服务工作站</a>
<span>|</span>
</li>
<li><a href="javascript:;">中国消费者协会</a>
<span>|</span>
</li>
<li><a href="javascript:;">北京市消费者协会</a>
</li>
</ul>
<ul>
<li>
<span>© mi.com</span>
</li>
<li>
<span>京ICP证110507号</span>
</li>
<li>
<span>京ICP备10046444号</span>
</li>
<li>
<span>京公网安备11010802020134号</span>
</li>
<li>
<span>京网文[2020]0276-042号</span>
</li>
</ul>
<ul>
<li>
<span>（京）网械平台备字（2018）第00005号</span>
</li>
<li>
<span>互联网药品信息服务资格证(京)-非经营性-2014-0090</span>
</li>
<li>
<span>营业执照</span>
</li>
<li>
<span>医疗器械质量公告</span>
</li>
</ul>
<ul>
<li>
<span>增值电信业务许可证</span>
</li>
<li>
<span>网络食品经营备案</span>
</li>
<li>
<span>京食药网食备202010048</span>
</li>
<li>
<span>食品经营许可证</span>
</li>
</ul>
<ul>
<li>
<span>违法和不良信息举报电话：171-5104-4404</span>
</li>
<li>
<span>知识产权侵权投诉</span>
</li>
<li>
<span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
</li>
</ul>
<ul>
<li><img src="images/foot.png" alt=""></li>
</ul>
<!-- 底部文字 -->
<div class="root">
<p>让全球每个人都能享受科技带来的美好生活</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>index.css：
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7kkyc2') format('truetype'), url('../fonts/icomoon.woff?7kkyc2') format('woff'), url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
.div {
width: 100%;
height: 100%;
/* background-color: #f5f5f5; */
}
.w {
width: 1226px;
margin: 0 auto;
/* overflow: hidden; */
}
a {
text-decoration: none;
color: #333;
}
ul li {
list-style: none;
float: left;
cursor: pointer;
}
.upper {
width: 100%;
height: 100%;
background-color: #fff;
}
.l {
float: left;
}
.r {
float: right;
}
i {
font-style: normal;
}
/* 顶部导航栏 */
.top {
position: relative;
height: 40px;
background: #333;
}
.top ul li {
height: 40px;
line-height: 40px;
}
.top ul li a {
font-size: 12px;
color: #b0b0b0;
}
.top ul li:hover a {
color: #fff;
}
.top ul li span {
color: #423c37;
margin-right: 5px;
}
.top .shopcar {
display: flex;
position: relative;
background: #424242;
margin: 0 0 0 25px;
padding-right: 15px;
align-items: center;
}
.top .shopcar img {
width: 20px;
vertical-align: middle;
margin: 0 5px 0 15px;
}
.shopcar .in-car {
position: absolute;
top: 40px;
right: 0;
width: 316px;
height: 0;
background-color: #fff;
text-align: center;
line-height: 100px;
font-size: 12px;
color: #424242;
box-shadow: 0px 10px 15px -5px #999;
z-index: 1;
transition: all .5s ease;
overflow: hidden;
}
.shopcar .incar-height {
height: 100px;
}
/* 二维码 */
.top-left ul {
position: relative;
}
.top-left .xiaomi {
position: absolute;
top: 40px;
left: -40px;
width: 125px;
height: 0px;
background-color: #fff;
text-align: center;
box-shadow: 0 5px 10px 0 #999;
z-index: 1;
transition: all .5s ease;
overflow: hidden;
}
.top-left .xm-height {
height: 150px;
}
.top-left .xiaomi img {
width: 85px;
height: 85px;
margin: 20px 0 -10px;
}
.top-left .xiaomi p {
font-size: 13px;
}
.download {
position: relative;
}
.top-left .download .triangle {
display: none;
position: absolute;
bottom: -3px;
left: 12px;
width: 0;
height: 0;
border: 10px solid transparent;
border-color: transparent transparent #fff transparent;
}
/* 侧边栏 */
.sidebar {
position: fixed;
bottom: 30px;
right: 0;
z-index: 99;
}
.side-list {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-evenly;
width: 80px;
height: 90px;
border: 1px solid #f5f5f5;
background-color: #fff;
margin-bottom: -1px;
}
.backtop {
margin-top: 15px;
cursor: pointer;
}
.side-list:hover p {
transition: all .5s ease;
}
.side-list:hover {
transition: all .5s ease;
}
.side-list img {
width: 30px;
}
.side-list p {
color: #757575;
font-size: 14px;
}
.scan {
display: none;
position: absolute;
top: 0;
right: 95px;
width: 130px;
height: 192px;
text-align: center;
background-color: #fff;
border: 1px solid #f5f5f5;
transition: all .5s ease;
z-index: 1;
}
.scan:before {
width: 0px;
height: 0px;
position: absolute;
top: 45px;
right: -16px;
padding: 0;
border: 8px solid transparent;
border-color: transparent transparent transparent #fff;
content: '';
z-index: 2;
}
.scan:after {
width: 0px;
height: 0px;
position: absolute;
top: 44px;
right: -18px;
padding: 0;
border: 9px solid transparent;
border-color: transparent transparent transparent #f5f5f5;
content: '';
z-index: 1;
}
.scan img {
width: 95px;
margin-top: 20px;
}
.scan p {
width: 80px;
margin: 15px auto;
color: #757575;
font-size: 14px;
}
/* 头部 */
.head {
position: relative;
}
.head-nav {
display: flex;
align-items: center;
height: 100px;
}
/* logo */
.logo {
display: flex;
justify-content: space-around;
align-items: center;
width: 55px;
height: 55px;
background-color: #ff6a00;
border-radius: 20px;
}
/* 导航 */
.head-nav-nav {
display: flex;
align-items: center;
height: 100%;
margin-left: 180px;
}
.head-nav-nav .ul-list li {
display: flex;
align-items: center;
height: 100px;
}
.head-nav-nav .ul-list li a {
padding: 0 10px;
color: #333;
}
.head-nav-nav .hn-cont {
position: absolute;
top: 100px;
left: -340px;
width: 1901px;
height: 0;
background: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
box-shadow: 0 5px 10px -5px #ddd;
z-index: 5;
overflow: hidden;
transition: all .5s ease;
}
.head-nav-nav .hidden {
border: hidden;
}
.hn-cont .cont-items {
position: absolute;
left: 340px;
height: 230px;
background: #fff;
z-index: 5;
transition: all .5s ease;
}
.head-nav-nav .hnc-height {
height: 230px;
}
.hn-cont .cont-items li {
display: block;
float: left;
width: 180px;
margin: 0;
padding: 35px 12px 0;
text-align: center;
font-size: 12px;
line-height: 20px;
}
.hn-cont .cont-items li:first-child::before {
border: none;
}
.hn-cont .cont-items li::before {
content: '';
position: absolute;
top: 35px;
height: 100px;
margin-left: -38px;
border-left: 1px solid #e0e0e0;
}
.hn-cont .cont-items li img {
width: 160px;
height: 110px;
margin-bottom: 10px;
}
.hn-cont .cont-items li p {
color: #333;
}
.hn-cont .cont-items li span {
color: #ff6700;
}
/* 搜索框 */
.search {
display: flex;
position: absolute;
right: 0;
}
.search input {
width: 285px;
height: 50px;
outline: none;
padding-left: 10px;
color: #757575;
border: 1px solid #e0e0e0;
}
.search span {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
margin-left: -51px;
border-left: 1px solid #e0e0e0;
cursor: pointer;
}
.search span::after {
content: '\e920';
font-family: 'icomoon';
color: #616161;
font-size: 18px;
font-weight: 700;
}
/* 左侧导航模块 */
.left-nav {
position: absolute;
z-index: 2;
}
.left-nav ul {
width: 235px;
background-color: rgba(0, 0, 0, .5);
padding: 20px 0;
}
.left-nav ul li {
float: none;
height: 42px;
line-height: 42px;
}
.bgc {
background-color: #ff6700;
}
.left-nav ul li a {
font-size: 14px;
padding-left: 30px;
color: #fff;
}
.left-nav ul li span::before {
font-family: 'icomoon';
content: '\e906';
float: right;
color: #fff;
font-size: 20px;
margin-right: 20px;
}
.left-nav .items {
display: none;
position: absolute;
top: 0;
left: 235px;
width: 990px;
height: 458px;
border: 1px solid #e0e0e0;
}
.left-nav .items ul {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
box-shadow: 5px 5px 15px -5px #999;
}
.left-nav .items ul li {
display: flex;
padding: 17px 20px;
}
.left-nav .items ul li img {
width: 40px;
height: 40px;
}
.left-nav .items ul li p {
color: #333;
font-size: 14px;
padding-left: 10px;
}
.left-nav .items ul li:hover p {
color: #ff6700;
}
.left-nav .items:nth-child(5),
.left-nav .items:nth-child(8),
.left-nav .items:nth-child(10),
.left-nav .items:nth-child(11) {
width: 742.5px;
}
.left-nav .items:nth-child(9) {
width: 495px;
}
/* 轮播图 */
.carousel {
position: relative;
width: 100%;
height: 460px;
overflow: hidden;
}
.carousel ul {
/* 加定位才能使用动画函数 */
position: absolute;
top: 0;
left: 0;
width: 500%;
}
.carousel ul li a img {
width: 100%;
height: 460px;
}
.carousel ul li {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1s ease;
}
.carousel ul li:first-child {
opacity: 1;
}
.arrow-l,
.arrow-r {
/* display: none; */
position: absolute;
top: 50%;
width: 40px;
height: 70px;
line-height: 70px;
text-align: center;
font-size: 40px;
color: #b6b6b6;
z-index: 1;
}
.arrow-l:hover,
.arrow-r:hover {
background: rgba(0, 0, 0, .5);
color: #fff;
}
.arrow-r {
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
right: 1px;
}
.arrow-l {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
left: 235px;
}
.arrow-l span::before {
font-family: 'icomoon';
content: '\e905';
}
.arrow-r span::before {
font-family: 'icomoon';
content: '\e906';
}
.circle {
position: absolute;
bottom: 30px;
right: -65px;
width: 180px;
height: 15px;
}
.circle li {
width: 6px;
height: 6px;
background-color: rgba(0, 0, 0, .3);
border: 2px solid #999;
border-radius: 6px;
display: inline-block;
margin-left: 5px;
cursor: pointer;
}
.circle .selected,
.circle li:hover {
background-color: #efefef;
}
/* 头部结束部分 */
.introduce {
display: flex;
margin: 15px 0 25px;
}
.left-item {
width: 235px;
height: 170px;
background-color: #5f5750;
}
table {
width: 100%;
height: 100%;
}
tbody {
color: #ccc;
text-align: center;
font-size: 12px;
}
tbody tr td img {
width: 24px;
height: 24px;
}
tr>td {
position: relative;
}
td:before {
content: "";
position: absolute;
top: 2px;
left: 10px;
width: 65px;
height: 1px;
background-color: #665e57;
}
td:after {
content: "";
position: absolute;
top: 10px;
left: 3px;
width: 1px;
height: 70px;
background-color: #665e57;
}
td:hover {
color: #fff;
cursor: pointer;
}
.right-item ul li img {
width: 315px;
height: 170px;
}
.right-item ul li {
margin-left: 15px;
}
.right-item ul li img:hover {
transition: all .4s ease;
box-shadow: 0 5px 10px 5px #ddd;
}
.items-img .img-r ul li:hover,
.items-img .img-l img:hover,
.items-vidio ul li:hover {
position: relative;
top: -1px;
transition: all .4s ease;
box-shadow: 0 5px 15px 5px #ddd;
}
/* 中间部分 */
.in {
padding: 25px 0;
background-color: #f5f5f5;
}
.top-box a img {
width: 100%;
}
.list-items {
margin: 20px 0;
}
.list .list-items .items-text {
display: flex;
justify-content: space-between;
align-items: center;
}
.text-l h2 {
color: #333;
font-weight: 100;
}
.text-r {
display: flex;
align-items: center;
text-align: center;
cursor: pointer;
}
.text-r:hover p {
color: #ff6700;
transition: all .5s ease;
}
.text-r:hover span {
background-color: #ff6700;
transition: all .5s ease;
}
.text-r p {
color: #424242;
}
.text-r span::before {
font-family: 'icomoon';
content: '\e906';
}
.text-r span {
width: 20px;
height: 20px;
border-radius: 10px;
margin-left: 10px;
color: #fff;
background-color: #b0b0b0;
}
.text-r ul li {
margin-left: 30px;
padding: 4px 0;
}
.now,
.hover {
padding: 2px 0;
border-bottom: 2px solid #ff6700;
}
.now a,
.hover a {
color: #ff6700;
transition: all .5s ease;
}
/* img area */
.items-img,
.items-vidio {
display: flex;
margin: 20px 0;
}
.img-l img {
width: 234px;
height: 614px;
cursor: pointer;
}
.img-l ul li img {
width: 234px;
height: 300px;
margin-bottom: 10px;
}
.img-r ul li {
display: flex;
width: 234px;
height: 300px;
margin-left: 14px;
margin-bottom: 14px;
font-size: 14px;
text-align: center;
background-color: #fff;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all .3s linear;
}
.img-r ul li img {
width: 160px;
height: 160px;
}
.img-r ul li h5 {
font-weight: normal;
}
.img-r ul li p {
font-size: 12px;
margin: 15px;
color: #b0b0b0;
}
.more .lt i,
.img-r ul li span {
color: #ff6700;
}
.img-r ul li span i {
text-decoration: line-through;
margin-left: 10px;
color: #b0b0b0;
}
.img-r ul .more {
display: flex;
height: 143px;
flex-direction: row;
justify-content: space-around;
}
.more .rt img {
width: 80px;
height: 80px;
}
.more .lt {
width: 85px;
text-align: left;
}
.more h3,
.more .lt h4 {
font-weight: normal;
margin-bottom: 5px;
}
.img-r ul li.more p {
margin: 0;
}
.more h3 {
font-size: 18px;
}
.more span::after {
content: '\e927';
font-family: 'icomoon';
font-size: 50px;
}
.items-vidio ul li {
width: 296px;
height: 285px;
margin-right: 14px;
background-color: #fff;
}
.items-vidio ul li:last-child {
margin: 0;
}
.items-vidio ul li video {
width: 100%;
height: 180px;
}
.items-vidio ul li p {
text-align: center;
font-size: 14px;
line-height: 70px;
}
.img-r .block {
display: block;
width: 992px;
}
.img-r .none {
display: none;
}
/* 底部模块 */
.lower {
background-color: #fff;
}
.server {
overflow: hidden;
}
.uhalf {
width: 100%;
height: 25px;
padding: 25px 0;
margin-bottom: 30px;
border-bottom: 1px solid #e0e0e0;
}
.uhalf ul li {
text-align: center;
line-height: 25px;
width: 19.8%;
color: #616161;
border-right: 1px solid #e0e0e0;
}
.uhalf ul li:last-child {
border: none;
}
.uhalf ul li span::before {
font-family: 'icomoon';
margin-right: 5px;
vertical-align: top;
font-size: 24px;
}
.uhalf .repair::before {
content: '\e92e';
}
.uhalf .return::before {
content: '\e92d';
}
.uhalf .exchange::before {
content: '\e92a';
}
.uhalf .ship::before {
content: '\e912';
}
.uhalf .sales::before {
content: '\e914';
}
.uhalf ul li span:hover {
color: #ff6700;
transition: all .5s ease;
}
.lhalf .ltnav {
float: left;
width: 80%;
}
.lhalf .rtbut {
position: relative;
float: right;
width: 20%;
text-align: center;
}
.lhalf .ltnav ul {
float: left;
margin-bottom: 20px;
}
.lhalf .ltnav ul li {
float: none;
margin: 0 0 10px 100px;
}
.lhalf .ltnav ul li h4 {
font-weight: normal;
font-size: 14px;
margin-bottom: 20px;
color: #424242;
}
.lhalf .ltnav ul li a {
font-size: 12px;
color: #757575;
}
.lhalf .ltnav ul li a:hover {
color: #ff6700;
}
.rtbut h3 {
font-weight: normal;
color: #ff6700;
font-size: 21px;
}
.rtbut p {
font-size: 12px;
margin: 5px 0;
color: #616161;
}
.rtbut button {
width: 120px;
height: 30px;
color: #ff6700;
background-color: #fff;
border: 1px solid #ff6700;
}
.rtbut button::before {
font-family: 'icomoon';
content: '\e933';
font-size: 15px;
margin-right: 3px;
}
.rtbut button:hover {
color: #fff;
background-color: #ff6700;
transition: all .5s ease;
}
.rtbut h3::before {
content: '';
position: absolute;
left: -7px;
display: inline-block;
height: 85px;
border-left: 1px solid #e0e0e0;
}
/* footer模块 */
.footer {
background-color: #fafafa;
margin: 15px 0 0;
padding: 20px;
overflow: hidden;
}
.footer-left,
.footer-right {
margin: 10px;
}
.footer-content ul {
overflow: hidden;
margin-bottom: 5px;
}
.footer-content ul li {
font-size: 12px;
}
.footer-content ul li a:hover,
.footer-content ul li span:hover {
color: #ff6700;
}
.footer-content ul li a {
color: #757575;
}
.footer-content ul li span {
color: #b0b0b0;
margin-right: 5px;
}
.footer .root {
text-align: center;
font-size: 18px;
color: #bfbfbf;
margin-top: 40px;
}login.html：
<!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">
<title>登录页面</title>
<!-- 引入 css -->
<link rel="stylesheet" href="css/login.css">
<!-- 引入 js -->
<script type="text/javascript" src="js/jQuery.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div class="login_page">
<div class="left">
<div class="bg"></div>
</div>
<div class="right">
<div class="head">
<div class="logo">
<img src="images/This_is_tow_Mi.png" alt="">
<h2>小米账号</h2>
</div>
<div class="menu">
<ul>
<li><a href="javascript:;">用户协议</a></li>
<li><a href="javascript:;">隐私政策</a></li>
<li><a href="javascript:;">帮助中心</a></li>
<li class="language"><a href="javascript:;">中文(简体)</a>
<div class="lang">
<p>中文（繁体）</p>
<p>English</p>
</div>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="corner">
<img src="images/img/loading/white_cod.png" alt="">
<div class="trangle"></div>
<div class="alert">
<p>扫码登录</p>
<p>密码登录</p>
<div class="sj"></div>
</div>
</div>
<div class="login_form">
<div class="title">
<div class="login">
<a href="javascript:;">
<h3 class="hcolor">登录</h3>
<span></span>
</a>
</div>
<div class="register">
<a href="javascript:;">
<h3>注册</h3>
</a>
</div>
</div>
<div class="login_body">
<div class="input">
<div class="admin">
<input type="text" placeholder="邮箱/手机号码/小米ID" class="user">
<i>邮箱/手机号码/小米ID</i>
<p>请输入账号</p>
</div>
<div class="eyebox">
<input type="password" placeholder="密码" id="pwd">
<img src="images/close.png" alt="" id="eye">
<i>密码</i>
<p>请输入密码</p>
</div>
</div>
<div class="check">
<input type="checkbox" name="dl" id="dl">
<p>已阅读并同意小米帐号<span> 用户协议 </span>和<span> 隐私政策 </span></p>
</div>
<div class="click">
<button disabled="true">登录</button>
</div>
<div class="text">
<p>忘记密码？</p>
<p>手机号登录</p>
</div>
<div class="else">
<p>其他方式登录</p>
</div>
<div class="contact">
<img src="images/images/ate/contact.png" alt="">
</div>
</div>
<div class="register_body position_register">
<div class="input">
<div class="region">
<input class="area" type="text" readonly placeholder="国家/地区" value="中国">
<i>国家/地区</i>
<div class="tips">
<img src="images/img/loading/point.png" alt="">
<em>系统会根据您选择的国家/地区的法律法规存储您的个人信息</em>
</div>
</div>
<div class="telnumber">
<input class="tel" type="tel" placeholder="手机号">
<i>手机号</i>
<p>请输入手机号码</p>
</div>
<div class="idtfy">
<input class="yzm" type="text" placeholder="请输入验证码">
<i>请输入验证码</i>
<span>获取验证码</span>
<p>请输入短信验证码</p>
</div>
</div>
<div class="check">
<input type="checkbox" name="zc" id="zc">
<p>已阅读并同意小米帐号<span> 用户协议 </span>和<span> 隐私政策 </span></p>
</div>
<div class="click">
<button disabled="true">注册</button>
</div>
<div class="text">
<p>收不到验证码？</p>
</div>
<div class="else">
<p>其他方式登录</p>
</div>
<div class="contact">
<img src="images/images/ate/contact.png" alt="">
</div>
</div>
</div>
<div class="login_code">
<h3>扫码登录 安全快捷</h3>
<img src="images/images/xiaomi-android.png" alt="">
<p>请使用小米手机/米家等小米旗下APP扫码登录</p>
<div class="sport">
<p>支持扫码登录的App</p>
</div>
<div class="contact">
<img src="images/images/ate/threepay.png" alt="">
</div>
</div>
</div>
<div class="footer">
<p>小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
</div>
</div>
</div>
</body>
</html>login.css：
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7kkyc2') format('truetype'), url('../fonts/icomoon.woff?7kkyc2') format('woff'), url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
ul li {
list-style: none;
float: left;
cursor: pointer;
}
.left,
.right {
float: left;
height: 940px;
}
.block {
display: block;
}
.none {
display: none;
}
.login_page {
display: flex;
}
.left {
width: 20%;
}
.right {
width: 80%;
}
.left .bg {
width: 100%;
height: 100%;
background-image: url(../images/images/ate/bgimg.jpg);
background-size: cover;
background-position: 50%;
}
.head,
.logo {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
width: 40px;
background-color: #ff6700;
border-radius: 15px;
margin: 20px;
}
.logo h2 {
font-weight: 500;
}
.head .menu ul li a {
color: #838383;
padding: 0 15px;
font-size: 13px;
}
.head .menu ul li:last-child {
position: relative;
}
.head .menu ul li:last-child a {
border-left: 1px solid #ddd;
margin-right: 20px;
position: relative;
}
.head .menu ul li:last-child a::after {
content: '\e904';
font-family: 'icomoon';
color: #838383;
font-size: 16px;
position: absolute;
top: 2px;
right: -5px;
}
.head .menu ul li:hover a,
.head .menu ul li:hover a::after {
color: #ff6700;
}
.head .menu ul li:hover a::after {
transform: rotate(180deg);
transition: all .3s ease;
}
.menu ul li .lang {
overflow: hidden;
position: absolute;
top: 30px;
left: 5px;
width: 95px;
height: 0;
background-color: #fff;
box-shadow: 0 0 10px -2px #ddd;
transition: all .3s ease;
}
.menu ul li .langh {
height: 74px;
}
.lang p {
font-size: 13px;
padding: 10px 0;
text-align: center;
color: #838383;
}
.lang p:hover {
background-color: #f5f5f5;
}
.content {
display: flex;
justify-content: center;
align-items: baseline;
position: relative;
width: 100%;
height: 87%;
text-align: center;
overflow: hidden;
}
.corner {
position: relative;
top: 33px;
left: 470px;
width: 65px;
height: 65px;
border-top-right-radius: 5px;
background-color: #ffbe99;
z-index: 3;
}
.position {
top: 37px;
left: 455px;
}
.toggleimg {
src: url(images/img/loading/whitecodecomputer.png);
}
.corner img {
width: 36px;
margin: 10px 0 0 20px;
}
.trangle {
position: absolute;
top: 0;
width: 0;
height: 0;
border: 33px solid transparent;
border-color: transparent transparent #fff #fff;
line-height: 0;
font-size: 0;
}
.alert {
display: none;
position: absolute;
top: 15px;
right: 70px;
width: 85px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 14px;
border-radius: 3px;
color: #fff;
transition: all .5s ease;
background-color: #ff5c00;
}
.alert .sj {
position: absolute;
top: 10px;
right: -8px;
width: 0;
height: 0;
border: 5px solid transparent;
border-color: transparent transparent transparent #ff5c00;
line-height: 0;
font-size: 0;
}
.content .login_form {
display: block;
position: relative;
top: 50px;
width: 390px;
padding: 40px;
border-radius: 5px;
box-shadow: 0px 0px 20px 0px #e0e0e0;
}
.title {
display: flex;
position: relative;
}
.title a h3 {
margin-right: 10px;
padding: 4px 0;
color: #bbb;
}
.title a:first-child h3 {
margin-left: 10px;
}
.title a .hcolor {
color: #333;
transition: all .5s ease;
}
.title a span {
position: absolute;
left: 10px;
height: 4px;
width: 37px;
border-radius: 2px;
background-color: #ff5c00;
transition: all .5s ease;
}
.input {
position: relative;
}
.input input {
position: relative;
width: 320px;
height: 25px;
padding: 20px;
margin: 20px 0 0 10px;
font-size: 16px;
border-radius: 5px;
background-color: #f9f9f9;
border: 1px solid transparent;
outline: none;
}
.input input::-webkit-input-placeholder {
color: #bbb;
}
/* 兼容 */
input::-webkit-input-placeholder {
/* 兼容WebKit browsers（Chrome的内核） */
color: #bbb;
}
input::-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #bbb;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #bbb;
}
input::-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #bbb;
}
.input:first-child {
margin-top: 20px;
}
.eyebox,
.admin,
.region,
.telnumber,
.idtfy {
position: relative;
}
.input img {
position: absolute;
bottom: 20px;
right: 36px;
width: 25px;
cursor: pointer;
}
.check {
display: flex;
padding: 10px 0;
margin: 30px 0 20px 20px;
font-size: 13px;
color: #bbb;
}
.check span {
color: #333;
cursor: pointer;
}
input[type="checkbox"] {
width: 18px;
height: 18px;
margin-right: 10px;
display: inline-block;
text-align: center;
vertical-align: middle;
position: relative;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type="checkbox"]:checked::before {
content: "\2713";
color: #fff;
/* 对号的转义符 √ */
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
background-color: #ff6900;
border: 1px solid #ff6900;
border-radius: 5px;
}
.check input:hover,
.area {
cursor: pointer;
}
.click button {
width: 355px;
height: 60px;
margin-left: 10px;
font-size: 17px;
color: #fff;
border: none;
background-color: #ff5c00;
border-radius: 5px;
cursor: pointer;
}
button[disabled] {
background-color: #ffbe99;
opacity: 1
}
.text {
overflow: hidden;
}
.text p {
float: left;
color: #ff5c00;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
}
.text p:last-child {
float: right;
margin-right: 10px;
}
.text p:first-child {
margin-left: 20px;
}
.else p {
color: #aaa;
text-align: center;
margin: 20px 0;
}
.contact img {
margin-left: 10px;
cursor: pointer;
}
.footer {
position: absolute;
left: 50%;
bottom: 20px;
}
.footer p {
text-align: center;
color: #999;
font-size: 12px;
}
.login_body {
height: 483px;
transform: translateX(0px);
transition: all .5s ease;
}
.register_body {
height: 570px;
opacity: 0;
transform: translateX(450px);
transition: all .5s ease;
}
.position_login {
width: 370px;
position: absolute;
}
.position_register {
position: absolute;
top: 70px;
}
.register_body .input {
position: relative;
}
.input .idtfy span {
position: absolute;
bottom: 25px;
right: 40px;
color: #ff6900;
font-size: 13px;
}
.register_body .text p {
float: left;
}
.input input.input_focus {
border: 1px solid #ff5c00;
box-shadow: 0px 0px 1px 2px #ffdecc;
background-color: #fff;
transition: all .3s ease;
}
.input input.input_blur {
background-color: #fcf2f3;
}
.input input.text_focus::placeholder {
position: absolute;
top: 5px;
left: 20px;
font-size: 12px;
color: #bbb;
transition: all .3s;
}
.input input.text_blur::placeholder {
color: #f04645;
transition: all .3s;
}
.input p {
display: none;
color: #f04645;
font-size: 12px;
margin: 10px 0 0 10px;
}
.input i {
display: none;
position: absolute;
bottom: 44px;
left: 40px;
font-style: normal;
font-weight: 100;
font-size: 12px;
color: #bbb;
}
.input .region i {
display: block;
}
.input .region i::after {
content: '\e904';
font-family: 'icomoon';
color: #bbb;
font-size: 24px;
position: absolute;
top: 15px;
left: 300px;
}
.input .region .tips {
display: none;
position: absolute;
top: 15px;
right: -295px;
width: 290px;
height: 75px;
transition: all .5s ease;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px 3px #f3f3f3;
z-index: 9;
}
.input .region .tips img {
width: 21px;
position: absolute;
top: 20px;
left: 10px;
}
.input .region .tips em {
position: absolute;
top: 20px;
left: 10px;
padding: 0px 25px;
font-style: normal;
line-height: 20px;
font-size: 12px;
color: #333;
}
.login_code {
display: none;
position: relative;
top: 50px;
width: 375px;
height: 460px;
padding: 40px;
background-color: #fff;
box-shadow: 0px 0px 20px 0px #e0e0e0;
text-align: center;
}
.login_code img {
width: 180px;
margin: 30px 0;
}
.login_code p {
font-size: 14px;
color: #333;
}
.login_code .sport p {
color: #aaa;
text-align: center;
font-size: 16px;
margin: 70px 0 -20px;
}
1614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
