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

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

该文本展示了一个手机端的导航栏的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>
复制全文 生成海报 前端开发 网页设计 用户界面

推荐文章

前端代码规范 - Commit 提交规范
2024-11-18 10:18:08 +0800 CST
PHP openssl 生成公私钥匙
2024-11-17 05:00:37 +0800 CST
阿里云免sdk发送短信代码
2025-01-01 12:22:14 +0800 CST
php curl并发代码
2024-11-18 01:45:03 +0800 CST
PyMySQL - Python中非常有用的库
2024-11-18 14:43:28 +0800 CST
mysql关于在使用中的解决方法
2024-11-18 10:18:16 +0800 CST
介绍Vue3的Tree Shaking是什么?
2024-11-18 20:37:41 +0800 CST
Vue3中如何处理状态管理?
2024-11-17 07:13:45 +0800 CST
robots.txt 的写法及用法
2024-11-19 01:44:21 +0800 CST
Dropzone.js实现文件拖放上传功能
2024-11-18 18:28:02 +0800 CST
JavaScript设计模式:桥接模式
2024-11-18 19:03:40 +0800 CST
Go 单元测试
2024-11-18 19:21:56 +0800 CST
程序员茄子在线接单