帮我用html5+css写一个高级网站导航
时间: 2024-09-28 16:04:03 浏览: 31
用HTML+CSS做一个漂亮简单的音乐网站
HTML5和CSS可以结合创建美观而响应式的网站导航栏。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>高级网站导航</title>
<style>
/* 导航栏样式 */
.navbar {
display: flex;
justify-content: space-between;
background-color: #333;
padding: 10px;
position: sticky; /* 确保导航栏固定在顶部 */
top: 0;
z-index: 100;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.navbar li {
margin-right: 20px;
}
.navbar a {
color: white;
text-decoration: none;
font-size: 16px;
transition: all 0.3s ease;
}
.navbar a:hover {
color: #f00; /* 鼠标悬停时改变颜色 */
}
</style>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<div class="logo">Logo</div>
</nav>
</body>
</html>
```
这个例子中,我们创建了一个包含"主页", "关于我们", "服务", 和 "联系我们" 这些链接的水平导航菜单。当鼠标悬停在链接上时,链接的颜色会变为红色。`position: sticky`属性使得导航栏始终保持在屏幕顶部。
阅读全文