admin管理员组文章数量:1530873
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>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/mi.css">
<link rel="stylesheet" href="swiper/swiper-bundle.min.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="wrap">
<ul class="header-left">
<li><a href="#">小米官网</a><span>|</span></a></li>
<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 class="download">
<a href="#">
<img src="./img/7.png" alt="">
<p>小米商城APP</p>
</a>
</div>
<div class="triangle"></div>
</li>
<li><a href="#">Select</a></li>
</ul>
<ul class="header-right">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a></li>
<li class="cart">
<a href="#">
<ion-icon name="cart-outline"></ion-icon>
购物车（0）
</a>
<div class="cart-list">
购物车中还没有商品，赶紧选购吧！
</div>
</li>
</ul>
</div>
</div>
<!-- 导航 -->
<div class="nav">
<div class="wrap">
<div class="logo">
<a href="#">
<img src="./img/logo-mi2.png" alt="小米loogo">
</a>
</div>
<div class="nav-bar">
<ul>
<li>
<a href="#">小米手机</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="./img/8.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li><a href="#"></a></li>
<li class="wu">
<a href="#">
<div class="img-box">
<img src="./img/8.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Redmi红米</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="./img/9.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li><a href="#"></a></li>
<li class="wu">
<a href="#">
<div class="img-box">
<img src="./img/9.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">电视</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="./img/10.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li><a href="#"></a></li>
<li class="wu">
<a href="#">
<div class="img-box">
<img src="./img/10.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">笔记本</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="./img/11.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li><a href="#"></a></li>
<li class="wu">
<a href="#">
<div class="img-box">
<img src="./img/11.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">家电</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="./img/12.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li><a href="#"></a></li>
<li class="wu">
<a href="#">
<div class="img-box">
<img src="./img/12.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">路由器</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="./img/13.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li><a href="#"></a></li>
<li class="wu">
<a href="#">
<div class="img-box">
<img src="./img/13.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">智能硬件</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="./img/14.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li><a href="#"></a></li>
<li class="wu">
<a href="#">
<div class="img-box">
<img src="./img/14.webp" alt="">
</div>
<p>小米11 Pro</p>
<p>2299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">服务</a>
</li>
<li>
<a href="#">社区</a>
</li>
</ul>
</div>
<div class="search">
<input type="text">
<a href="#"><ion-icon name="search-outline"></ion-icon></a>
<div class="search-list">
<ul>
<li><a href="#">全部商品</a></li>
<li><a href="#">全部商品</a></li>
<li><a href="#">全部商品</a></li>
<li><a href="#">全部商品</a></li>
<li><a href="#">全部商品</a></li>
<li><a href="#">全部商品</a></li>
<li><a href="#">全部商品</a></li>
<li><a href="#">全部商品</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 主体部分 -->
<div class="banner">
<div class="wrap">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/1.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/2.webp" alt=""></div>
<div class="swiper-slide"><img src="./img/3.webp" alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="slide">
<ul>
<li>
<a href="#">
手机
<ion-icon name="chevron-forward-outline"></ion-icon>
</a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="./img/25.webp" alt="">
<span>小米手机</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/25.webp" alt="">
<span>小米手机</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/25.webp" alt="">
<span>小米手机</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/25.webp" alt="">
<span>小米手机</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</li>
<li>
<a href="#">
电视
<ion-icon name="chevron-forward-outline"></ion-icon>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="./img/26.webp" alt="">
<span>小米电视</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/26.webp" alt="">
<span>小米电视</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/26.webp" alt="">
<span>小米电视</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/26.webp" alt="">
<span>小米电视</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</a>
</li>
<li>
<a href="#">
笔记本 平板
<ion-icon name="chevron-forward-outline"></ion-icon>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="./img/27.webp" alt="">
<span>小米电脑</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/27.webp" alt="">
<span>小米电脑</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/27.webp" alt="">
<span>小米电脑</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/27.webp" alt="">
<span>小米电脑</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</a>
</li>
<li>
<a href="#">
出行 穿戴
<ion-icon name="chevron-forward-outline"></ion-icon>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="./img/28.jpg" alt="">
<span>小米平衡车</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/28.jpg" alt="">
<span>小米平衡车</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/28.jpg" alt="">
<span>小米平衡车</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/28.jpg" alt="">
<span>小米平衡车</span>
</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</a>
</li>
<li>
<a href="#">
耳机 音响
<ion-icon name="chevron-forward-outline"></ion-icon>
<div class="slide-list"></div>
</a>
</li>
<li>
<a href="#">
家电
<ion-icon name="chevron-forward-outline"></ion-icon>
<div class="slide-list"></div>
</a>
</li>
<li>
<a href="#">
智能 路由器
<ion-icon name="chevron-forward-outline"></ion-icon>
<div class="slide-list"></div>
</a>
</li>
<li>
<a href="#">
电源 配件
<ion-icon name="chevron-forward-outline"></ion-icon>
<div class="slide-list"></div>
</a>
</li>
<li>
<a href="#">
健康 儿童
<ion-icon name="chevron-forward-outline"></ion-icon>
<div class="slide-list"></div>
</a>
</li>
<li>
<a href="#">
生活 箱包
<ion-icon name="chevron-forward-outline"></ion-icon>
<div class="slide-list"></div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 下方广告栏 -->
<div class="adv">
<div class="wrap">
<div class="adv-aside">
<ul>
<li class="row colln">
<a href="#">
<img src="./img/a.png" alt="">
<p>保障服务</p>
</a>
</li>
<li class="row colln">
<a href="#">
<img src="./img/d.png" alt="">
<p>企业团购</p>
</a>
</li>
<li class="row">
<a href="#">
<img src="./img/e.png" alt="">
<p>F码通道</p>
</a>
</li>
<li class="colln">
<a href="#">
<img src="./img/b.png" alt="">
<p>米粉卡</p>
</a>
</li>
<li class="colln">
<a href="#">
<img src="./img/c.png" alt="">
<p>以旧换新</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/f.png" alt="">
<p>话费充值</p>
</a>
</li>
</ul>
</div>
<div class="adv-img"><a href="#"><img src="./img/4.jpg" alt=""></a></div>
<div class="adv-img"><a href="#"><img src="./img/5.jpg" alt=""></a></div>
<div class="adv-img"><a href="#"><img src="./img/6.jpg" alt=""></a></div>
</div>
</div>
<!-- 侧边栏 -->
<div class="homtop">
<a href="#">
<div class="homtop-img1">
</div>
<span>手机APP</span>
<div class="homtop-sanjiao"></div>
<div class="homtop-libao">
<img src="./img/7.png" alt="">
<span> 扫码领取新人百元礼包</span>
</div>
</a>
<a href="#">
<div class="homtop-img2"></div>
<span>个人中心</span>
</a>
<a href="#">
<div class="homtop-img3"></div>
<span>售后服务</span>
</a>
<a href="#">
<div class="homtop-img4"></div>
<span>人工客服</span>
</a>
<a href="#">
<div class="homtop-img5"></div>
<span>购物车</span>
</a>
</div>
<!-- js部分 -->
<script src="../小米(插件轮播图)/swiper/swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper', {
effect: 'fade',
loop: true, // 循环模式选项
autoplay:true,//自动循环
mousewheel: true,//鼠标滑轮滚动开启
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,//点击定位
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
</body>
</html>CSS
body{
min-width: 1226px;
}
/* 小米头部 */
.header{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333;
color: #b0b0b0;
font-size: 12px;
text-align: center;
}
.header a{
color: #b0b0b0;
}
.header a:hover{
color: #ffffff;
}
.wrap{
width: 1226px;
margin: 0 auto;
}
.header-left{
float: left;
}
.header-right{
float:right;
}
.header li{
float: left;
position: relative;
}
.header span{
color: #424242;
margin: 0 3.6px ;
}
.cart{
width: 120px;
height: 40px;
margin-left: 25px;
background-color: #424242;
position: relative;
}
.cart ion-icon{
margin-bottom: -3px;
font-size: 17px;
font-weight: 900px;
}
.cart:hover{
background-color: #ffffff;
}
.cart:hover a{
color: #ff6700;
}
/* 购物车下拉 */
.cart-list{
/* 吧下拉框放在左边 */
position: absolute;
right: 0px;
width: 316px;
height: 100px;
box-shadow: 0px 2px 2px #ccc;
background-color: white;
display: none;
/* 给下拉里面的文字设置样式 */
color: #424242;
line-height: 100px;
/* 设置最高层级 */
z-index: 999;
}
.cart:hover .cart-list{
display: block;
}
.download img{
width: 90px;
margin: 20px 0px 12px;
}
.download p{
color: #333;
font-size: 14px;
line-height: 1px;
}
/* 下载app下拉 */
.download{
position: absolute;
left: 50%;
margin-left: -62px;
width: 124px;
height: 148px;
background-color: #fff;
box-shadow: 0 1px 5px #ccc;
display: none;
/* 设置最高层级 */
z-index: 999;
}
li:hover>.download{
display: block;
}
/* 绘制下载下拉上面的小小三角形 */
.triangle{
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;
}
li:hover>.triangle{
display: block;
}
/* 小米导航 */
.nav{
width: 100%;
height: 100px;
background-color: #fff;
position: relative;
text-align: center;
}
.logo{
width: 62px;
height: 56px;
float: left;
margin-top: 22px;
text-align: left;
}
.search{
width: 296px;
height: 50px;
float: left;
margin-top: 25px;
position: relative;
}
.nav-bar{
width: 868px;
height: 100px;
float: left;
padding-left: 172px;
/* 把盒子转换成怪异盒模型 */
box-sizing: border-box;
}
.logo img{
width: 56px;
}
.nav-bar>ul>li{
height: 100px;
float: left;
padding: 38px 10px;
/* 转换成怪异盒模型 */
box-sizing: border-box;
}
.nav-bar>ul>li:hover>a{
color: #ff6700;
}
.search>input{
width: 240px;
height: 50px;
border: 1px solid #e0e0e0;
border-right: none;
padding: 0 10px;
/* 转换为怪异盒模型 */
box-sizing: border-box;
float: left;
/* 去掉输入框点击之后边框样式 */
outline: none;
}
.search>a{
width: 50px;
height: 50px;
float: left;
border: 1px solid #e0e0e0;
/* 转换为怪异盒模型 */
box-sizing: border-box;
font-size: 20px;
color: #616161;
line-height: 50px;
}
.search>a:hover{
background-color: #ff6700;
color: white;
border: #ff6700;
}
/* 鼠标悬停上去之后使输入框和他的兄弟元素a一起改变边框颜色 */
.search>input:hover,.search>input:hover+a{
border-color: #b0b0b0;
}
/* 输入框获取焦点然后改变输入框与他兄弟的边框颜色 */
.search>input:focus,.search>input:focus+a{
display: block;
border-color: #ff6700;
}
.nav-bar-list{
width: 100%;
height: 229px;
background-color: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 0 3px 4px rgb(0, 0, 0);
position: absolute;
left: 0;
top: 100px;
display: none;
z-index: 998;
}
.nav-bar li:hover>.nav-bar-list{
display: block;
}
.nav-bar-list li{
float: left;
width: 204px;
padding-top: 35px;
}
.img-box{
width: 100%;
height: 110px;
border-right: 1px solid #e0e0e0;
margin-bottom: 16px;
}
.nav-bar-list p:nth-child(3){
font-size: 12px;
margin-top: 5px;
color: #ff6700;
}
.wu>a>div{
border-right:none;
}
/* 搜索框下拉列表 */
.search-list{
width: 241px;
height: 241px;
border: 1px solid #ff6700;
background-color: white;
border-top: none;
box-sizing: border-box;
position: absolute;
top: 50px;
display: none;
z-index: 900;
}
.search>input:focus~.search-list{
display: block;
}
.search-list a{
width: 238px;
height: 30px;
padding: 6px 15px;
display: block;
box-sizing: border-box;
color: #424242;
font-size: 12px;
text-align: left;
line-height: 20px;
z-index: 999;
}
.search-list>ul>li:hover{
background-color: #ccc;
}
/* 主体 */
.banner{
width: 100%;
height: 460px;
text-align: center;
background-color: #fff;
}
/* 轮播图 */
.swiper {
width: 1226px;
height: 466px;
position: relative;
--swiper-pagination-color: #fff;
--swiper-navigation-color: #ccc;
--swiper-navigation-size: 25px;
z-index: 0;
}
.swiper img{
width: 1226px;
}
.swiper .swiper-pagination{
padding-left: 560px;
padding-bottom: 15px;
}
.swiper .swiper-button-prev{
position: absolute;
left: 249px;
}
.banner>.wrap{
position: relative;
}
/* 侧边栏 */
.slide{
width: 234px;
height: 420px;
background-color: rgba(105, 101, 101, .5);
position: absolute;
padding: 20px 0;
left: 0px;
top: 0px;
z-index: 990;
}
.slide>ul>li{
height: 42px;
line-height: 42px;
text-align: left;
padding-left: 30px;
}
.slide>ul>li:hover{
background-color: #ff6700;
}
.slide>ul>li>a{
color: #fff;
font-size: 14px;
}
.slide ion-icon{
color: #ccc;
font-weight:bold;
font-size: 20px;
margin-right: 18px;
margin-top: 10px;
float:right;
}
/* 侧边栏的侧边框 */
.slide-list{
width: 992px;
height: 458px;
background-color: white;
border: 1px solid #e0e0e0;
border-left: none;
box-shadow: 0 8px 16px rgba(0,0,0,.18);
position: absolute;
top: 0;
left: 234px;
/* padding: 2px; */
display: none;
z-index: 800;
}
.slide li:hover .slide-list{
display: block;
}
.slide-list>ul{
width: 248px;
float: left;
}
.slide-list li{
width: 100%;
height: 76px;
padding: 18px 0 18px 20px;
box-sizing: border-box;
}
.slide-list img{
float: left;
margin-right: 12px;
}
.slide-list span{
float: left;
width: 172px;
line-height: 40px;
}
.slide-list li:hover span{
color: #ff6700;
}
/* 下方广告部分 */
.adv{
width: 100%;
height: 170px;
margin: 14px 0 26px;
}
.adv-aside{
width: 234px;
height: 170px;
padding: 3px;
box-sizing: border-box;
background-color: #5f5750;
float: left;
}
.adv-img{
width: 316px;
height: 170px;
float: left;
margin-left: 14.6px;
}
.adv-img img{
width: 316px;
}
.adv-img:hover{
box-shadow: 0 15px 30px rgba(0,0,0,.4);
}
.adv-aside img{
display: block;
width: 24px;
height: 24px;
margin: 0 auto 4px;
padding: 18px 0px 5px 0px;
}
.adv-aside li{
width: 76px;
height: 82px;
float: left;
text-align: center;
position: relative;
}
.adv-aside a{
width: 70px;
height: 64px;
color: #fff;
font-size: 12px;
/* 设置a标签透明度为0.7 */
opacity: .7;
display: block;
}
/* 鼠标悬浮之后a标签透明度为1 */
.adv-aside li:hover>a{
opacity: 1;
}
/* 下面横线 */
.row::after{
position: absolute;
bottom: 0;
left: 6px;
/* 插入的内容 */
content: "";
height: 1px;
width: 64px;
background-color: #665e57;
}
/* 右边竖线 */
.colln::before{
position: absolute;
top: 6px;
right: 0;
/* 插入的内容 */
content: "";
width: 1px;
height: 70px;
background-color:#665e57;
}
/* 侧边栏 */
.homtop{
width: 84px;
height: 455px;
text-align: center;
position: fixed;
bottom: 70px;
right: 0;
}
.homtop a{
position: relative;
display: block;
width: 82px;
height: 90px;
margin-top: -1px;
background-color: #fff;
border: 1px solid #f5f5f5;
text-align: center;
}
.homtop div:not(.homtop-sanjiao,.homtop-libao){
position: relative;
width: 30px;
height: 30px;
margin: 0 auto 8px;
margin-top: 18px;
}
/* 手机APP */
.homtop-img1{
background-image: url(../img/sj.png);
background-size: cover;
}
.homtop a:hover>.homtop-img1{
background-image: url(../img/sj2.png);
background-size: cover;
}
/* 个人中心 */
.homtop-img2{
background-image: url(../img/gr.png);
background-size: cover;
}
.homtop a:hover>.homtop-img2{
background-image: url(../img/gr2.png);
background-size: cover;
}
/* 售后服务 */
.homtop-img3{
background-image: url(../img/wx.png);
background-size: cover;
}
.homtop a:hover>.homtop-img3{
background-image: url(../img/wx2.png);
background-size: cover;
}
/* 人工客服 */
.homtop-img4{
background-image: url(../img/kf.png);
background-size: cover;
}
.homtop a:hover>.homtop-img4{
background-image: url(../img/kf2.png);
background-size: cover;
}
/* 购物车 */
.homtop-img5{
background-image: url(../img/gwc.png);
background-size: cover;
}
.homtop a:hover>.homtop-img5{
background-image: url(../img/gwc2.png);
background-size: cover;
}
/* 文字变色 */
.homtop a:hover>span{
color: #ff6700;
}
.homtop-libao img{
display: block;
width: 100px;
height: 100px;
margin: 6px auto;
}
.homtop-libao span{
display: block;
width: 82px;
margin: 14px auto 0;
color: #757575;
text-align: center;
}
.homtop-sanjiao{
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #f5f5f5;
position: absolute;
bottom: 50%;
right: 90px;
display: none;
}
.homtop-libao{
position: absolute;
top: 0px;
right: 98px;
width: 120px;
height: 150px;
padding: 14px;
background: #fff;
border: 1px solid #f5f5f5;
display: none;
}
.homtop a:hover>.homtop-sanjiao,.homtop a:hover>.homtop-libao{
display: block;
}
版权声明：本文标题：小米官网（汇总） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726414225a1069611.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论