首页html八个导航栏制作横向

html八个导航栏制作横向

时间: 2024-12-25 15:03:38 浏览: 18

在HTML中创建一个简单的横向导航栏，你可以使用`<ul>`标签作为无序列表，并结合`<li>`元素来表示每个导航链接。下面是一个基本的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> /* 水平居中并设置样式 */ .navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } .navbar li { float: left; } .navbar li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar li a:hover { background-color: #ddd; color: black; } </style> </head> <body> <div class="navbar"> <a href="#home">首页</a> <a href="#about">关于</a> <a href="#services">服务</a> <a href="#portfolio">作品</a> <a href="#contact">联系我们</a> </div> </body> </html> ``` 在这个例子中，`.navbar`类设置了无序列表的基本样式，使其水平排列。`<a>`标签用于创建链接，`:hover`伪类则给鼠标悬停时的链接添加了视觉反馈。

阅读全文