HTML&CSS设计小米导航栏

小米导航栏：

准备工作： 把需要实现的设计图放到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;
}