一个手机端的导航栏的HTML和CSS代码-程序员茄子

代码一个手机端的导航栏的HTML和CSS代码

2024-11-19 06:37:04 +0800 CST views 708

该文本展示了一个手机端的导航栏的HTML和CSS代码。导航栏包含四个选项：消息、添加、定位和我的。每个选项都有相应的图标和交互效果，用户点击时会高亮显示。样式使用了Flexbox布局，确保导航栏在屏幕底部固定，并具有响应式设计。通过JavaScript函数实现了选项的激活状态切换。


<!DOCTYPE html>
<html lang="zh-CN">

<head>
        
    <meta charset="UTF-8">
        
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>手机端导航栏</title>
        <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            height: 100vh;
            background-color: #f0f0f0;
        }

        .navbar {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: white;
            width: 100%;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            height: 70px;
            z-index: 100;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            text-decoration: none;
            font-size: 12px;
            transition: all 0.3s ease;
            position: relative;
            padding: 5px 10px;
        }

        .nav-item.active {
            color: #4CAF50;
            transform: scale(1.3) translateY(-15px);
            z-index: 10;
        }

        .nav-icon {
            font-size: 24px;
            margin-bottom: 5px;
            transition: all 0.3s ease;
        }

        .nav-item:hover .nav-icon {
            transform: translateY(-5px);
        }

        .add-button {
            background-color: #4CAF50;
            color: white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            transition: all 0.3s ease;
        }

        .nav-item:hover .add-button {
            transform: rotate(90deg);
        }

        .nav-item.active .add-button {
            transform: scale(1.2) rotate(90deg);
        }
    </style>
</head>

<body>
        <nav class="navbar">
                <a href="#message" class="nav-item active" onclick="setActive(this)">
                        <div class="nav-icon">💬</div>
                        消息
                    </a>
                <a href="#add" class="nav-item" onclick="setActive(this)">
                        <div class="add-button">+</div>
                        添加
                    </a>
                <a href="#location" class="nav-item" onclick="setActive(this)">
                        <div class="nav-icon">📍</div>
                        定位
                    </a>
                <a href="#profile" class="nav-item" onclick="setActive(this)">
                        <div class="nav-icon">👤</div>
                        我的
                    </a>
            </nav>

        
    <script>
        function setActive(element) {
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            element.classList.add('active');
        }
    </script>
</body>

</html>