<style>
/*将网页自带样式清除*/
*{
    margin: 0px;
    padding: 0px;
}
/*去除a标签下划线*/
a{
    text-decoration: none;
    color: white;
}
/*设置浮动后要清除浮动*/
.clear{
    clear: both;
}
/*清除无序列表自带样式*/
ul{
    list-style: none;
}
/*黑色导航*/
.header{
    width: 100%;
    height: 40px;
    background-color: #333;
}
/*导航条-左侧-左浮动*/
.content_ul{
    height: 40px;
    float: left;
}
.content_ul li{
float: left;
    /*height: 40px;*/
}
.content_ul li a{
    color: #b0b0b0;
    font-size: 12px;

}
.content_ul li span{
    color: #424242;
    margin: 0 .3em;
}
/*导航条-右侧-右浮动*/
.content_ul_1{
    float: right;
    height: 40px;

}
.content_ul_1 li{
    float:left;
    height: 40px;
}
.content_ul_1 li a{
    color: #b0b0b0;
    font-size: 12px;

}
.content_ul_1 li span{
    color: #424242;
    margin: 0 .3em;
}
/*购物车*/
 .shopping{
    width: 90px;
    margin: 0px 5px;
    text-align: center;
    /*background-color: #424242;*/
    height: 40px;
}
</style>
<!--导航条部分-->
<!--header-->
    <div class="header">
        <!--content-->
        <div class="content">
            <!--导航条-左侧-左浮动-->
            <ul class="content_ul">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">金融</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li><a href="#">下载app</a><span>|</span></li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <!--导航条-右侧-右浮动-->
            <ul class="content_ul_1">
                <li><a href="">登录</a><span>|</span></li>
                <li><a href="">注册</a><span>|</span></li>
                <li><a href="">消息通知</a></li>
                <li class="shopping"><a href="">购物车</a></li>
            </ul>
        </div>
        <!--content-->
    </div>
<!--header-->