HTML+CSS实现小米官网顶部导航栏

效果图

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;
}

HTML+CSS实现小米官网顶部导航栏相关推荐

jQuery的小米官网-----侧边导航栏
目录前言 1.原生js和jQuery优势对比 1.1.原生JavaScript优点 1.2.jQuery优点 2.侧边栏代码展示 2.1. 原生js代码 2.2.jQuery代码总结前言时隔多 ...
仿简书，知乎pc官网顶部导航栏上下滚动效果
描述:简书,知乎顶部导航栏,当鼠标上下滚动时切换不同导航栏,非常符合用户习惯. 怎么实现的呢首先看一下实现的效果先上代码 <!DOCTYPE html> <html lang=& ...
vue实现仿DJI大疆官网顶部导航栏组件
页面进入时,导航栏背景色为透明: 鼠标移入时,导航栏背景变白,鼠标停留的标签字体颜色变换,出现底边框,若有二级下拉菜单,则平滑向下弹出菜单: gitee仓库地址:https://gitee.com/Y ...
Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...
前端学习——仿原神官网顶部导航栏
前端学习--仿原神官网顶部导航栏通过使用CSS html实现原神官网的导航栏本人做的原神官网后续将把顶部标签hover效果的教程发出下面来看看代码  ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
教你用html和css仿制小米官网页面！
一.使用的工具? 博主使用的是Visual Studio Code.这个是真的方便啊,体型小不说,好用的插件还不少!赞一个.不过为了之后的后端学习,我开始慢慢转向用IDEA 了,这个软件使用起来也是真 ...

HTML+CSS实现小米官网顶部导航栏

HTML+CSS实现小米官网顶部导航栏相关推荐

最新文章

热门文章