搭建小米导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style>
*{
margin: 0;
padding: 0;
}
.back{
width: 100%;
height: 40px;
background-color: #333333;
font-size: 12px;
}
#head {
width: 90%;
float: left;
}
#herd-shopping {
background-color: #424242;
width: 10%;
float: right;
text-align: center;
}
#head-left {
float: left;
}
#head-right {
float: right; /*浮动 浮到空中往右飘*/
}
.back a{
padding: 10px 0px;
text-decoration: none;
font-weight:lighter;
color: #b0b0b0;
display: inline-block;
}
.back a:hover{
color: white;
}
</style>
</head>
<body>
<div class="back">
<div id="head">
<div id="head-left">
<a href="">小米商城</a>
<span style="color: #423c37"> | </span>
<a href="">MIUI</a>
<span style="color: #423c37"> | </span>
<a href="">ioT</a>
<span style="color: #423c37"> | </span>
<a href="">云服务</a>
<span style="color: #423c37"> | </span>
<a href="">金融</a>
<span style="color: #423c37"> | </span>
<a href="">有品</a>
<span style="color: #423c37"> | </span>
<a href="">小爱开放平台</a>
<span style="color: #423c37"> | </span>
<a href="">企业团购</a>
<span style="color: #423c37"> | </span>
<a href="">资质证照</a>
</div>
<div id="head-right">
<a href="">登录</a>
<span style="color: #423c37"> | </span>
<a href="">注册</a>
<span style="color: #423c37"> | </span>
<a href="">消息通知</a>
<span style="color: #423c37"> | </span>
</div>
</div>
<div id="herd-shopping">
<a href="">购物车 (0)</a>
</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/Lance-WJ/p/12884571.html