admin管理员组文章数量:1565778
一个简单的仿小米官网
index.css
/* 主页index.html样式表 */
.topbar-wrapper{
width: 100%;
background-color:#333;
height:40px;
line-height:40px;
}
/* 超链接颜色 */
.topbar a{
font-size:12px;
color:#b0b0b0;
display:block;
}
.topbar a:hover{
color:#fff;
}
/* 设置中间分割线 */
.topbar .line{
font-size:12px;
color:#424242;
margin:0 8px;
}
/*左侧导航栏 */
.service{
float:left;
}
.service,.topbar-wrapper li{
float:left;
}
.app{
position: relative;
}
/* 设置app下三角 */
.app::after{
display: none;
content: '';
position: absolute;
width: 0;
height: 0;
/* 设置四个方向边框 */
border: 8px solid transparent;
border-top:none;
border-bottom-color:#FFFFFF;
bottom:0;
left:0;
right:0;
margin:auto;
}
.app:hover .qrcode,
.app:hover::after{
display: block;
height: 148px;
}
/* 设置下载app的下拉 */
.app .qrcode{
/* display: none; */
position: absolute;
width:124px;
/* height: 148px; */
height:0px;
line-height:1;
text-align:center;
background-color:#fff;
box-shadow:0 0 10px rgba(0,0,0,.3);
left:-40px;
overflow: hidden;
/* margin-left:-62px; */
/* 为样式设置过渡效果 */
transition: height .3s;
}
.app .qrcode img{
width:90px;
margin:17px;
margin-bottom:10px;
}
.app .qrcode span{
font-size:14px;
}
/* 右侧导航栏 */
.shop-cart,.user-info{
float:right;
}
.shop-cart{
margin-left:26px;
background-color: #EEEEEE;
}
.shop-cart a{
width: 120px;
background-color:#424242;
text-align:center;
}
.shop-cart:hover a{
background-color:#fff;
color:#ff6700;
/* color:red; */
}
.shop-cart i{
padding-right:2px;
}
.shop-qrcode{
position: absolute;
width:316px;
/* line-height:100px; */
height: 0px;
color: #424242;
overflow: hidden;
background-color: #FFFFFF;
box-shadow:0 5px 5px rgb(0,0,0,0.2);
transition: height .3s;
margin-left:-196px;
}
.shop-cart:hover .shop-qrcode,
.shop-cart:hover::after{
display: block;
height: 100px;
line-height: 100px;
}
/* .header-wrapper{
background-color: red;
} */
/* 设置header */
.header{
height: 100px;
/* background-color: #bfa; */
}
.header .logo{
float: left;
margin-top: 22px;
width: 55px;
height:55px;
position: relative;
overflow: hidden;
text-indent: -999px;
}
.header .logo a{
position: absolute;
width: 55px;
height:55px;
left:0;
background-color:#ff6700;
background-image:url(../img/mi-logo.png) ;
background-position: center;
transition: left 0.3s;
}
.header .logo .home{
left:-55px;
background-image:url(../img/mi-home.png) ;
}
.header .logo:hover .mi{
left: 55px;
}
.header .logo:hover .home{
left: 0px;
}
/* 设置导航条 */
.header .nav-wrapper{
float:left;
margin-left: 7px;
}
.header .nav{
/* width: 792px; */
/* background-color: #bfa; */
line-height: 100px;
padding-left: 58px;
}
.nav > li{
float:left;
}
.all-goods-wrapper{
position: relative;
/* background-color: red; */
}
/* 设置左侧导航条 */
.left-menu{
height: 420px;
width: 234px;
padding:20px 0;
background-color: rgba(0,0,0,0.6);
position: absolute;
z-index: 999;
left:-120px;
line-height: 1;
}
ul.left-menu li a{
display: block;
height: 42px;
line-height: 42px;
color: white;
margin-right: 0;
padding: 0 30px;
font-size: 14px;
}
ul.left-menu li a:hover{
color: white;
background-color: #FF6700;
}
.left-menu a i{
float:right;
line-height: 42px;
}
.nav-wrapper li a{
font-size: 16px;
color: #000000;
margin-right: 20px;
display:block;
}
.nav-wrapper li a:hover{
color:#ff6700;
}
/* 隐藏全部商品 */
.all-goods{
visibility: hidden;
}
.nav .goods-info{
background-color: #FFFFFF;
width: 100%;
height:0;
overflow: hidden;
/* border-top:1px solid rgb(224,224,224);
box-shadow:0 5px 5px rgb(0,0,0,.2); */
position: absolute;
top:139px;
left:0;
transition: height 0.3s;
z-index:999;
}
/* .nav li:not(:first-of-type):not(:nth-child(10)):not(:nth-child(9)):hover ~ .goods-info, */
.nav .show-goods:hover ~ .goods-info,
.goods-info:hover{
height:</
版权声明:本文标题:前端学习之仿小米官网HTML+CSS 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726415279a1069734.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论