首页用html写一个简单的纵向导航

用html写一个简单的纵向导航

时间: 2024-10-08 17:02:27 浏览: 23

在HTML中创建一个简单的纵向导航栏，你可以使用`<ul>`和`<li>`元素来构建无序列表，然后通过CSS调整样式使其呈现垂直布局。这里是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .vertical-nav { display: flex; flex-direction: column; /* 设置为竖直方向 */ justify-content: space-between; /* 水平居中项目 */ width: 200px; /* 定义导航栏宽度，可根据需要调整 */ } .vertical-nav li { margin-bottom: 10px; /* 项间距 */ } .vertical-nav a { text-decoration: none; color: black; display: block; /* 将链接块状显示 */ } </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`类设置了导航栏的样式，而`<li>`下的链接通过`display: block`使得每个链接占据一行。你可以根据实际需求修改样式或添加图片等元素。

阅读全文