说明：
1.由于本人只学习了部分html和css，所以本文没有涉及到js部分。
2.本文并没有实现小米官网首页的全部功能，还存在很多问题。如果以后技能提升，会继续更新实现未完成的功能。
3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码，如果发现问题或者有更好的方法请联系本人探讨更正。
4.总体框架分析见博客 《仿写小米官网 简单的HTML+CSS练习》
目标：仿写小米官网的顶部导航栏：
初步HTML元素分析：
观察可知，整体部分为一个整个的块，使用一个div元素。中间有一个表示内容区的块存放要显示的内容。内容区分为两部分（左侧导航栏和右侧导航栏），都用ul元素实现，且其中的每一项都是一个链接，所以每个li中都是一个链接。除此之外，每个li后面又有一个隔开符，也要用li隔开。整体框架如下：
<div class="all"><div class="top-bar"><div class="content"><ul class="left-bar"><li><a href="#">小米商城</a> </li><li><span class="line"></span></li></ul><ul class="right-bar"></ul></div></div>
</div>
CSS样式分析：
1.对于整个的块div，宽度为整个页面宽度，需设定高度。上部需要设置边框。2.对于内容区，高度为父元素高度，需设置一定宽度，用 margin：0 auto；使其居中。3.对于内容区中左部导航栏，其中的li需要靠左横向排列。li中的链接要设置鼠标移入样式。其中鼠标移入“下载app”这项内容有一个下拉框，所以要添加下拉框元素和样式。4.对于内容区中右部导航栏，其中的li需要靠右横向排列。li中的链接要设置鼠标移入样式。其中“购物车（0）”这项内容中有一个图标,需要引入图标字体来实现，鼠标移入 “购物车（0）”这项内容有一个下拉框，所以要添加下拉框元素和样式。
代码实现：
<!DOCTYPE html>
<html lang="zh">
<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>小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title><link rel="stylesheet" href="./reset.css"><link rel="stylesheet" href="./iconfont/fontawesome-free-5.15.3-web/css/all.css"><style>body{/* 设置整个字体样式 */font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;}.top-bar{width: 100%;height: 40px;background-color: #333;/* 设置上边框 */border-top: 1px solid #DADCE0;font-size: 14px;}.top-bar a{color: #b0b0b0;font-size: 12px;/* 去掉链接文字的下划线 */text-decoration: none;}/* 鼠标移入时样式 */.top-bar a:hover{color: white;}.top-bar .content{width: 1226px;height: 40px;margin: 0 auto;line-height: 40px;}.top-bar .left-bar{height: 100%;float: left;}.top-bar .left-bar li{float: left;}.right-bar{float: right;}.right-bar li{float: left;}/* 分隔符样式 */.content .line{display: inline-block;width: 1px;height: 12px;margin: 15px 8px;background-color: #424242;}#shopping-car{display: inline-block;width: 105px;height: 40px;margin-left: 25px;padding-left: 15px;background-color: #424242;position: relative;z-index: 999;}/* 购物车内容中图标文字样式 */#shopping-car .fas{color: #b0b0b0;}/* 设置下拉框中的小三角 */.drop-box1::after{display: none;content: '';width: 0px;height: 0px;border: 8px solid transparent;border-top: none;border-bottom-color: white;position: absolute;bottom: 0px;left: 0px;right: 0px;margin: 0 auto;}/* 下拉二维码 */.drop-box1{display: block; position: relative;}.download{/* display: none; */position: absolute;z-index: 999;background-color: white;box-shadow: 0 1px 5px #aaa;top: 40px;left: -30px; width: 124px;height: 0px;overflow: hidden;/* 设置过渡样式 */transition: height 0.3s;}.download img{/* display: block; */width: 90px;height: 90px;margin: 18px auto 0px;}.download span{margin-left: 17px; }.drop-box1:hover .download,.drop-box1:hover::after{display: block;height: 161px;}/* 购物车下拉框 */.drop-box2{display: none;width: 316px;height: 100px;line-height: 100px;background-color: white;/* 开启定位并设置位置 */position: absolute;z-index: 997;top: 40px;right: 0;/* 设置阴影 */box-shadow: 0 5px 5px rgba(170, 170, 170, 0.425);}.drop-box2 div{font-size: 12px;margin: 0 65px; }#shopping-car:hover .drop-box2{display: block;}#shopping-car:hover{background-color: white; border-bottom: 2px solid white;}#shopping-car:hover .fas{color: orange;}#shopping-car:hover a{color: orange;}</style>
</head>
<body><div class="all"><div class="top-bar"><div class="content"><ul class="left-bar"><li><a href="#">小米商城</a> </li><li><span class="line"></span></li><li><a href="#"> MIUI</a></li> <li><span class="line"></span></li><li><a href="#">IoT</a> </li><li><span class="line"></span></li><li><a href="#">云服务</a> </li><li><span class="line"></span></li><li><a href="#">天星数科</a> </li><li><span class="line"></span></li><li><a href="#">有品</a></li><li><span class="line"></span></li><li><a href="#">小爱开放平台</a> </li><li><span class="line"></span></li><li><a href="#">企业团购</a> </li><li><span class="line"></span></li><li><a href="#">资质证照</a> </li><li><span class="line"></span></li><li><a href="#">协议规则</a> </li><li><span class="line"></span></li><li class="drop-box1"><a href="#">下载app</a> <!-- 下拉框 --><div class="download" ><img src="./img/download.png" alt="二维码"><span>小米商城APP</span></div></li><li><span class="line"></span></li><li><a href="#">智能生活</a> </li><li><span class="line"></span></li><li><a href="#">Select Location</a> </li></ul><ul class="right-bar"><li><a href="#">登录</a></li><li><span class="line"></span></li><li><a href="#">注册</a></li><li><span class="line"></span></li><li><a href="#">消息通知</a></li><li id="shopping-car"><div class="shopping-box"><!-- 图标文字 --><i class="fas fa-shopping-cart"></i><a href="#">购物车（0）</a></div> <div class="drop-box2"><div>购物车中还没有商品，赶紧选购吧!</div></div></li></ul></div></div></div>
</div>
</body>
</html>
最终结果：
小结：
1.在内容区中设置 line-height 与 height 相等，可以使子元素中的文字在其中垂直居中。
2.在内容区中，设置两个 ul 中内容浮动时，可以先分别设置两个 ul 浮动，再设置 ul 中的 每个 li 靠左浮动，这样，右侧导航栏就会按正确顺序排列。
3.分隔符要单独放在一个 li 元素里，不然格式就会混乱。
4.开启相对定位后会根据 最近的开启定位的父元素来定位，所以开启相对定位时，要为其父元素开启定位，一般用 position: relative ，这个定位不会对元素产生影响。
5.用伪类生成小三角形，以.drop-box1类为例：
.drop-box1::after{display: none;content: '';width: 0px;height: 0px;border: 8px solid transparent;border-top: none;border-bottom-color: white;position: absolute;bottom: 0px;left: 0px;right: 0px;margin: 0 auto;}
6.用 transition 设置过渡效果
