HTML顶部导航栏代码示例 - 创建简洁网站导航 - 常规

创建简洁的HTML顶部导航栏

以下是一个简单的HTML顶部导航栏示例代码，您可以直接复制并粘贴到您的HTML文件中，快速创建一个基础的网站导航菜单：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #333;
            overflow: hidden;
        }
        
        /* 导航栏链接样式 */
        .navbar a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        
        /* 鼠标悬停导航栏链接样式 */
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class='navbar'>
        <a href='#'>首页</a>
        <a href='#'>关于我们</a>
        <a href='#'>产品</a>
        <a href='#'>服务</a>
        <a href='#'>联系我们</a>
    </div>
</body>
</html>

代码说明：

<div class='navbar'> 创建了一个包含导航链接的容器。
<a href='#'> 定义了每个导航链接，'#' 可以替换为实际的链接地址。
内部的CSS样式代码定义了导航栏的外观，您可以根据需要进行修改。

使用方法：

将上述代码保存为一个HTML文件 (例如：navbar.html)。
在浏览器中打开该文件，您将看到一个简单的顶部导航栏。

自定义导航栏：

您可以修改导航链接的文本内容，例如将'首页'改为'主页'。
您还可以添加、删除或修改CSS样式，以改变导航栏的颜色、字体、间距等。

希望这个示例代码能够帮助您快速创建一个简洁的HTML顶部导航栏！如果您有任何其他问题，请随时提问。