<!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="https://at.alicdn.com/t/c/font_3584573_9iel9pizxxa.css"> -->
<title>小米官网</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3584573_4t82wup9lwk.css">
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
<script src="./swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3584573_242krmuqh3s.css">
<style>
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
nav {
width: 100%;
height: 40px;
background-color: #333333;
}
.zhongjian {
margin: 0px auto;
width: 1226px;
height: 40px;
}
.zhongjian>.s1>li {
float: left;
font-size: 12px;
padding: 0px 3px;
}
.zhongjian>.s1 {
width: 794.13px;
text-align: center;
line-height: 40px;
background-color: red;
}
.s2 {
text-align: center;
line-height: 40px;
position: relative;
left: 155px;
}
.s2>li {
float: left;
padding: 0px 3px;
font-size: 12px;
}
.s3 {
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #424242;
float: left;
margin-left: 186px;
}
.s3>span {
font-size: 12px;
}
.s8:hover {
color: orange;
background-color: white;
}
.zhongjian a {
color: #B0B0B0;
}
.zhongjian a:hover {
color: white;
}
.zhongjian li:nth-of-type(2n) {
color: #424242;
}
.s6 {
width: 330px;
/* height: 110px; */
height: 0px;
border-left: 3px solid #f5f2f2;
border-right: 3px solid #f5f2f2;
border-bottom: 3px solid #f5f2f2;
/* box-shadow: 0px 3px 9px rgba(#333333); */
margin-left: -210px;
line-height: 150px;
overflow: hidden;
text-align: center;
line-height: 110px;
transition: all 0.6s;
position: relative;
z-index: 12000;
background-color: white;
}
.s3:hover>.s6 {
height: 110px;
}
.a1 {
width: 45.95px;
height: 40px;
}
#s5 {
width: 0px;
height: 0px;
border: 8px solid white;
border-color: transparent transparent white;
margin-left: 17px;
margin-top: -15px;
display: none;
position: relative;
z-index: 9999;
}
.a1:hover>#s5 {
display: block;
}
.s7 {
width: 120px;
height: 0px;
box-shadow: 0px 0px 4px rgba(167, 167, 167, 0.5);
background-color: white;
/* display: none; */
margin-left: -35px;
overflow: hidden;
transition: all 0.6s;
position: relative;
z-index: 9999;
}
.a1:hover>.s7 {
/* display: block; */
height: 140px;
position: relative;
z-index: 12000;
}
.s7>span {
position: relative;
font-size: 15px;
bottom: 20px;
}
/* .search{
border: 1px solid black;
} */
/* .search>input:focus{
outline: none;
} */
#a1 {
width: 100%;
height: 100px;
position: relative;
z-index: 9999;
}
#a2 {
float: left;
line-height: 100px;
}
#a3 {
float: left;
text-align: center;
line-height: 100px;
margin-left: 174px;
}
#a3>li {
float: left;
height: 17.6;
font-size: 16px;
padding-left: 9px;
padding-right: 9px;
}
#a3 a {
color: #333333;
}
#a3 a:hover {
color: #FF7FA5;
}
a.icon-icon-xiaomiguishu {
font-size: 56px;
color: #FF6A00;
}
#a4 {
line-height: 100px;
float: right;
padding-left: 20px;
}
#a4:hover>#a6 {
border: 1px solid #B0B0B0;
}
#a4:hover>.icon-sousuo {
border-top: 1px solid #B0B0B0;
border-right: 1px solid #B0B0B0;
border-bottom: 1px solid #B0B0B0;
}
#a4:active>#a6 {
border: 1px solid red;
}
#a4:active>.icon-sousuo {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
#a4>input {
border: 1px solid #E0E0E0;
outline: none;
}
#a4>span {
font-size: 26.5px;
width: 52px;
height: 49px;
padding: 12px;
border-top: 1px solid #E0E0E0;
border-right: 1px solid #E0E0E0;
border-bottom: 1px solid #E0E0E0;
box-sizing: border-box;
position: relative;
bottom: 0.5px;
}
#a4>span:hover {
background-color: #FF6700;
}
#a5 {
width: 1226px;
height: 100px;
margin: 0px auto;
}
#a6 {
width: 245px;
line-height: 50px;
position: relative;
bottom: 6px;
left: 5px;
}
#a4:hover>#o1 {
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#o1 {
background-color: white;
margin-top: -28px;
margin-left: 5px;
width: 243px;
/* border: 1px solid black; */
display: none;
}
#a4:active>#o1 {
display: block;
}
#o1>p {
line-height: 40px;
margin-left: 10px;
font-size: 13px;
}
#o1>p>a {
color: #333333;
}
.c1 {
width: 100%;
height: 150px;
border-top: 1px solid #E0E0E0;
box-shadow: 0px 2px 3px #DADADA;
background-color: white;
position: absolute;
/* position: relative; */
left: 0;
/* overflow: hidden;
transition: all 0.6s; */
display: none;
z-index: 11;
}
.c2:hover>.c1 {
display: block;
}
.d1 {
width: 1226px;
height: 500px;
margin: 0px auto;
}
.d2 {
width: 234px;
height: 500px;
background-color: rgba(165, 163, 163, .3);
position: relative;
z-index: 4;
}
.d3>li {
line-height: 42px;
/* overflow: hidden; */
font-size: 16px;
padding-left: 25px;
height: 42;
}
.d3>li:hover {
background-color: #FF6700;
}
.d3>li>a {
color: white;
}
.d3 div {
width: 992px;
height: 498px;
/* background-color: #FF6700; */
border: 1px solid gray;
background-color: white;
box-shadow: 0px 0px 5px grey;
position: absolute;
display: none;
left: 234px;
z-index: 6px;
bottom: 0px;
}
.d3:hover div {
display: block;
}
.d4 {
margin-top: 15px;
padding-top: 20px;
}
span.icon-right {
float: right;
color: white;
font-size: 40px;
}
.swiper {
width: 1226px !important;
height: 500px;
overflow: hidden;
/* display: none; */
position: relative;
/* left: 234px; */
bottom: 500px;
padding-right: -50px;
z-index: 2;
}
.swiper-slide>img {
position: relative;
z-index: 10;
}
.j1 {
width: 100%;
/* height: 170px; */
margin: 0px auto;
background-color: rgb(19, 18, 17);
}
.e1 {
width: 234px;
height: 170px;
padding: 3px;
box-sizing: border-box;
background-color: #5f5750;
float: left;
}
.e2 {
width: 1226px;
margin: 20px auto;
}
.e1 li {
float: left;
width: 76px;
height: 82px;
position: relative;
box-sizing: border-box;
left: 14px;
}
.e1 img {
display: block;
font-size: 22px;
margin-bottom: 4px;
padding: 13px;
}
.e1 a {
color: #fff;
font-size: 12px;
opacity: .7;
display: block;
}
.e1 a:hover {
opacity: 1;
}
.f1::after {
position: absolute;
content: "";
bottom: 0;
left: -5px;
height: 1px;
width: 64px;
background-color: #797876;
}
.f2::before {
position: absolute;
top: 6px;
right: 10px;
content: "";
width: 1px;
height: 70px;
background-color: #797876;
}
.g1>li {
float: left;
}
.g2 {
margin-left: 12px;
}
.g3 {
margin-left: 10px;
margin-right: 10px;
}
.g1 img:hover {
box-shadow: 0px 3px 5px gray;
transition: all 0.6s;
}
.swiper-button-prev {
margin-left: 224px;
color: #D9D9D7;
width: 40px;
height: 60px;
/* background-color: #7F7F7F; */
/* display: none; */
}
.swiper-button-next {
color: #D9D9D7;
width: 40px;
height: 60px;
/* background-color: #7F7F7F; */
}
/* .swiper-button-prev:hover{
display: block;
} */
.swiper-button-next:hover {
background-color: #333333;
}
.swiper-button-prev:hover {
background-color: #333333;
}
#p1 * {
width: 12px;
height: 12px;
border: 3px solid #807e7e;
background-color: #bdb9b9;
position: relative;
left: 520px;
bottom: 20px;
box-sizing: border-box;
}
#p1 *:hover{
border: 3px solid #807e7e;
background-color: #bdb9b9;
}
.m1 {
position: fixed;
bottom: 100px;
right: 0;
}
.m1>li {
width: 70px;
line-height: 40px;
border: 1px solid rgb(190, 187, 187);
}
.m1>li>a>span {
position: relative;
top: 10px;
left: 17px;
font-size: 40px;
color: #999999;
}
.m1>li>a>.p1 {
position: relative;
left: 10px;
}
.m1>li>a>p {
color: #999999;
}
.m1 a:hover {
color: #FF6700;
}
.m1 a:hover>span {
color: #FF6700;
}
.m1 a:hover>p {
color: #FF6700;
}
</style>
</head>
<body>
<header>
<nav>
<div class="zhongjian">
<ul class="s1">
<li>
<a href="#">小米官网</a>
</li>
<li>|</li>
<li>
<a href="#"> 小米商城</a>
</li>
<li>|</li>
<li>
<a href="#">MIUI</a>
</li>
<li>|</li>
<li>
<a href="#">IoT</a>
</li>
<li>|</li>
<li>
<a href="#">云服务</a>
</li>
<li>|</li>
<li>
<a href="#">天星科技</a>
</li>
<li>|</li>
<li>
<a href="#">有品</a>
</li>
<li>|</li>
<li>
<a href="#">小爱开放平台</a>
</li>
<li>|</li>
<li>
<a href="#">企业团购</a>
</li>
<li>|</li>
<li>
<a href="#">资质证照</a>
</li>
<li>|</li>
<li>
<a href="#">协议规则</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">下载app</a>
<div id="s5"></div>
<div class="s7">
<img src="./图片/download.png" alt="" height="100px"><br>
<span>小米商城app</span>
</div>
</li>
<li>|</li>
<li>
<a href="#">Select Location</a>
</li>
</ul>
<ul class="s2">
<li>
<a href="#">
登录
</a>
</li>
<li>|</li>
<li>
<a href="#">
注册
</a>
</li>
<li>|</li>
<li class=>
<a href="#">
消息通知
</a>
</li>
</ul>
<div class="s3">
<div class="s8">
<span class="iconfont icon-gouwuchekong"></span>
<span>购物车 （0）</span>
</div>
<div class="s6">
<span>
购物车还没有商品,赶快选购吧！
</span>
</div>
</div>
</div>
</nav>
<div id="a1">
<div id="a5">
<div id="a2">
<a href="#" class="iconfont icon-icon-xiaomiguishu"></a>
</div>
<ul id="a3">
<li class="c2">
<a href="#">Xiaomi手机</a>
<div class="c1">
</div>
</li>
<li class="c2">
<a href="#">Redmi手机</a>
<div class="c1">
</div>
</li>
<li class="c2">
<a href="#">电视</a>
<div class="c1">
</div>
</li>
<li class="c2">
<a href="#">笔记本</a>
<div class="c1">
</div>
</li>
<li class="c2">
<a href="#">平板</a>
<div class="c1">
</div>
</li>
<li class="c2">
<a href="#">家电</a>
<div class="c1">
</div>
</li>
<li class="c2">
<a href="#">路由器</a>
<div class="c1">
</div>
</li>
<li>
<a href="#">服务中心</a>
</li>
<li>
<a href="#">社区</a>
</li>
</ul>
<div class="search" id="a4">
<input type="text" placeholder="点击搜索" id="a6">
<span class="iconfont icon-sousuo"></span>
<div id="o1">
<p><a href="#">小米</a></p>
<p><a href="#">华为</a></p>
<p><a href="#">苹果</a></p>
<p><a href="#">vivo</a></p>
<p><a href="#">oppo</a></p>
</div>
</div>
</div>
</div>
</header>
<main class="d1">
<div class="d2">
<ul class="d3">
<li class="d4">
<a href="#">手机</a>
<span class="iconfont icon-right"></span>
<div></div>
</li>
<li>
<a href="#">电视</a>
<span class="iconfont icon-right"></span>
<div></div>
</li>
<li>
<a href="#">笔记本 平板</a>
<span class="iconfont icon-right"></span>
</li>
<li>
<a href="#">出行 穿戴</a>
<span class="iconfont icon-right"></span>
</li>
<li>
<a href="#">耳机 音响</a>
<span class="iconfont icon-right"></span>
</li>
<li>
<a href="#">家电</a>
<span class="iconfont icon-right"></span>
</li>
<li>
<a href="#">智能 路由器</a>
<span class="iconfont icon-right"></span>
</li>
<li>
<a href="#">电源 配件</a>
<span class="iconfont icon-right"></span>
</li>
<li>
<a href="#">健康 儿童</a>
<span class="iconfont icon-right"></span>
</li>
<li>
<a href="#">生活 箱包</a>
<span class="iconfont icon-right"></span>
</li>
</ul>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./图片/cbe159245d840285e98a4ba213eecba2.webp" alt="">
</div>
<div class="swiper-slide">
<img src="./图片/d5bcaeb5b2c0d8853a1f26036951364c.webp" alt="">
</div>
<div class="swiper-slide">
<img src="./图片/d20d536690f6de775aefb113812122b3.webp" alt="">
</div>
<div class="swiper-slide">
<img src="./图片/71139db54251442981e61cb1064152fc.jpg" alt="" height="540px">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination" id="p1"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper', {
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
clickableClass: 'my-pagination-clickable',
},
loop: true, // 循环模式选项
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
effect: 'fade',
pagination: {
el: '.swiper-pagination',
clickable: true,
}
})
// 鼠标滑过pagination控制swiper切换
// for(i=0;i<mySwiper.pagination.bullets.length;i++){
// mySwiper.pagination.bullets[i].οnmοuseοver=function(){
// this.click();
// };
// }
//如果你在swiper初始化后才决定使用clickable，可以这样设置
mySwiper.params.pagination.clickable = true;
//此外还需要重新初始化pagination
mySwiper.pagination.destroy()
mySwiper.pagination.init()
mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');
</script>
</main>
<div class="j1">
<div class="e2">
<div class="e1">
<ul>
<li class="f1 f2">
<a href="#">
<img src="./图片/82abdba456e8caaea5848a0cddce03db.png" alt="" height="24px">
<p>保障服务</p>
</a>
</li>
<li class="f1 f2">
<a href="#">
<img src="./图片/806f2dfb2d27978e33fe3815d3851fa3.png" alt="" height="24px">
<p>企业团购</p>
</a>
</li>
<li class="f1">
<a href="#">
<img src="./图片/eded6fa3b897a058163e2485532c4f10.png" alt="" height="24px">
<p>F码通道</p>
</a>
</li>
<li class="f2">
<a href="#">
<img src="./图片/43a3195efa6a3cc7662efed8e7abe8bf.png" alt="" height="24px">
<p>米粉卡</p>
</a>
</li>
<li class="f2">
<a href="#">
<img src="./图片/f4846bca6010a0deb9f85464409862af.png" alt="" height="24px">
<p>以旧换新</p>
</a>
</li>
<li>
<a href="#">
<img src="./图片/9a76d7636b08e0988efb4fc384ae497b.png" alt="" height="24px">
<p>花费充值</p>
</a>
</li>
</ul>
</div>
<ul class="g1">
<li class="g2">
<img src="./图片/32a62196b9af47752c96e7a50c86417c.jpg" alt="" width="320px" height="170px">
</li>
<li class="g3">
<img src="./图片/5668146e20fc025caa756a0f8a3c7da4.jpg" alt="" width="320px" height="170px">
</li>
<li class="g4">
<img src="./图片/28c13d0d11b38ec17fa5d83bc6ba5912.jpg" alt="" width="320px" height="170px">
</li>
</ul>
</div>
</div>
<ul class="m1">
<li>
<a href="#">
<span class="iconfont icon-shouji"></span>
<p>手机app</p>
</a>
</li>
<li>
<a href="#">
<span class="iconfont icon-icon03"></span>
<p>个人中心</p>
</a>
</li>
<li>
<a href="#">
<span class="iconfont icon-banshou"></span>
<p>售后服务</p>
</a>
</li>
<li>
<a href="#">
<span class="iconfont icon-kefu"></span>
<p>人工客服</p>
</a>
</li>
<li>
<a href="#">
<span class="icon-gouwuche"></span>
<p class="p1">购物车</p>
</a>
</li>
</ul>
</body>
</html>
