垂直导航栏html代码
时间: 2024-09-03 13:01:00 浏览: 42
垂直导航栏通常用于网站布局中,它是一个固定在页面侧边或者顶部的导航菜单,内容从上到下排列。下面是一个简单的HTML和CSS示例,展示如何创建一个基本的垂直导航栏:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
.vertical-nav {
position: fixed; /* 固定位置 */
top: 0;
left: 0;
width: 200px; /* 宽度可根据需求调整 */
height: 100%; /* 高度占据整个窗口 */
background-color: #f1f1f1;
overflow-y: auto; /* 滚动条 */
}
.vertical-nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.vertical-nav li a {
display: block;
padding: 16px;
text-decoration: none;
color: black;
}
.vertical-nav li a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="vertical-nav">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
```
在这个例子中,`.vertical-nav`是包含导航链接的容器,`.vertical-nav ul`设置无序列表样式,`.vertical-nav li a`则是每个导航项的链接。通过CSS,我们可以控制其外观和交互。