css网站导航菜单

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。网站导航菜单通常由一系列链接组成，用于帮助用户在网站的不同页面之间进行导航。

类型

水平导航菜单：导航链接水平排列在页面顶部。
垂直导航菜单：导航链接垂直排列在页面左侧或右侧。
下拉菜单：点击某个导航项时，显示其子菜单项。
侧边栏导航：导航菜单以侧边栏的形式展示。
面包屑导航：显示用户在网站中的当前位置路径。

应用场景

网站首页：通常在顶部放置一个水平导航菜单，方便用户快速访问主要页面。
产品页面：使用垂直导航菜单或侧边栏导航，帮助用户浏览不同类别的产品。
博客网站：使用面包屑导航，帮助用户了解当前文章的分类和路径。

示例代码

以下是一个简单的水平导航菜单的HTML和CSS代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Menu Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .navbar {
            background-color: #333;
            overflow: hidden;
        }
        .navbar a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </div>
</body>
</html>