首页用html完成一个导航栏效果

用html完成一个导航栏效果

时间: 2023-07-18 15:31:30 浏览: 90

好的，以下是一个基本的HTML导航栏示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Navigation Bar Example</title> <style> /* 设置导航栏样式 */ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #4CAF50; } </style> </head> <body>  <ul> <li><a class="active" 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> ``` 这个HTML代码将创建一个基本的导航栏，包括四个链接。导航栏的样式通过CSS设置，包括背景颜色、字体样式、悬停样式等。通过添加或修改链接和样式，你可以轻松地自定义导航栏以适应你的网站或应用程序的需求。

阅读全文