最终效果：
代码：
<!DOCTYPE html>
<html>
<head>
<title>#练习册二</title>
<style type="text/css">
ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
background-color: #f1f1f1;
border: 1px solid #555; /*添加边框*/
}
li{
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child{
border-bottom: none; /*去掉最后一个格子的重复*/
}
li a.green{
background-color: #4CAF50;
color: white;
}
li a{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover{
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="green" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
参考链接：https://www.runoob.com/css/css-navbar.html