首页html和css导航栏，带logo图片，图片在中间，左右各三个超链接，背景色黑色

html和css导航栏，带logo图片，图片在中间，左右各三个超链接，背景色黑色

时间: 2024-12-14 16:17:35 浏览: 15

HTML和CSS可以结合起来创建一个美观的导航栏，包含Logo图片和链接。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> body { background-color: black; margin: 0; padding: 0; } .navbar { display: flex; justify-content: space-between; align-items: center; height: 60px; background-color: #333; /* 较暗的颜色作为对比 */ overflow: hidden; } .logo { width: auto; max-width: 150px; margin-right: 20px; } .nav-links { display: flex; list-style-type: none; color: white; } .nav-links li a { display: block; padding: 14px 16px; text-decoration: none; } .nav-links li a:hover { background-color: #ddd; color: black; } </style> </head> <body> <nav class="navbar"> <img src="your-logo-url" alt="Logo" class="logo">  <ul class="nav-links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </nav> </body> </html> ``` 在这个示例中，Logo图片会在导航栏中间，左右各有三个链接。导航栏的背景颜色设置为黑色，链接在鼠标悬停时会有变化效果。请将`your-logo-url`替换为你实际Logo图片的URL。

阅读全文