小米商城html/css

导航条——

 
小米官网
|
小米商城
|
MIUI
|
IoT
|
云服务
|
天星数科
|
有品
|
小爱开放平台
|
企业团购
|
资质证照
|
协议规则
|
下载app
小米商城APP
|
Selec Location
登录
|
注册
|
消息通知
|
购物车(0)购物车中还没有商品，赶紧选购吧!

CSS样式——

/* 头部开始 */
header{width: 100%;height: 40px;background-color: #333;
}
.header-wrap{width: 1226px;height: 40px;margin: 0 auto;line-height: 40px;font-size: 12px;
}
.header-wrap a{color: #b0b0b0;  
}
.header-left ul>li:hover>a{color: #fff;
}
.header-right li:not(.cart):hover>a{color: #fff;
}
.header-left{float: left; 
}
header li{position: relative;padding-left: 2.5px;padding-right: 2.5px;
}
.header-left li{float: left;
}   
/* 二维码 */
.download{z-index: 20;width: 124px;height: 0;overflow: hidden;transition: all .7s;text-align: center;line-height: 28px;background-color: #fff;box-shadow: 0 2px 10px rgb(0 0 0 / 15%);position: absolute;top: 40px;left: 50%;margin-left: -62px;
}
.download>img{width: 90px;margin: 18px 15px 12px;
}
li:hover>.download{height: 160px;
}
/* 三角形 */
.triangle{width: 0px;height: 10px;border: 10px solid;border-color:transparent transparent #fff transparent; position: absolute;right: 10px;top: 10px;visibility: hidden; 
}
.header-left>ul>li:hover>i{visibility: visible;
}.header-right{float: right;
}
.header-right li{float: left;  
}
/* 购物车 */
.cart{width: 120px;height: 40px;background-color: rgba(96, 96, 96,0.3);text-align: center;position: relative;
}
.cart i{margin-right: 4px;
}
.cart:hover>a{color:#ff6700;
}
.cart:hover{background-color: #fff;
}
.cart-menu{z-index: 10;width: 316px;height: 0;overflow: hidden;text-align: center;position: absolute;line-height:80px ;top: 40px;right: 0;background-color: #fff;box-shadow: 0 2px 10px rgb(0 0 0 / 15%);transition: all .7s;}
.cart:hover .cart-menu{height: 80px;
}
/* 头部结束 */

如有错误，欢迎指正！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！