Register
> 博客>

html5底部导航栏代码

新星源码网 2月 9日 2 0 

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部导航栏</title>
    <style>
        /* 样式可以根据需要进行修改 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 20px 0;
            text-align: center;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        footer a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- 这里放页面内容 -->
        <h1>这是页面内容</h1>
    </div>
    <footer>
        <!-- 底部导航链接 -->
        <a href="#">首页</a>
        <a href="#">产品</a>
        <a href="#">服务</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
    </footer>
</body>
</html>

这个代码包含一个固定在底部的 <footer> 元素，其中包含了链接到不同页面的导航链接。你可以根据自己的需要修改样式和链接内容。

如果你想要进一步改进底部导航栏，可以考虑

响应式设计: 确保底部导航栏在不同设备上都能正常显示和使用，可以通过媒体查询和CSS来实现。

图标和样式: 使用图标来增强链接的可视性和吸引力。你可以使用图标库，比如Font Awesome或者Material Icons，或者使用自定义的图标。

激活状态: 为了让用户知道他们当前所处的页面，可以为当前页面对应的导航链接添加一个激活状态的样式。

无障碍性: 确保导航栏对于残障用户也是可访问的。适当的HTML结构、语义化标签和aria属性可以帮助提高无障碍性。

页面链接: 确保导航链接指向正确的页面，并且页面内容与链接描述一致。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部导航栏</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 样式可以根据需要进行修改 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 20px 0;
            text-align: center;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        footer a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
            transition: color 0.3s ease;
        }
        footer a:hover {
            color: #ffc107;
        }
        footer .active {
            color: #ffc107;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- 这里放页面内容 -->
        <h1>这是页面内容</h1>
    </div>
    <footer>
        <!-- 底部导航链接 -->
        <a href="#" class="active"><i class="fas fa-home"></i> 首页</a>
        <a href="#"><i class="fas fa-box"></i> 产品</a>
        <a href="#"><i class="fas fa-tools"></i> 服务</a>
        <a href="#"><i class="fas fa-info-circle"></i> 关于我们</a>
        <a href="#"><i class="fas fa-envelope"></i> 联系我们</a>
    </footer>
</body>
</html>

在这个示例中，我们添加了一些 Font Awesome 图标，并且为当前页面添加了一个激活状态的样式。此外，我们还为导航链接添加了悬停效果。

Related

热门文章

微海报