<!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
原文：https://www.cnblogs.com/lfri/p/11784356.html