效果图
效果图
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></head><body><div class=" container"><div class="topbar"><div class="menu-container"><div class="topbar-nav"><a rel="nofollow" href="" class="hover_white">小米官网</a><span class="sep">|</span><a rel="nofollow" href="" class="hover_white">小米商城</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">MIUI</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">IoT</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">云服务</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">天星数科</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">有品</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">小爱开放平台</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">企业团购</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">资质证照</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">协议规则</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="topbar-download active hover_white">下载app<span class="appcode"><div class="sj"></div><img src="./img/小米app.png" width="90" height="90"><div class="text">小米商城APP</div></span></a><span class="sep">|</span><a rel="nofollow" href="javascript:;" class="J_siteGlobalRegion hover_white">Select Location</a></div><div class="topbar-cart"><a class="cart-mini" href=""><i class="fa fa-shopping-cart" aria-hidden="true"style="font-size:20px ;"></i><em class="iconfont-cart-full hide"></em>购物车(0)<span class="cart-mini-num J_cartNum"></span></a><div class="cart-menu " id="J_miniCartMenu"><div class="menu-content">购物车中还没有商品，赶紧选购吧!</div></div></div><div class="topbar-info" id="J_siteUserInfo"><a class="link hover_white" href="">登录</a><span class="sep">|</span><a class="link hover_white " href="">注册</a><span class="sep">|</span><span class=" message"><a href="" class="J_needAgreement hover_white">消息通知</a></span></div></div></div></div></body></html>
css代码
index.css
ul{list-style: none;}*{margin:0px;padding:0px;}a{text-decoration: none;color: black;}div{display: block;}body{color: #333;}.topbar{position: relative;z-index: 30;height: 40px;font-size: 12px;color: #b0b0b0;background-color: #333;}.topbar a{color: #757575;}.menu-container{width: 1226px;margin-right: auto;margin-left: auto;}.topbar .topbar-nav {float: left;height: 40px;line-height: 40px;}.menu-container a{color: #b0b0b0;line-height: 40px;display: inline-block;}.menu-container .sep {margin: 0 .3em;color: #424242;}.topbar .topbar-download {position: relative;}.topbar .topbar-download .appcode {position: absolute;top: 40px;left: 50%;width: 124px;height: 148px;background: #fff;margin-left: -55px;text-align: center;font-size: 14px;color: #333;line-height: 1;display: none;}.hover_white:hover{color: rgb(255,255,255);}.topbar-cart:hover .cart-mini{background-color: white;color: rgb(255,103,0);}.appcode>.sj{width: 0px;height: 0px;position: relative;border:10px solid red;border-color: transparent transparent white transparent;left: 50px;top:-20px;}.appcode>img {position: relative;top:-20px}.text{position: relative;top:-20px;}.topbar .topbar-download img {display: block;margin: 18px auto 12px;}.topbar .topbar-download:hover .appcode{display: block;}.topbar .topbar-cart {position: relative;float: right;width: 120px;height: 40px;margin-left: 15px;-webkit-transition: all .2s;transition: all .2s;font-size: 12px;}.topbar .cart-mini {position: relative;z-index: 32;display: block;height: 40px;line-height: 40px;text-align: center;color: #b0b0b0;background: #424242;}.topbar .cart-mini {position: relative;z-index: 32;display: block;height: 40px;line-height: 40px;text-align: center;color: #b0b0b0;background: #424242;}.topbar .cart-menu {position: absolute;right: 0;top: 40px;z-index: 31;width: 316px;height: 100px;color: #424242;background: #fff;display: none;}.topbar .topbar-cart:hover .cart-menu{display: block;border-left: 1px solid grey;border-bottom: 1px solid grey;border-right: 1px solid grey;}.topbar .cart-menu .menu-content {text-align: center;line-height: 100px;}.topbar .cart-menu .loading, .topbar .cart-menu .msg {text-align: center;line-height: 100px;}.topbar .cart-list {margin: 0;padding: 0;list-style-type: none;}.topbar .topbar-info {position: relative;float: right;height: 40px;line-height: 40px;}.topbar .topbar-info .link {padding: 0 5px;text-align: center;}.topbar .topbar-info .link, .topbar .topbar-info .message, .topbar .topbar-info .sep, .topbar .topbar-info .user {float: left;}
