html代码写一个导航栏

作者：洃铯哖輪发布日期:2025-11-19 浏览:100

<!DOCTYPE html>
<html>
<head>
    <title>导航栏示例</title>
    <style>
        /* 设置导航栏的背景颜色和内边距 */
        nav {
            background-color: #333;
            padding: 10px;
        }
        /* 设置导航栏中链接的基本样式 */
        nav a {
            color: white;
            text-decoration: none;
            padding: 14px 16px;
        }
        /* 当鼠标悬停在链接上时改变颜色 */
        nav a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
<body>

<!-- 导航栏 -->
<nav>
    <a href="#home">首页</a>
    <a href="#news">新闻</a>
    <a href="#contact">联系我们</a>
    <a href="#about">关于我们</a>
</nav>

</body>
</html>

解释说明：

HTML结构:
- 使用<nav>标签创建一个导航栏。
- 在<nav>标签内部，使用多个<a>标签定义导航链接，每个链接指向不同的页面或页面内的锚点（如#home, #news等）。
CSS样式:
- 通过<style>标签定义了导航栏的样式。
- nav选择器设置了导航栏的背景颜色和内边距。
- nav a选择器设置了导航栏中链接的颜色、文本装饰和内边距。
- nav a:hover选择器定义了当鼠标悬停在链接上时的样式变化。

上一篇：html源码网站

下一篇：html aside