首页 html导航栏代码

html导航栏代码

时间: 2024-10-24 15:00:59 浏览: 90

HTML中的导航栏通常使用`<nav>`标签来创建，它是一个用于定义网站的主要导航部分的元素。以下是一个基本的HTML导航栏代码示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>导航栏示例</title> <style> /* 可选样式，这里仅提供基本布局 */ nav { background-color: #333; overflow: auto; } ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around; } li a { display: block; color: white; text-decoration: none; padding: 14px 16px; } li a:hover { background-color: #ddd; color: black; } </style> </head> <body> <nav> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于</a></li> <li><a href="#services">服务</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav>  </body> </html> ``` 在这个例子中，`<nav>`标签包含了`<ul>`无序列表，每个链接 (`<a>`) 表示一个导航项。通过CSS可以进一步定制样式，如颜色、位置等。

阅读全文