怎样做一个竖直的导航条
时间: 2023-10-05 09:07:21 浏览: 39
要创建一个竖直的导航条,可以使用HTML和CSS。
HTML代码:
```
<ul class="vertical-nav">
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
```
CSS代码:
```
.vertical-nav {
list-style: none;
margin: 0;
padding: 0;
width: 100px; /* 导航条宽度 */
}
.vertical-nav li {
margin: 0;
padding: 0;
}
.vertical-nav li a {
display: block;
padding: 10px;
background-color: #f2f2f2;
color: #333;
text-decoration: none;
border-bottom: 1px solid #ccc; /* 添加底部边框 */
}
.vertical-nav li:last-child a {
border-bottom: none; /* 去掉最后一个链接的底部边框 */
}
```
在这个示例中,我们使用了一个无序列表来创建导航条。我们将列表的样式设置为无符号列表,然后将左右间距和内边距都设置为零。我们还将导航条的宽度设置为100像素。
我们还将每个列表项的样式设置为零间距和零内边距。然后,我们将链接的样式设置为块级元素,并添加一些填充和背景颜色。
最后,我们添加了一个底部边框来分隔每个链接,并去掉了最后一个链接的底部边框。
这样就可以创建一个简单的竖直导航条了。