CSS简单网页导航条代码如何实现？-网页设计-锦华智联科技

最简单的水平导航条（适合初学者）

这是最基础、最核心的实现方式，使用 Flexbox 布局,代码简洁且效果很好。

（图片来源网络，侵删）

最终效果预览

代码实现

您可以直接复制下面的代码到一个 .html 文件中,然后在浏览器中打开查看效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简单导航条</title>
    <style>
        /* 1. 重置默认样式，去除内外边距 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif; /* 设置一个默认字体 */
        }
        /* 2. 导航条容器样式 */
        .navbar {
            background-color: #333; /* 背景色 */
            overflow: hidden; /* 防止子元素溢出 */
        }
        /* 3. 导航条链接列表样式 */
        .navbar ul {
            list-style-type: none; /* 去掉列表前的点 */
            display: flex; /* 使用 Flexbox 布局，让链接水平排列 */
        }
        /* 4. 导航条链接样式 */
        .navbar li a {
            display: block; /* 让链接可以设置宽高和内边距 */
            color: white; /* 文字颜色 */
            text-align: center; /* 文字居中 */
            padding: 14px 16px; /* 上下内边距14px，左右16px */
            text-decoration: none; /* 去掉下划线 */
        }
        /* 5. 鼠标悬停效果 */
        .navbar li a:hover {
            background-color: #111; /* 鼠标悬停时的背景色 */
        }
    </style>
</head>
<body>
<nav class="navbar">
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#about">关于我们</a></li>
        <li><a href="#contact">联系方式</a></li>
    </ul>
</nav>
<div style="padding:20px;">
    <h2>这是一个简单的导航条示例</h2>
    <p>将鼠标悬停在导航链接上查看效果。</p>
</div>
</body>
</html>

代码分步解析

*` { margin: 0; padding: 0; }`**

这是CSS重置，移除了所有HTML元素的默认外边距和内边距,让不同浏览器下的表现更一致。
.navbar { ... }
（图片来源网络，侵删）
- 这是导航条最外层容器的样式，我们给它设置了一个深灰色的背景色 (#333)。
.navbar ul { list-style-type: none; display: flex; }
- list-style-type: none;：<ul> 默认前面会有小圆点,这行代码把它们去掉。
- display: flex;：这是核心！它让 <ul> 内部的 <li> 元素（列表项）从垂直排列变为水平排列，并且可以轻松地拉伸、对齐它们。
.navbar li a { ... }
- 这是每个导航链接的样式。
- display: block;：非常重要，默认情况下，<a> 是行内元素，只能设置内外边距的左右值。display: block 让它变成块级元素，可以设置完整的 padding（上下左右），并且链接区域会填满整个 <li>。
- color: white; 和 text-decoration: none;：设置文字颜色为白色,并移除链接的下划线。
- padding: 14px 16px;：为链接添加内边距，让文字和容器边缘有间隔,更容易点击。
.navbar li a:hover { ... }

这是伪类选择器，当鼠标移动到链接上时触发，我们改变它的背景色,给用户一个视觉反馈。
（图片来源网络，侵删）

带当前页面高亮的导航条

在方案一的基础上，我们增加一个功能：高亮显示当前所在的页面。

最终效果预览

代码实现

只需要在方案一的HTML中给对应的 <a> 加上 active 类,并在CSS中添加样式即可。

<!-- 在HTML中，给当前页面的链接加上 class="active" -->
<nav class="navbar">
    <ul>
        <li><a href="#home" class="active">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#about">关于我们</a></li>
        <li><a href="#contact">联系方式</a></li>
    </ul>
</nav>

然后在CSS中添加以下样式：

/* 在方案一的CSS基础上添加以下代码 */
/* 6. 当前页面链接的高亮样式 */
.navbar li a.active {
    background-color: #04AA6D; /* 设置一个不同的背景色 */
    color: white; /* 确保文字颜色依然清晰 */
}

带搜索框的导航条

这是一个更常见的导航条样式,在右侧添加一个搜索框。

最终效果预览

代码实现

这个版本稍微复杂一点，我们使用 Flexbox 的 justify-content: space-between 来让左侧的链接和右侧的搜索框分列两边。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">带搜索框的导航条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
        .navbar {
            background-color: #333;
            overflow: hidden;
        }
        .navbar ul {
            list-style-type: none;
            display: flex;
            /* justify-content: space-between; 会让左右两端元素贴边 */
            /* 我们用一个容器包裹ul和search-box，然后用flex-between更可控 */
        }
        .navbar-content {
            display: flex;
            justify-content: space-between;
            align-items: center; /* 垂直居中 */
            padding: 0 20px; /* 给整个内容区加左右内边距 */
        }
        .navbar li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        .navbar li a:hover {
            background-color: #111;
        }
        .navbar li a.active {
            background-color: #04AA6D;
            color: white;
        }
        /* 搜索框样式 */
        .search-container {
            display: flex; /* 让输入框和按钮在同一行 */
            align-items: center;
        }
        .search-container input[type=text] {
            padding: 6px;
            margin-top: 8px;
            font-size: 17px;
            border: none;
            border-radius: 4px 0 0 4px; /* 左上和左下圆角 */
        }
        .search-container button {
            padding: 6px 10px;
            margin-top: 8px;
            background: #ddd;
            font-size: 17px;
            border: none;
            cursor: pointer;
            border-radius: 0 4px 4px 0; /* 右上和右下圆角 */
        }
        .search-container button:hover {
            background: #ccc;
        }
    </style>
</head>
<body>
<nav class="navbar">
    <div class="navbar-content">
        <ul>
            <li><a href="#home" class="active">首页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
        <div class="search-container">
            <form action="/action_page.php">
                <input type="text" placeholder="搜索.." name="search">
                <button type="submit">搜索</button>
            </form>
        </div>
    </div>
</nav>
<div style="padding:20px;">
    <h2>这是一个带搜索框的导航条示例</h2>
    <p>导航条左侧是链接，右侧是搜索框。</p>
</div>
</body>
</html>

关键点解析

.navbar-content: 新增了一个包裹层，它设置了 display: flex 和 justify-content: space-between，这使得它内部的第一个子元素（<ul>）会靠左对齐，最后一个子元素（.search-container）会靠右对齐。
.search-container: 也设置为 display: flex，这样 <input> 和 <button> 就会水平排列在一起。
圆角 border-radius: 通过分别给输入框和按钮设置不同的 border-radius，实现了常见的“胶囊”形搜索框效果。

希望这些示例能帮助您快速创建出符合自己需求的导航条！