制作一个竖着的nav实例
时间: 2024-04-16 18:26:13 浏览: 38
当你希望创建一个竖直排列的导航栏时,可以对示例代码进行如下修改:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vertical Navigation Menu Example</title>
<style>
/* 导航菜单样式 */
nav {
background-color: #333;
color: #fff;
width: 200px;
padding: 10px;
height: 100vh; /* 设置导航菜单的高度为视口高度 */
position: fixed; /* 将导航菜单固定在屏幕上 */
left: 0; /* 将导航菜单置于屏幕左侧 */
top: 0; /* 将导航菜单置于屏幕顶部 */
}
/* 导航链接样式 */
nav a {
display: block; /* 将导航链接设置为块级元素,使其竖直排列 */
color: #fff;
text-decoration: none;
margin-bottom: 10px; /* 设置导航链接之间的间距 */
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">产品</a>
<a href="#">联系我们</a>
</nav>
<h1>网站内容</h1>
<!-- 在这里添加其他页面内容 -->
</body>
</html>
```
在修改后的代码中,我们对样式进行了调整,使导航菜单竖直排列。我们设置了导航菜单的宽度为200px,并使用 `height: 100vh` 将其高度设置为视口的高度,以便在内容较长时出现滚动条。通过将导航菜单的 `position` 属性设置为 `fixed`,我们将其固定在屏幕上,并使用 `left` 和 `top` 属性将其置于屏幕的左上角。
导航链接被设置为块级元素,使用 `display: block` 让它们竖直排列,并使用 `margin-bottom` 属性设置导航链接之间的间距。
希望这个示例能够满足你的需求!如果你有任何问题,请随时提问。