效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style>
.btns{
/*border: black solid 1px;*/
background-color: black;
float: left;
/*列表的点去掉*/
list-style: none;
width: 100px;
height: 30px;
text-align: center;
/*当行高等于父容器高度的时候，文字垂直方向居中*/
line-height: 30px;
color: white;
}
/*当鼠标放上去，改变btn的颜色*/
.btns:hover{
color: white;
font-weight: bold;
background: deeppink
}
</style>
</head>
<body>
<!--01. ul li 布局；
02.float：left；
03.border
-->
<ul>
<li class="btns">首页</li>
<li class="btns">菜单</li>
<li class="btns">订单</li>
<li class="btns">定位</li>
<li class="btns">用户</li>
</ul>
</body>
</html>