<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {margin: 0 auto;}
header {
width: 100%;
height: 40px;
background-color: rgb(51,51,51);
}
header ul {margin: 0}
header a {
color: #b0b0b0;
text-decoration: none;
font-size: 12px;
}
header a:hover {color: #FFF;}
/*|的样式*/
header span {
color: #424242;
font-size: 12px;
margin: 0 3.6px;
}
/*顶部左侧导航*/
#topbar-nav {
float: left;
margin-left: 8%;
}
#shopcar {
float: right;
margin-right: 14%;
}
/*顶部右侧购物车导航*/
#shopcar a{
display: inline-block;
height: 40px;
padding: 0 20px;
line-height: 40px;
background-color: #424242;
}
#shopcar a:hover {
color: rgb(255,103,0);
background-color: #fff;
}
/*顶部右侧登录区域导航*/
#userinfo {
float: right;
margin-right: 25px;
}
#topbar-nav li,#userinfo li{
float: left;
line-height: 40px;
}
</style>
</head>
<body>
<header>
<div id="topbar-nav">
<ul type="none">
<li><a href="#">小米商城</a></li>
<li><span>|</span></li>
<li><a href="#">MIUI</a></li>
<li><span>|</span></li>
<li><a href="#">IoT</a></li>
<li><span>|</span></li>
<li><a href="#">云服务</a></li>
<li><span>|</span></li>
<li><a href="#">金融</a></li>
<li><span>|</span></li>
<li><a href="#">有品</a></li>
<li><span>|</span></li>
<li><a href="#">小爱开放平台</a></li>
<li><span>|</span></li>
<li><a href="#">企业团购</a></li>
<li><span>|</span></li>
<li><a href="#">资质证照</a></li>
<li><span>|</span></li>
<li><a href="#">协议规则</a></li>
<li><span>|</span></li>
<li><a href="#">下载app</a></li>
<li><span>|</span></li>
<li><a href="#">Select Location</a></li>
</ul>
</div>
<div id="shopcar">
<a href="#">购物车 (0)</a>
</div>
<div id="userinfo">
<ul type="none">
<li><a href="#">登录</a></li>
<li><span>|</span></li>
<li><a href="#">注册</a></li>
<li><span>|</span></li>
<li><a href="#">消息通知</a></li>
</ul>
</div>
</header>
</body>
</html>
原文：https://www.cnblogs.com/guanxiying/p/12885279.html