css怎样设置竖向导航条

CSS竖向导航条基础概念

竖向导航条是一种常见的网页布局元素，用于展示网站的各个主要部分或功能模块。它通常以垂直列表的形式出现，用户可以通过点击导航项快速跳转到相应的页面。

类型

纯CSS导航条：完全使用CSS实现，无需JavaScript。
JavaScript增强导航条：使用JavaScript增加交互效果，如展开/折叠子菜单。
框架集成导航条：使用前端框架（如Bootstrap）提供的导航条组件。

应用场景

竖向导航条广泛应用于各种类型的网站，特别是那些需要展示多个主要部分或功能模块的网站，如企业官网、电商平台、博客等。

示例代码

以下是一个简单的纯CSS竖向导航条示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竖向导航条示例</title>
    <style>
        .nav-bar {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        .nav-bar li {
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        .nav-bar li:last-child {
            border-bottom: none;
        }
        .nav-bar li a {
            text-decoration: none;
            color: #333;
        }
        .nav-bar li a:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <ul class="nav-bar">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>
</html>