小米导航栏：
准备工作：把需要实现的设计图放到ps中，量取需要的宽度高度间距值；
话不多说：直接上代码：
<div class="box"> // 一个大盒子可以用nav，包裹相应数量的超链接。以及符号<a href="#">小米商城</a><span>|</span><a href="#">MIUI</a><span>|</span><a href="#">IoT</a><span>|</span><a href="#">云服务</a><span>|</span><a href="#">金融</a><span>|</span><a href="#">有品</a><span>|</span><a href="#">小爱开放平台</a><span>|</span><a href="#">企业团购</a><span>|</span><a href="#">资质证照</a><span>|</span><a href="#">协议规则</a><span>|</span><a href="#">下载app</a><span>|</span><a href="#">小米商城APP</a><span>|</span><a href="#">Select Location</a></div>
* { // 清除内外边距margin: 0;padding: 0; }.box {width: 1349px;height: 40px;background-color: #333333;margin: 0 auto; // 实现盒子的水平居中。padding-left: 65px;}.box a {display: inline-block; // 把超链接转化为行内块元素，方便设置他的内边距。padding: 9px 15px;// 用内边距撑开超链接更合适，如果不是撑开的那么鼠标放上去超链接的大小也就是文字大小，不好看。 由于没有给a设置宽高，所以父盒子不会被撑大。text-decoration: none;color: #84a4a4;}.box a:hover {background-color: gray;}
