首页html如何添加纵向导航栏，6个栏目分别为无序列表、并有超链接定

html如何添加纵向导航栏，6个栏目分别为无序列表、并有超链接定

时间: 2024-09-12 08:01:39 浏览: 49

要创建一个纵向导航栏，你可以使用HTML和CSS。下面是一个简单的例子，展示了如何创建一个包含六个栏目的无序列表，并且每个栏目都有超链接。 HTML代码如下： ```html <!DOCTYPE html> <html> <head> <title>纵向导航栏示例</title> <style> /* 简单的CSS样式 */ .nav-bar { list-style-type: none; /* 移除列表项前面的默认标记 */ margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } .nav-bar li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* 鼠标悬停时的背景颜色 */ .nav-bar li a:hover { background-color: #555; color: white; } </style> </head> <body> <ul class="nav-bar"> <li><a href="链接1.html">栏目1</a></li> <li><a href="链接2.html">栏目2</a></li> <li><a href="链接3.html">栏目3</a></li> <li><a href="链接4.html">栏目4</a></li> <li><a href="链接5.html">栏目5</a></li> <li><a href="链接6.html">栏目6</a></li> </ul> </body> </html> ``` 在这个例子中，`.nav-bar` 类定义了导航栏的宽度、背景颜色等基本样式。每个列表项 `<li>` 中包含一个 `<a>` 标签，用于定义超链接。使用CSS的 `:hover` 伪类为导航栏的链接项添加了鼠标悬停效果。

阅读全文