我总是觉得，多写原生的东西，才能学得到东西（那你怎么不去写二进制呢？这就有点扯远了吧，俗话说得好，万物都具有相对性嘛。不对比，永远不知道自己是什么水平）
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style>
* {
margin: 0;
padding: 0;
border: none;
}
.nav-headbg {
height: 30px;
background: #aaa;
}
nav {
width: 500px;
height: 50px;
margin: 0 auto;
}
nav > a {
text-decoration: none;
color: #333;
font-size: 14px;
display: block;
float: left;
width: 100px;
height: 30px;
box-sizing: border-box;
text-align: center;
border-bottom: 9px solid #0ff;
}
nav > a:not(:last-of-type) {
border-right: 10px solid red;
}
nav > a:hover {
color: #0f0;
border-bottom: 9px solid #0f0;
}
nav > a:active {
color: #f0f;
border-bottom: 9px solid #f0f;
}
</style>
</head>
<body>
<div class="nav-headbg">
<nav>
<a href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
</nav>
</div>
</body>
</html>