admin管理员组文章数量:1530517
❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：
文章目录
- 导航栏
- logo菜单部分
- 子菜单部分
- 右侧栏（fixed）
- 轮播图部分
- 小米页面
导航栏
<!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>Document</title>
<style type="text/less">
*{
Xbackground-color: rgba(0,0,0,0.1);
Xbox-shadow:inset 0 0 1px red;
}
body{
margin: 0;
overflow-y:scroll;
font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
/* .top-banner a{
display: block;
background-image: url(https://travel.12306/imgs/resources/uploadfiles/images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
background-position:center;
background-repeat: no-repeat;
min-width: 1226px;
background-size: auto 120px;
height: 120px;
}*/
a{
text-decoration: none;
}
.site-topbar{
height: 40px;
background-color: #333;
min-width: 1226px;
.site-topbar-inner{
width: 1226px;
margin :auto;
a{
font-size: 12px;
color:#b0b0b0;
line-height: 40px;
/*内部是块元素，就会打满，外部是行内元素*/
display: inline-block;
&:hover{
color:#fff;
}
}
span{
font-size: 12px;
color:#424242;
margin:0 .3em;
}
.site-topbar-right-card{
float:right;
.shopping-cart{
float:right;
margin-left: 25px;
background-color: #424242;
text-align:center;
position:relative;
&:hover .shopping-cart-link{
color: #ff6700;
background-color: white;
}
.shopping-cart-link{
width: 90px;
padding:0 15px;
position: relative;
z-index: 8;
}
.shopping-cart-detail{
height: 0;
position:absolute;
top:100%;
right:0;
width: 216px;
background-color: rgb(240, 237, 237);
box-shadow:0 2 10px #766f6f;
}
&:hover .shopping-cart-detail{
height: 100px;
transition: .6s;
}
}
}
}
}
</style>
</head>
<body>
<!-- <div class="top-banner">
<a href=""></a>
</div> -->
<div class="site-topbar">
<div class="site-topbar-inner">
<a href="#">小米官网</a>
<span class="sep">|</span> <a href="#">小米商城</a>
<span class="sep">|</span> <a href="#">MIUI</a>
<span class="sep">|</span> <a href="#">IoT</a>
<span class="sep">|</span> <a href="#">云服务</a>
<span class="sep">|</span> <a href="#">天星数科</a>
<span class="sep">|</span> <a href="#">有品</a>
<span class="sep">|</span> <a href="#">小爱开放平台</a>
<span class="sep">|</span> <a href="#">企业团购</a>
<span class="sep">|</span> <a href="#">资质证照</a>
<span class="sep">|</span> <a href="#">协议规则</a>
<span class="sep">|</span> <a href="#">下载app</a>
<span class="sep">|</span> <a href="#">Select Location</a>
<div class="site-topbar-right-card">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
<span>|</span>
<a href="#">消息通知</a>
<div class="shopping-cart">
<a href="#" class="shopping-cart-link">购物车（0）</a>
<div class="shopping-cart-detail">
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr/npm/less"></script>
</html>
logo菜单部分
<!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>Document</title>
<style type="text/less">
*{
xbackground-color: rgba(0,0,0,0.1);
xbox-shadow:inset 0 0 1px red;
outline: none;
}
body{
margin: 0;
overflow-y:scroll;
font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
/* .top-banner a{
display: block;
background-image: url(https://travel.12306/imgs/resources/uploadfiles/images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
background-position:center;
background-repeat: no-repeat;
min-width: 1226px;
background-size: auto 120px;
height: 120px;
}*/
a{
text-decoration: none;
}
.site-topbar{
height: 40px;
background-color: #333;
min-width: 1226px;
.site-topbar-inner{
width: 1226px;
margin :auto;
a{
font-size: 12px;
color:#b0b0b0;
line-height: 40px;
/*内部是块元素，就会打满，外部是行内元素*/
display: inline-block;
&:hover{
color:#fff;
}
}
span{
font-size: 12px;
color:#424242;
margin:0 .3em;
}
.site-topbar-right-card{
float:right;
.shopping-cart{
float:right;
margin-left: 25px;
background-color: #424242;
text-align:center;
position:relative;
&:hover .shopping-cart-link{
color: #ff6700;
background-color: white;
}
.shopping-cart-link{
width: 90px;
padding:0 15px;
position: relative;
z-index: 8;
}
.shopping-cart-detail{
height: 0;
position:absolute;
top:100%;
right:0;
width: 216px;
background-color: rgb(240, 237, 237);
box-shadow:0 2 10px #766f6f;
}
&:hover .shopping-cart-detail{
height: 100px;
transition: .6s;
}
}
}
}
}
.site-topnav{
width: 1226px;
margin:auto;
height: 100px;
.logo-link{
display: inline-block;
float:left;
width: 50px;
height: 50px;
margin:25px 0;
}
.site-topnav-list{
display: inline-block;
margin-left:100px;
li{
float:left;
a{
display: inline-block;
padding: 0 10px;
height: 100px;
line-height: 100px;
}
}
}
.site-topnav-search{
display: inline-flex;
position: relative;
margin:25px 0;
float:right;
&:hover{
input,button{
border-color :#b0b0b0;
}
}
input{
box-sizing:border-box;
height: 50px;
width: 245px;
border:1px solid #e0e0e0;
border-right:none;
&:focus{
border-color:#ff6700;
+ button{
border-color: #ff6700;
}
~ .suggestions{
display: block;
}
}
}
button{
width: 50px;
height: 50px;
border-color: #e0e0e0;
&:hover{
background-color: #ff6700;
border-color:ff6700;
}
}
.suggestions{
display: none;
position: absolute;
top: 100%;
left:0;
border:1px solid #ff6700;
width: 246px;
height: 300px;
box-sizing:border-box;
border-top:none;
}
}
}
</style>
</head>
<body>
<!-- <div class="top-banner">
<a href=""></a>
</div> -->
<div class="site-topbar">
<div class="site-topbar-inner">
<a href="#">小米官网</a>
<span class="sep">|</span> <a href="#">小米商城</a>
<span class="sep">|</span> <a href="#">MIUI</a>
<span class="sep">|</span> <a href="#">IoT</a>
<span class="sep">|</span> <a href="#">云服务</a>
<span class="sep">|</span> <a href="#">天星数科</a>
<span class="sep">|</span> <a href="#">有品</a>
<span class="sep">|</span> <a href="#">小爱开放平台</a>
<span class="sep">|</span> <a href="#">企业团购</a>
<span class="sep">|</span> <a href="#">资质证照</a>
<span class="sep">|</span> <a href="#">协议规则</a>
<span class="sep">|</span> <a href="#">下载app</a>
<span class="sep">|</span> <a href="#">Select Location</a>
<div class="site-topbar-right-card">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
<span>|</span>
<a href="#">消息通知</a>
<div class="shopping-cart">
<a href="#" class="shopping-cart-link">购物车（0）</a>
<div class="shopping-cart-detail">
</div>
</div>
</div>
</div>
</div>
<div class="site-topnav">
<img class="logo-link" src="https://cdnbj1.fds.api.mi-img/mi-assets/shop/img/logo-mi2.png" alt="">
<ul class="site-topnav-list">
<li>
<a href="#">Xiaomi手机</a>
</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>
<form class="site-topnav-search" action="">
<input autocomplete="off" type="text">
<button>search</button>
<ul class="suggestions">
<li><a href="#"></a></li>
</ul>
</form>
</div>
</body>
<script src=" https://cdn.jsdelivr/npm/less"></script>
</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>Document</title>
<style type="text/less">
*{
background-color: rgba(0,0,0,0.1);
box-shadow:inset 0 0 1px red;
outline: none;
}
body{
margin: 0;
overflow-y:scroll;
font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
/* .top-banner a{
display: block;
background-image: url(https://travel.12306/imgs/resources/uploadfiles/images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
background-position:center;
background-repeat: no-repeat;
min-width: 1226px;
background-size: auto 120px;
height: 120px;
}*/
a{
text-decoration: none;
}
.site-topbar{
height: 40px;
background-color: #333;
min-width: 1226px;
.site-topbar-inner{
width: 1226px;
margin :auto;
a{
font-size: 12px;
color:#b0b0b0;
line-height: 40px;
/*内部是块元素，就会打满，外部是行内元素*/
display: inline-block;
&:hover{
color:#fff;
}
}
span{
font-size: 12px;
color:#424242;
margin:0 .3em;
}
.site-topbar-right-card{
float:right;
.shopping-cart{
float:right;
margin-left: 25px;
background-color: #424242;
text-align:center;
position:relative;
&:hover .shopping-cart-link{
color: #ff6700;
background-color: white;
}
.shopping-cart-link{
width: 90px;
padding:0 15px;
position: relative;
z-index: 8;
}
.shopping-cart-detail{
height: 0;
position:absolute;
top:100%;
right:0;
width: 216px;
background-color: rgb(240, 237, 237);
box-shadow:0 2 10px #766f6f;
}
&:hover .shopping-cart-detail{
height: 100px;
transition: .6s;
}
}
}
}
}
.top-nav{
display: flex;
height: 100px;
width: 1226px;
margin:auto;
align-items: center;
.logo{
margin-right: 200px;
img{
width: 50px;
height: 50px;
}
}
.product-category{
display: flex;
> li{
font-size: 14px;
padding: 0 10px;
height: 100px;
line-height : 100px;
.product-submenu-wrapper{
background-color: white;
position: absolute;
left:0 ;
width: 100%;
overflow:hidden;
height: 0;
z-index: 555;
/*鼠标拿开时候，让z-index延迟一秒变化*/
transition: 1s height,0s 1s z-index;
ul{
display: flex;
width: 1226px;
margin :auto;
li{
width: calc(1226px / 6);
height: 230px;
}
}
}
&:hover .product-submenu-wrapper{
z-index: 888;
transition: 1s height,0s z-index;
}
}
&:hover >li .product-submenu-wrapper{
height: 230px;
transition: 1s height,0s z-index;
}
}
.search-form{
display: flex;
margin-left: auto;
position: relative;
&:hover{
button,input{
border-color : #b0b0b0;
}
}
&:focus-within{
input,button{
border-color: #ff6700;
}
}
input{
width: 245px;
height: 50px;
box-sizing:border-box;
border: 1px solid #e0e0e0;
border-right: none;
font-size: 16px;
outline:none;
}
button{
width: 50px;
height: 50px;
border: 1px solid #e0e0e0;
font-size : 2em;
display: flex;
.icon{
margin:auto;
}
&:hover{
background-color: #ff6700;
border-color:#ff6700;
color: white;
cursor: pointer;
}
}
.suggestions{
position: absolute;
display: none;
left:0;
top:100%;
}
input:focus ~ .suggestions{
display: block;
}
}
}
</style>
</head>
<body>
<!-- <div class="top-banner">
<a href=""></a>
</div> -->
<div class="site-topbar">
<div class="site-topbar-inner">
<a href="#">小米官网</a>
<span class="sep">|</span> <a href="#">小米商城</a>
<span class="sep">|</span> <a href="#">MIUI</a>
<span class="sep">|</span> <a href="#">IoT</a>
<span class="sep">|</span> <a href="#">云服务</a>
<span class="sep">|</span> <a href="#">天星数科</a>
<span class="sep">|</span> <a href="#">有品</a>
<span class="sep">|</span> <a href="#">小爱开放平台</a>
<span class="sep">|</span> <a href="#">企业团购</a>
<span class="sep">|</span> <a href="#">资质证照</a>
<span class="sep">|</span> <a href="#">协议规则</a>
<span class="sep">|</span> <a href="#">下载app</a>
<span class="sep">|</span> <a href="#">Select Location</a>
<div class="site-topbar-right-card">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
<span>|</span>
<a href="#">消息通知</a>
<div class="shopping-cart">
<a href="#" class="shopping-cart-link">购物车（0）</a>
<div class="shopping-cart-detail">
</div>
</div>
</div>
</div>
</div>
<div class="top-nav">
<div class="logo">
<a href="/">
<img src="https://cdnbj1.fds.api.mi-img/mi-assets/shop/img/logo-mi2.png" alt="">
</a>
</div>
<ul class="product-category">
<li>Xiaomi手机
<div class="product-submenu-wrapper">
<ul class="product-submenu">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
</li>
<li>Redmi手机
<div class="product-submenu-wrapper">
<ul class="product-submenu">
<li>fff</li>
<li>eee</li>
<li>ddd</li>
<li>ccc</li>
<li>bbb</li>
<li>aaa</li>
</ul>
</div>
</li>
</ul>
<ul class="product-category">
<li>电视</li>
<li>笔记本</li>
<li>平板</li>
<li>家电</li>
<li>路由器</li>
<li>服务中心</li>
<li>社区</li>
</ul>
<form class="search-form" action="">
<input type="text">
<button><span class="icon icon.search"></span></button>
<ul class="suggestions">
<li>小米12</li>
<li>小米12</li>
<li>小米12</li>
<li>小米12</li>
<li>小米12</li>
</ul>
</form>
</div>
</body>
<script src=" https://cdn.jsdelivr/npm/less"></script>
</html>
右侧栏（fixed）
<!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>Document</title>
<style type="text/less">
*{
background-color: rgba(0,0,0,0.1);
box-shadow:inset 0 0 1px red;
outline: none;
}
body{
margin: 0;
overflow-y:scroll;
font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
/* .top-banner a{
display: block;
background-image: url(https://travel.12306/imgs/resources/uploadfiles/images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
background-position:center;
background-repeat: no-repeat;
min-width: 1226px;
background-size: auto 120px;
height: 120px;
}*/
a{
text-decoration: none;
}
.site-topbar{
height: 40px;
background-color: #333;
min-width: 1226px;
.site-topbar-inner{
width: 1226px;
margin :auto;
a{
font-size: 12px;
color:#b0b0b0;
line-height: 40px;
/*内部是块元素，就会打满，外部是行内元素*/
display: inline-block;
&:hover{
color:#fff;
}
}
span{
font-size: 12px;
color:#424242;
margin:0 .3em;
}
.site-topbar-right-card{
float:right;
.shopping-cart{
float:right;
margin-left: 25px;
background-color: #424242;
text-align:center;
position:relative;
&:hover .shopping-cart-link{
color: #ff6700;
background-color: white;
}
.shopping-cart-link{
width: 90px;
padding:0 15px;
position: relative;
z-index: 8;
}
.shopping-cart-detail{
height: 0;
position:absolute;
top:100%;
right:0;
width: 216px;
background-color: rgb(240, 237, 237);
box-shadow:0 2 10px #766f6f;
}
&:hover .shopping-cart-detail{
height: 100px;
transition: .6s;
}
}
}
}
}
.top-nav{
display: flex;
height: 100px;
width: 1226px;
margin:auto;
align-items: center;
.logo{
margin-right: 200px;
img{
width: 50px;
height: 50px;
}
}
.product-category{
display: flex;
> li{
font-size: 14px;
padding: 0 10px;
height: 100px;
line-height : 100px;
.product-submenu-wrapper{
background-color: white;
position: absolute;
left:0 ;
width: 100%;
overflow:hidden;
height: 0;
z-index: 555;
/*鼠标拿开时候，让z-index延迟一秒变化*/
transition: 1s height,0s 1s z-index;
ul{
display: flex;
width: 1226px;
margin :auto;
li{
width: calc(1226px / 6);
height: 230px;
}
}
}
&:hover .product-submenu-wrapper{
z-index: 888;
transition: 1s height,0s z-index;
}
}
&:hover >li .product-submenu-wrapper{
height: 230px;
transition: 1s height,0s z-index;
}
}
.search-form{
display: flex;
margin-left: auto;
position: relative;
&:hover{
button,input{
border-color : #b0b0b0;
}
}
&:focus-within{
input,button{
border-color: #ff6700;
}
}
input{
width: 245px;
height: 50px;
box-sizing:border-box;
border: 1px solid #e0e0e0;
border-right: none;
font-size: 16px;
outline:none;
}
button{
width: 50px;
height: 50px;
border: 1px solid #e0e0e0;
font-size : 2em;
display: flex;
.icon{
margin:auto;
}
&:hover{
background-color: #ff6700;
border-color:#ff6700;
color: white;
cursor: pointer;
}
}
.suggestions{
position: absolute;
display: none;
left:0;
top:100%;
}
input:focus ~ .suggestions{
display: block;
}
}
}
.fixed-sidebar{
position: fixed;
right:0;
bottom:70px;
@media (max-width:1460px) {
left:50%;
margin-left: calc(1226px / 2);
right:auto;
}
ul{
li{
height:70px;
.icon-text{
@media (max-width:1460px) {
display:none;
}
}
.icon{
display: block;
font-size: 16px;
@media(max-width:1460px){
font-size : 12px;
}
}
}
}
}
</style>
</head>
<body>
<!-- <div class="top-banner">
<a href=""></a>
</div> -->
<div class="site-topbar">
<div class="site-topbar-inner">
<a href="#">小米官网</a>
<span class="sep">|</span> <a href="#">小米商城</a>
<span class="sep">|</span> <a href="#">MIUI</a>
<span class="sep">|</span> <a href="#">IoT</a>
<span class="sep">|</span> <a href="#">云服务</a>
<span class="sep">|</span> <a href="#">天星数科</a>
<span class="sep">|</span> <a href="#">有品</a>
<span class="sep">|</span> <a href="#">小爱开放平台</a>
<span class="sep">|</span> <a href="#">企业团购</a>
<span class="sep">|</span> <a href="#">资质证照</a>
<span class="sep">|</span> <a href="#">协议规则</a>
<span class="sep">|</span> <a href="#">下载app</a>
<span class="sep">|</span> <a href="#">Select Location</a>
<div class="site-topbar-right-card">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
<span>|</span>
<a href="#">消息通知</a>
<div class="shopping-cart">
<a href="#" class="shopping-cart-link">购物车（0）</a>
<div class="shopping-cart-detail">
</div>
</div>
</div>
</div>
</div>
<div class="top-nav">
<div class="logo">
<a href="/">
<img src="https://cdnbj1.fds.api.mi-img/mi-assets/shop/img/logo-mi2.png" alt="">
</a>
</div>
<ul class="product-category">
<li>Xiaomi手机
<div class="product-submenu-wrapper">
<ul class="product-submenu">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
</li>
<li>Redmi手机
<div class="product-submenu-wrapper">
<ul class="product-submenu">
<li>fff</li>
<li>eee</li>
<li>ddd</li>
<li>ccc</li>
<li>bbb</li>
<li>aaa</li>
</ul>
</div>
</li>
</ul>
<ul class="product-category">
<li>电视</li>
<li>笔记本</li>
<li>平板</li>
<li>家电</li>
<li>路由器</li>
<li>服务中心</li>
<li>社区</li>
</ul>
<form class="search-form" action="">
<input type="text">
<button><span class="icon icon.search"></span></button>
<ul class="suggestions">
<li>小米12</li>
<li>小米12</li>
<li>小米12</li>
<li>小米12</li>
<li>小米12</li>
</ul>
</form>
</div>
<div class="fixed-sidebar">
<ul>
<li><span class="icon icon-shopping-cart">lmp</span>
<span class="icon-text">手机app</span>
</li>
<li><span class="icon icon-shopping-cart">lmp</span>
<span class="icon-text">个人中心</span>
</li>
<li><span class="icon icon-shopping-cart">lmp</span>
<span class="icon-text">售后服务</span>
</li>
<li><span class="icon icon-shopping-cart">lmp</span>
<span class="icon-text">人工客服</span>
</li>
<li><span class="icon icon-shopping-cart">lmp</span>
<span class="icon-text">购物车</span>
</li>
</ul>
</div>
</body>
<script src=" https://cdn.jsdelivr/npm/less"></script>
</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>Document</title>
<style type="text/less">
*{
background-color: rgba(0,0,0,0.1);
box-shadow:inset 0 0 1px red;
outline: none;
}
body{
margin: 0;
overflow-y:scroll;
font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
/* .top-banner a{
display: block;
background-image: url(https://travel.12306/imgs/resources/uploadfiles/images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
background-position:center;
background-repeat: no-repeat;
min-width: 1226px;
background-size: auto 120px;
height: 120px;
}*/
a{
text-decoration: none;
}
.site-topbar{
height: 40px;
background-color: #333;
min-width: 1226px;
.site-topbar-inner{
width: 1226px;
margin :auto;
a{
font-size: 12px;
color:#b0b0b0;
line-height: 40px;
/*内部是块元素，就会打满，外部是行内元素*/
display: inline-block;
&:hover{
color:#fff;
}
}
span{
font-size: 12px;
color:#424242;
margin:0 .3em;
}
.site-topbar-right-card{
float:right;
.shopping-cart{
float:right;
margin-left: 25px;
background-color: #424242;
text-align:center;
position:relative;
&:hover .shopping-cart-link{
color: #ff6700;
background-color: white;
}
.shopping-cart-link{
width: 90px;
padding:0 15px;
position: relative;
z-index: 8;
}
.shopping-cart-detail{
height: 0;
position:absolute;
top:100%;
right:0;
width: 216px;
background-color: rgb(240, 237, 237);
box-shadow:0 2 10px #766f6f;
}
&:hover .shopping-cart-detail{
height: 100px;
transition: .6s;
}
}
}
}
}
.top-nav{
display: flex;
height: 100px;
width: 1226px;
margin:auto;
align-items: center;
.logo{
margin-right: 200px;
img{
width: 50px;
height: 50px;
}
}
.product-category{
display: flex;
> li{
font-size: 14px;
padding: 0 10px;
height: 100px;
line-height : 100px;
.product-submenu-wrapper{
background-color: white;
position: absolute;
left:0 ;
width: 100%;
overflow:hidden;
height: 0;
z-index: 555;
/*鼠标拿开时候，让z-index延迟一秒变化*/
transition: 1s height,0s 1s z-index;
ul{
display: flex;
width: 1226px;
margin :auto;
li{
width: calc(1226px / 6);
height: 230px;
}
}
}
&:hover .product-submenu-wrapper{
z-index: 888;
transition: 1s height,0s z-index;
}
}
&:hover >li .product-submenu-wrapper{
height: 230px;
transition: 1s height,0s z-index;
}
}
.search-form{
display: flex;
margin-left: auto;
position: relative;
&:hover{
button,input{
border-color : #b0b0b0;
}
}
&:focus-within{
input,button{
border-color: #ff6700;
}
}
input{
width: 245px;
height: 50px;
box-sizing:border-box;
border: 1px solid #e0e0e0;
border-right: none;
font-size: 16px;
outline:none;
}
button{
width: 50px;
height: 50px;
border: 1px solid #e0e0e0;
font-size : 2em;
display: flex;
.icon{
margin:auto;
}
&:hover{
background-color: #ff6700;
border-color:#ff6700;
color: white;
cursor: pointer;
}
}
.suggestions{
position: absolute;
display: none;
left:0;
top:100%;
}
input:focus ~ .suggestions{
display: block;
}
}
}
.hero{
height: 460px;
width: 1226px;
margin: auto;
position:relative;
ul.product-menu{
position:absolute;
background-color: rgba(0,0,0,0.5);
height: 100%;
box-sizing :border-box;
width: 235px;
padding:20px 0;
> li{
color:white;
height: 42px;
line-height: 42px;
padding-left:30px;
padding-right:20px;
&::after{
content:'>';
float:right;
}
&:hover .product-menu-sub{
display: block;
}
.product-menu-sub{
display: none;
position: absolute;
height: 460px;
left:100% ;
top:0;
li{
background-color: white;
height: calc(460px / 6);
width: 248px;
&:nth-child(n+7){
margin-left: 248px;
}
&:nth-child(n+13){
margin-left: 496px;
}
&:nth-child(n+19){
margin-left: 744px;
}
&:nth-child(6n+7){
margin-top: -460px;
}
}
}
}
}
div.slider{
img {
display: block;
width: 1226px;
height: 460px;
}
}
}
.fixed-sidebar{
position: fixed;
right:0;
bottom:70px;
@media (max-width:1460px) {
left:50%;
margin-left: calc(1226px / 2);
right:auto;
}
ul{
li{
height:70px;
.icon-text{
@media (max-width:1460px) {
display:none;
}
}
.icon{
display: block;
font-size: 16px;
@media(max-width:1460px){
font-size : 12px;
}
}
}
}
}
</style>
</head>
<body>
<!-- <div class="top-banner">
<a href=""></a>
</div> -->
<div class="site-topbar">
<div class="site-topbar-inner">
<a href="#">小米官网</a>
<span class="sep">|</span> <a href="#">小米商城</a>
<span class="sep">|</span> <a href="#">MIUI</a>
<span class="sep">|</span> <a href="#">IoT</a>
<span class="sep">|</span> <a href="#">云服务</a>
<span class="sep">|</span> <a href="#">天星数科</a>
<span class="sep">|</span> <a href="#">有品</a>
<span class="sep">|</span> <a href="#">小爱开放平台</a>
<span class="sep">|</span> <a href="#">企业团购</a>
<span class="sep">|</span> <a href="#">资质证照</a>
<span class="sep">|</span> <a href="#">协议规则</a>
<span class="sep">|</span> <a href="#">下载app</a>
<span class="sep">|</span> <a href="#">Select Location</a>
<div class="site-topbar-right-card">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
<span>|</span>
<a href="#">消息通知</a>
<div class="shopping-cart">
<a href="#" class="shopping-cart-link">购物车（0）</a>
<div class="shopping-cart-detail">
</div>
</div>
</div>
</div>
</div>
<div class="top-nav">
<div class="logo">
<a href="/">
<img src="https://cdnbj1.fds.api.mi-img/mi-assets/shop/img/logo-mi2.png" alt="">
</a>
</div>
<ul class="product-category">
<li>Xiaomi手机
<div class="product-submenu-wrapper">
<ul class="product-submenu">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
</li>
<li>Redmi手机
<div class="product-submenu-wrapper">
<ul class="product-submenu">
<li>fff</li>
<li>eee</li>
<li>ddd</li>
<li>ccc</li>
<li>bbb</li>
<li>aaa</li>
</ul>
</div>
</li>
</ul>
<ul class="product-category">
<li>电视</li>
<li>笔记本</li>
<li>平板</li>
<li>家电</li>
<li>路由器</li>
<li>服务中心</li>
<li>社区</li>
</ul>
<form class="search-form" action="">
<input type="text">
<button><span class="icon icon.search"></span></button>
<ul class="suggestions">
<li>小米12</li>
<li>小米12</li>
<li>小米12</li>
<li>小米12</li>
<li>小米12</li>
</ul>
</form>
</div>
<div class="hero">
<ul class="product-menu">
<li>手机
<ul class="product-menu-sub">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>电视
<ul class="product-menu-sub">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>家电
<ul class="product-menu-sub">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>笔记本 平板
<ul class="product-menu-sub">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>出行 穿戴
<ul class="product-menu-sub">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>耳机 音箱
<ul class="product-menu-sub">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>健康 儿童</li>
<li>生活 箱包</li>
<li>智能 路由器</li>
<li>电源 配件</li>
</ul>
<div class="slider">
<img
src="https://cdnbj1.fds.api.mi-img/mi-mall/6d90fda69e63bf93ae62120901bafc0e.jpg?thumb=1&w=1533&h=575&f=webp&q=90"
alt="">
</div>
</div>
<div class="fixed-sidebar">
<ul>
<li><span class="icon icon-shopping-cart">lmp</span>
<span class="icon-text">手机app</span>
</li>
<li><span class="icon icon-shopping-cart">lmp</span>
<span class="icon-text">个人中心</span>
</li>
<li><span class="icon icon-shopping-cart">lmp</span>
<span class="icon-text">售后服务</span>
</li>
<li><span class="icon icon-shopping-cart">lmp</span>
<span class="icon-text">人工客服</span>
</li>
<li><span class="icon icon-shopping-cart">lmp</span>
<span class="icon-text">购物车</span>
</li>
</ul>
</div>
</body>
<script src=" https://cdn.jsdelivr/npm/less"></script>
</html>
小米页面
小米页面
————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章
版权声明：本文标题：【CSS】小米页面 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726414749a1069673.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论