旧貌
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4fa8e6de2f8f39307dc4931b008d93af.png)
新颜
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1fd7289d461a08f186d8aca63cdee2c3.png)
利用CSS实现菜单效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜单</title>
<style>
ul{
list-style: none;
}
li{
float: left;
margin-right: 10px;
background-color: green;
padding: 10px 15px 10px 15px;
border-radius: 10px;
}
li:hover{
background-color: #ee1166;
}
a{
text-decoration: none;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<!-- ul标签分组,li条目 -->
<ul>
<!-- a链接,href属性网站地址,target属性设置是否弹出 -->
<li><a href="https://act.codeboy.com/" target="_blank">达内java培优</a></li>
<li><a href="https://www.w3school.com.cn/" target="_blank">W3school</a></li>
<li><a href="https://www.runoob.com/" target="_blank">菜鸟教程</a></li>
<li><a href="https://www.cnblogs.com/" target="_blank">博客园</a></li>
<li><a href="https://blog.csdn.net/nutony" target="_blank">CSDN</a></li>
<li><a href="https://segmentfault.com/" target="_blank">思否</a></li>
</ul>
</body>
</html>