<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站</title>
<link rel="icon" href="images/favicon.ico">
<link rel="stylesheet" href="iconfont.css">
<link rel="stylesheet" href="index.xiaomi.style.css">
</head>
<body>
<!-- 头部开始 -->
<div>
<a href="#">
<img src="images/bb3c06a430689ba2357dd7d1fbfa6bab.jpg" alt="广告">
</a>
</div>
<!-- 头部结束 -->
<!-- 黑色导航开始 -->
<div>
<div>
<ul>
<li>
<a href="#">小米商城</a>
<span>|</span>
</li>
<li>
<a href="#">MIUI</a>
<span>|</span>
</li>
<li>
<a href="#">loT</a>
<span>|</span>
</li>
<li>
<a href="#">云服务</a>
<span>|</span>
</li>
<li>
<a href="#">天星科技</a>
<span>|</span>
</li>
<li>
<a href="#">有品</a>
<span>|</span>
</li>
<li>
<a href="#">小爱开放平台</a>
<span>|</span>
</li>
<li>
<a href="#">企业团购</a>
<span>|</span>
</li>
<li>
<a href="#">资质证照</a>
<span>|</span>
</li>
<li>
<a href="#">协议规则</a>
<span>|</span>
</li>
<li>
<a href="#">下载app</a>
<span>|</span>
<div>
<img src="images/download.png" alt="">
<p>小米商城APP</p>
</div>
<div></div>
</li>
<li>
<a href="#">智能生活</a>
<span>|</span>
</li>
<li>
<a href="#">Select Location</a>
<span>|</span>
</li>
</ul>
<ul>
<li>
<a href="#">登录</a>
<span>|</span>
</li>
<li>
<a href="#">注册</a>
<span>|</span>
</li>
<li>
<a href="#">消息通知</a>
</li>
<li>
<a href="#">购物车(0)</a>
<div>
购物车中还没有商品,赶紧选购吧!
</div>
</li>
</ul>
</div>
</div>
<!-- 黑色导航结束 -->
<!-- 白色导航开始 -->
<div>
<div>
<div>
<img src="images/mi-logo.png" alt="">
<img src="images/mi-home.png" alt="">
</div>
<div>
<ul>
<div></div>
<li>
<a href="">小米手机</a>
<div>
<div>
<ul>
<li>
<a href="#">
<div>
<img src="images/963679eaf3937351e154600ab3448460.png" alt="">
<p>小米11</p>
<p>3999元起</p>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<img src="images/963679eaf3937351e154600ab3448460.png" alt="">
<p>小米11</p>
<p>3999元起</p>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<img src="images/963679eaf3937351e154600ab3448460.png" alt="">
<p>小米11</p>
<p>3999元起</p>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<img src="images/963679eaf3937351e154600ab3448460.png" alt="">
<p>小米11</p>
<p>3999元起</p>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<img src="images/963679eaf3937351e154600ab3448460.png" alt="">
<p>小米11</p>
<p>3999元起</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="">Redmi红米</a>
</li>
<li>
<a href="">电视</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">家电</a>
</li>
<li>
<a href="">路由器</a>
</li>
<li>
<a href="">智能硬件</a>
</li>
<li>
<a href="">服务</a>
</li>
<li>
<a href="">社区</a>
</li>
</ul>
</div>
<div>
<input type="text" placeholder="赢手机,分一亿!">
<button></button>
<div></div>
</div>
</div>
</div>
<!-- 白色导航结束 -->
<!-- banner部分开始 -->
<div>
<div>
<img src="images/01d048d6ca5fea696b60c0431e24fbf3.jpg" alt="">
<div>
<ul>
<li>
<a href="#">手机 电话卡</a>
<i></i>
<div>
<ul>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
<span>小米11</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">手机 电话卡</a>
<i></i>
</li>
<li>
<a href="#">手机 电话卡</a>
<i></i>
</li>
<li>
<a href="#">手机 电话卡</a>
<i></i>
</li>
<li>
<a href="#">手机 电话卡</a>
<i></i>
</li>
<li>
<a href="#">手机 电话卡</a>
<i></i>
</li>
<li>
<a href="#">手机 电话卡</a>
<i></i>
</li>
<li>
<a href="#">手机 电话卡</a>
<i></i>
</li>
<li>
<a href="#">手机 电话卡</a>
<i></i>
</li>
<li>
<a href="#">手机 电话卡</a>
<i></i>
</li>
</ul>
</div>
</div>
</div>
<!-- banner部分结束 -->
</body>
</html>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
li{
list-style-type: none;
}
/*头部样式开始*/
.header{
width: 100%px;
height: 120px;
/*background-color: red;*/
margin: 0 auto;
position: relative;
overflow: hidden;
}
.header img{
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/*头部样式结束*/
/*黑色导航样式开始*/
.black-nav{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333;
color: #b0b0b0;
font-size: 12px;
}
.wrap{
width: 1226px;
margin: 0 auto;
}
.black-nav-left{
float: left;
}
.black-nav-right{
float: right;
}
.black-nav li{
float: left;
position: relative;
}
.black-nav a{
color:#b0b0b0;
}
.black-nav a:hover{
color: #fff;
}
.black-nav span{
color: #424242;
margin: 0 3.6px;
}
.cart{
width: 120px;
height: 40px;
background-color: #424242;
text-align: center;
margin-left: 25px;
transition: all .2s;
position: relative;
}
.cart:hover{
background-color: #fff;
}
.cart:hover>a{
color: #ff6700;
}
.cart-list{
width: 316px;
height: 0;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
position: absolute;
right: 0;
top: 40px;
color: #424242;
line-height: 100px;
overflow: hidden;/*隐藏溢出的文字*/
transition: all .3s;
z-index: 999;
}
.cart:hover>.cart-list{
height: 100px;
}
/*下载app*/
.download{
width: 124px;
height: 0;
background-color: #fff;
box-shadow: 0 1px 5px #aaa;
position: absolute;
top: 40px;
left: 50%;
margin-left: -62px;
transition: all .3s;
overflow: hidden;
z-index: 999;
}
.download>img{
width: 90px;
margin: 18px 17px -5px;
}
.download>p{
color: #333;
font-size: 14px;
line-height: 14px;
text-align: center;
}
.black-nav-left>li:hover>.download{
height: 148px;
}
.stri{
width: 0;
height: 0;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -8px;
display: none;
}
.black-nav-left>li:hover>.stri{
display: block;
}
/*黑色导航样式结束*/
/*白色导航样式开始*/
.white-nav{
width: 100%;
height: 100px;
/*background-color: skyblue;*/
position: relative;
}
.logo{
width: 55px;
height: 55px;
background-color: #ff6700;
float: left;
margin-top: 22.5px;
position: relative;
overflow: hidden;
}
.nav-bar{
width: 875px;
height: 100px;
line-height: 100px;
/*background-color: pink;*/
float: left;
}
.search{
width: 296px;
height: 100px;
/*background-color: purple;*/
float: left;
position: relative;
}
.logo>img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
transition: all .2s;
}
.mi-home{
left: -55px;
}
.mi-logo{
left: 1px;
}
.logo:hover>.mi-home{
left: 1px;
}
.logo:hover>.mi-logo{
left: 55px;
}
.nav-bar li{
float: left;
}
/*白色导航空白*/
.nav-bar .blank{
width: 200px;
height: 100px;
/*background-color: red;*/
float: left;
}
.nav-bar>ul>li>a{
font-size: 16px;
color: #333;
padding: 0 10px;
}
.nav-bar>ul>li>a:hover{
color: #ff6700;
}
.nav-bar-list{
width: 100%;
height: 229px;
background-color: #fff;
border-top: 1px solid #eee;
box-shadow: 0 3px 4px rgba(0,0,0,.1);
position: absolute;
top: 100px;
left: 0;
display: none;
z-index: 999;
}
.img-box{
width: 100%;
height: 110px;
margin-top: 25px;
border-right: 2px solid #eee;
box-sizing: border-box;
text-align: center;
}
.name1{
color: #333;
font-size: 12px;
line-height: 20px;
margin-top: -35px;
}
.price{
color: #ff6700;
font-size: 12px;
line-height: 20px;
}
.nav-bar-list li{
width: 204px;
}
.nav-bar-list li:last-child .img-box{
border-right: none;
}
.nav-bar li:hover .nav-bar-list{
display: block;
}
.search>input{
width: 244px;
height: 50px;
/*background-color: red;*/
border: 1px solid #e0e0e0;
box-sizing: border-box;
padding: 0 10px;
outline: none;
float: left;
border-right: none;
margin-top: 25px;
transition: all .2s;
}
.search>button{
width: 52px;
height: 50px;
background-color: #fff;
border: 1px solid #e0e0e0;
float: left;
margin-top: 25px;
outline: none;
transition: all .2s;
}
.search>input:hover,.search>input:hover+button{
border-color: #b0b0b0;
}
.search>input:focus,.search>input:focus+button{
border-color: #ff6700;
}
.search>button:hover{
background-color: #ff6700;
border-color: #ff6700;
color: #fff;
}
.search-list{
width: 245px;
height: 241px;
background-color: #fff;
border: 1px solid #ff6700;
border-top: none;
box-sizing: border-box;
position: absolute;
left: 0;
top: 75px;
display: none;
}
.search>input:focus~.search-list{
display: block;
}
/*白色导航样式结束*/
/*banner部分样式开始*/
.banner{
width: 100%;
height: 460px;
}
.banner .banner-img{
width: 100%;
}
.banner>.wrap{
position: relative;
}
.slide{
width: 234px;
height: 420px;
padding: 20px 0;
background-color: rgba(105,101,101,.6);
position: absolute;
left: 0;
top: 0;
}
.slide>ul>li{
height: 42px;
line-height: 42px;
text-align: left;
padding-left: 30px;
font-size: 14px;
}
.slide>ul>li:hover{
background-color: #ff6700;
}
.slide>ul>li>a{
color: #fff;
}
.slide i{
float: right;
padding-right: 20px;
color: #fff;
}
.slide-list{
width: 992px;
height: 460px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-left: none;
box-shadow: 0 8px 16px rgba(0,0,0,.18);
padding-top: 2px;
position: absolute;
top: 0;
left: 234px;
display: none;
}
.slide-list>ul{
float: left;
width: 247.75px;
}
.slide-list li{
width: 100%;
height: 76px;
padding: 18px 0 18px 20px;
box-sizing: border-box;
}
.slide-list img{
margin-right: 10px;
width: 40px;
height: 40px;
}
.slide-list span{
color: #333;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
top: -14px;
}
.slide-list li:hover span{
color: #ff6700;
}
.slide li:hover .slide-list{
display: block;
}
/*banner部分样式结束*/
老师好，我这个小米手机的下拉框加过渡怎么也加不上是咋回事呀
京公网安备 11011402011233号