网址导航黑色主题

设计要求

  1. 顶部导航栏设计

左侧为网站 Logo
右侧包含搜索框、主题切换按钮(日/夜间模式)和用户设置入口
搜索框支持实时搜索提示,快速定位网站
搜索框下方可展示搜索历史记录

  1. 主要分类导航区

采用网格布局展示各个分类
每个分类卡片包含:
分类图标(醒目且统一的设计风格)
分类名称
最近访问网站数量提示
支持拖拽排序功能
新建分类按钮位于最后一个位置

  1. 分类内容展示区

采用响应式布局,根据屏幕宽度自动调整列数
每个网站卡片包含:
网站图标
网站名称
最近访问时间
快捷操作按钮(收藏、编辑、删除)
支持列表/网格两种展示方式切换
支持按访问频率/时间排序

  1. 快捷功能区

固定在右侧或底部
显示最近访问的网站
用户自定义的快捷链接
支持快速添加新网站

  1. 底部信息区

分为左右两栏设计
左侧显示常见问题链接
右侧为用户反馈入口
包含简洁的页脚导航

  1. 交互特性

支持键盘快捷键操作
网站卡片鼠标悬停效果
平滑的动画过渡效果
操作后的状态反馈提示

  1. 自定义设置

支持分类的创建、编辑、删除
支持网站的添加、编辑、删除
支持布局方式的选择
支持主题颜色的自定义

  1. 响应式适配

桌面端:多列网格布局
平板端:适中列数的网格
移动端:单列瀑布流布局
自适应内容区域大小

第一款

图片展示

代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网址导航</title>
    <link rel="stylesheet" href="https://www.guojiz.com/view/doc/public/css/all.min.css">
    <script src="https://www.guojiz.com/view/doc/public/js/tailwindcss.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#4f46e5'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '4px',
                        DEFAULT: '8px',
                        'md': '12px',
                        'lg': '16px',
                        'xl': '20px',
                        '2xl': '24px',
                        '3xl': '32px',
                        'full': '9999px',
                        'button': '8px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
            background-color: #1a1b1e;
            color: #e5e7eb;
        }
        .container {
            width: 1440px;
            margin: 0 auto;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .category-card {
            transition: all 0.3s ease;
        }
        .category-card:hover {
            transform: translateY(-4px);
        }
        .site-card {
            transition: all 0.3s ease;
        }
        .site-card:hover {
            transform: scale(1.02);
        }
    </style>
</head>
<body class="font-sans">
    <div class="container px-8 py-6">
        <header class="flex items-center justify-between mb-12">
            <div class="flex items-center space-x-8">
                <h1 class="text-3xl font-['Pacifico'] text-primary">logo</h1>
                <div class="relative">
                    <input type="text" placeholder="搜索网站..." class="w-96 px-4 py-2 bg-gray-800 border-none !rounded-button text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary">
                    <i class="fas fa-search absolute right-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <button class="p-2 bg-gray-800 !rounded-button hover:bg-gray-700">
                    <i class="fas fa-moon text-gray-400"></i>
                </button>
                <button class="p-2 bg-gray-800 !rounded-button hover:bg-gray-700">
                    <i class="fas fa-user text-gray-400"></i>
                </button>
            </div>
        </header>

        <main>
            <section class="mb-12">
                <h2 class="text-xl font-semibold mb-6">常用分类</h2>
                <div class="grid grid-cols-6 gap-6">
                    <div class="category-card bg-gray-800 p-6 !rounded-lg">
                        <div class="w-12 h-12 mb-4 bg-gray-700 !rounded-lg flex items-center justify-center">
                            <i class="fas fa-shopping-cart text-primary text-xl"></i>
                        </div>
                        <h3 class="font-medium mb-2">购物网站</h3>
                        <p class="text-sm text-gray-400">12 个网站</p>
                    </div>
                    <div class="category-card bg-gray-800 p-6 !rounded-lg">
                        <div class="w-12 h-12 mb-4 bg-gray-700 !rounded-lg flex items-center justify-center">
                            <i class="fas fa-video text-primary text-xl"></i>
                        </div>
                        <h3 class="font-medium mb-2">视频媒体</h3>
                        <p class="text-sm text-gray-400">8 个网站</p>
                    </div>
                    <div class="category-card bg-gray-800 p-6 !rounded-lg">
                        <div class="w-12 h-12 mb-4 bg-gray-700 !rounded-lg flex items-center justify-center">
                            <i class="fas fa-book text-primary text-xl"></i>
                        </div>
                        <h3 class="font-medium mb-2">学习资源</h3>
                        <p class="text-sm text-gray-400">15 个网站</p>
                    </div>
                    <div class="category-card bg-gray-800 p-6 !rounded-lg">
                        <div class="w-12 h-12 mb-4 bg-gray-700 !rounded-lg flex items-center justify-center">
                            <i class="fas fa-gamepad text-primary text-xl"></i>
                        </div>
                        <h3 class="font-medium mb-2">游戏娱乐</h3>
                        <p class="text-sm text-gray-400">6 个网站</p>
                    </div>
                    <div class="category-card bg-gray-800 p-6 !rounded-lg">
                        <div class="w-12 h-12 mb-4 bg-gray-700 !rounded-lg flex items-center justify-center">
                            <i class="fas fa-code text-primary text-xl"></i>
                        </div>
                        <h3 class="font-medium mb-2">开发工具</h3>
                        <p class="text-sm text-gray-400">20 个网站</p>
                    </div>
                    <div class="category-card bg-gray-800 p-6 !rounded-lg cursor-pointer">
                        <div class="w-12 h-12 mb-4 bg-gray-700 !rounded-lg flex items-center justify-center">
                            <i class="fas fa-plus text-primary text-xl"></i>
                        </div>
                        <h3 class="font-medium mb-2">添加分类</h3>
                        <p class="text-sm text-gray-400">自定义分类</p>
                    </div>
                </div>
            </section>

            <section class="mb-12">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-semibold">最近访问</h2>
                    <div class="flex items-center space-x-4">
                        <button class="px-4 py-2 bg-gray-800 !rounded-button hover:bg-gray-700 text-sm">
                            <i class="fas fa-th-large mr-2"></i>网格视图
                        </button>
                        <button class="px-4 py-2 bg-gray-800 !rounded-button hover:bg-gray-700 text-sm">
                            <i class="fas fa-sort mr-2"></i>排序
                        </button>
                    </div>
                </div>
                <div class="grid grid-cols-4 gap-6">
                    <div class="site-card bg-gray-800 p-4 !rounded-lg">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 bg-blue-600 !rounded-lg flex items-center justify-center mr-3">
                                <i class="fab fa-facebook-f text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">Facebook</h3>
                                <p class="text-xs text-gray-400">社交媒体</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-sm text-gray-400">
                            <span>10 分钟前</span>
                            <div class="flex items-center space-x-2">
                                <button class="p-1.5 hover:bg-gray-700 !rounded-button">
                                    <i class="fas fa-star"></i>
                                </button>
                                <button class="p-1.5 hover:bg-gray-700 !rounded-button">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="site-card bg-gray-800 p-4 !rounded-lg">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 bg-red-600 !rounded-lg flex items-center justify-center mr-3">
                                <i class="fab fa-youtube text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">YouTube</h3>
                                <p class="text-xs text-gray-400">视频平台</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-sm text-gray-400">
                            <span>30 分钟前</span>
                            <div class="flex items-center space-x-2">
                                <button class="p-1.5 hover:bg-gray-700 !rounded-button">
                                    <i class="fas fa-star"></i>
                                </button>
                                <button class="p-1.5 hover:bg-gray-700 !rounded-button">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="site-card bg-gray-800 p-4 !rounded-lg">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 bg-blue-400 !rounded-lg flex items-center justify-center mr-3">
                                <i class="fab fa-twitter text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">Twitter</h3>
                                <p class="text-xs text-gray-400">社交媒体</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-sm text-gray-400">
                            <span>1 小时前</span>
                            <div class="flex items-center space-x-2">
                                <button class="p-1.5 hover:bg-gray-700 !rounded-button">
                                    <i class="fas fa-star"></i>
                                </button>
                                <button class="p-1.5 hover:bg-gray-700 !rounded-button">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="site-card bg-gray-800 p-4 !rounded-lg">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 bg-purple-600 !rounded-lg flex items-center justify-center mr-3">
                                <i class="fab fa-github text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">GitHub</h3>
                                <p class="text-xs text-gray-400">开发平台</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-sm text-gray-400">
                            <span>2 小时前</span>
                            <div class="flex items-center space-x-2">
                                <button class="p-1.5 hover:bg-gray-700 !rounded-button">
                                    <i class="fas fa-star"></i>
                                </button>
                                <button class="p-1.5 hover:bg-gray-700 !rounded-button">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-semibold">快捷访问</h2>
                    <button class="px-4 py-2 bg-primary !rounded-button hover:bg-secondary text-sm whitespace-nowrap">
                        <i class="fas fa-plus mr-2"></i>添加网站
                    </button>
                </div>
                <div class="grid grid-cols-6 gap-4">
                    <button class="flex flex-col items-center justify-center p-4 bg-gray-800 !rounded-lg hover:bg-gray-700">
                        <div class="w-12 h-12 bg-blue-600 !rounded-lg flex items-center justify-center mb-2">
                            <i class="fab fa-chrome text-white text-xl"></i>
                        </div>
                        <span class="text-sm">谷歌</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-4 bg-gray-800 !rounded-lg hover:bg-gray-700">
                        <div class="w-12 h-12 bg-green-600 !rounded-lg flex items-center justify-center mb-2">
                            <i class="fas fa-shopping-bag text-white text-xl"></i>
                        </div>
                        <span class="text-sm">淘宝</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-4 bg-gray-800 !rounded-lg hover:bg-gray-700">
                        <div class="w-12 h-12 bg-red-600 !rounded-lg flex items-center justify-center mb-2">
                            <i class="fas fa-play text-white text-xl"></i>
                        </div>
                        <span class="text-sm">哔哩哔哩</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-4 bg-gray-800 !rounded-lg hover:bg-gray-700">
                        <div class="w-12 h-12 bg-yellow-600 !rounded-lg flex items-center justify-center mb-2">
                            <i class="fas fa-music text-white text-xl"></i>
                        </div>
                        <span class="text-sm">网易云音乐</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-4 bg-gray-800 !rounded-lg hover:bg-gray-700">
                        <div class="w-12 h-12 bg-purple-600 !rounded-lg flex items-center justify-center mb-2">
                            <i class="fas fa-book-open text-white text-xl"></i>
                        </div>
                        <span class="text-sm">知乎</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-4 bg-gray-800 !rounded-lg hover:bg-gray-700">
                        <div class="w-12 h-12 bg-blue-500 !rounded-lg flex items-center justify-center mb-2">
                            <i class="fas fa-plus text-white text-xl"></i>
                        </div>
                        <span class="text-sm">添加</span>
                    </button>
                </div>
            </section>
        </main>

        <footer class="mt-16 py-8 border-t border-gray-800">
            <div class="grid grid-cols-2 gap-8">
                <div>
                    <h3 class="text-lg font-medium mb-4">常见问题</h3>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li><a href="#" class="hover:text-primary">如何添加新的网站?</a></li>
                        <li><a href="#" class="hover:text-primary">如何管理我的收藏?</a></li>
                        <li><a href="#" class="hover:text-primary">如何自定义分类?</a></li>
                        <li><a href="#" class="hover:text-primary">数据如何同步?</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">联系我们</h3>
                    <p class="text-sm text-gray-400 mb-4">如果您有任何问题或建议,请随时联系我们。</p>
                    <button class="px-4 py-2 bg-primary !rounded-button hover:bg-secondary text-sm whitespace-nowrap">
                        <i class="fas fa-envelope mr-2"></i>发送反馈
                    </button>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm text-gray-400">
                <p>© 2025 网址导航. 保留所有权利.</p>
            </div>
        </footer>
    </div>
</body>
</html>

第二款

截图

代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网址导航</title>
    <link rel="stylesheet" href="https://www.guojiz.com/view/doc/public/css/all.min.css">
    <script src="https://www.guojiz.com/view/doc/public/js/tailwindcss.js"></script>
<script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#9333ea'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '4px',
                        DEFAULT: '8px',
                        'md': '12px',
                        'lg': '16px',
                        'xl': '20px',
                        '2xl': '24px',
                        '3xl': '32px',
                        'full': '9999px',
                        'button': '8px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #1a1a1a;
            color: #ffffff;
            min-height: 1024px;
        }
        .search-input:focus {
            outline: none;
        }
        .category-card:hover {
            transform: translateY(-4px);
            transition: all 0.3s ease;
        }
        .site-card:hover {
            transform: scale(1.02);
            transition: all 0.3s ease;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #2d2d2d;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #4a4a4a;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="min-h-screen">
        <nav class="bg-[#2d2d2d] border-b border-gray-700">
            <div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <span class="text-2xl font-['Pacifico'] text-white">logo</span>
                </div>
                <div class="flex items-center space-x-6">
                    <div class="relative">
                        <input type="text" placeholder="搜索网站..." class="search-input bg-[#1a1a1a] text-white px-4 py-2 w-64 !rounded-button border-none text-sm">
                        <i class="fas fa-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <button class="bg-[#3a3a3a] p-2 !rounded-button hover:bg-[#4a4a4a] whitespace-nowrap">
                        <i class="fas fa-moon text-white"></i>
                    </button>
                    <button class="bg-primary px-4 py-2 !rounded-button hover:bg-primary/90 whitespace-nowrap">
                        <i class="fas fa-user-circle mr-2"></i>
                        个人中心
                    </button>
                </div>
            </div>
        </nav>

        <main class="max-w-7xl mx-auto px-4 py-8">
            <div class="grid grid-cols-4 gap-6 mb-8">
                <div class="category-card bg-[#2d2d2d] p-6 rounded-lg cursor-pointer">
                    <div class="flex items-center justify-between mb-4">
                        <i class="fas fa-shopping-cart text-2xl text-primary"></i>
                        <span class="text-xs text-gray-400">12 个网站</span>
                    </div>
                    <h3 class="text-lg font-medium mb-2">购物网站</h3>
                    <p class="text-sm text-gray-400">收录常用电商平台</p>
                </div>
                <div class="category-card bg-[#2d2d2d] p-6 rounded-lg cursor-pointer">
                    <div class="flex items-center justify-between mb-4">
                        <i class="fas fa-video text-2xl text-secondary"></i>
                        <span class="text-xs text-gray-400">8 个网站</span>
                    </div>
                    <h3 class="text-lg font-medium mb-2">视频网站</h3>
                    <p class="text-sm text-gray-400">影视娱乐平台</p>
                </div>
                <div class="category-card bg-[#2d2d2d] p-6 rounded-lg cursor-pointer">
                    <div class="flex items-center justify-between mb-4">
                        <i class="fas fa-book text-2xl text-green-500"></i>
                        <span class="text-xs text-gray-400">15 个网站</span>
                    </div>
                    <h3 class="text-lg font-medium mb-2">学习资源</h3>
                    <p class="text-sm text-gray-400">在线教育平台</p>
                </div>
                <div class="category-card bg-[#2d2d2d] p-6 rounded-lg cursor-pointer">
                    <div class="flex items-center justify-between mb-4">
                        <i class="fas fa-plus text-2xl text-gray-500"></i>
                    </div>
                    <h3 class="text-lg font-medium mb-2">新建分类</h3>
                    <p class="text-sm text-gray-400">自定义网站分类</p>
                </div>
            </div>

            <div class="mb-8">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-medium">最近访问</h2>
                    <div class="flex items-center space-x-4">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-th-large"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                </div>
                <div class="grid grid-cols-6 gap-4">
                    <div class="site-card bg-[#2d2d2d] p-4 rounded-lg">
                        <img src="https://ai-public.mastergo.com/ai/img_res/da26839e7160889b1e2f8450de92a419.jpg" class="w-12 h-12 rounded-lg mb-3">
                        <h4 class="font-medium mb-1">淘宝网</h4>
                        <p class="text-xs text-gray-400">10 分钟前访问</p>
                    </div>
                    <div class="site-card bg-[#2d2d2d] p-4 rounded-lg">
                        <img src="https://ai-public.mastergo.com/ai/img_res/1ec81a62f8d75b89e38c708ca622f91f.jpg" class="w-12 h-12 rounded-lg mb-3">
                        <h4 class="font-medium mb-1">哔哩哔哩</h4>
                        <p class="text-xs text-gray-400">30 分钟前访问</p>
                    </div>
                    <div class="site-card bg-[#2d2d2d] p-4 rounded-lg">
                        <img src="https://ai-public.mastergo.com/ai/img_res/8770fc04ce6a68cb2fd994b6f2cf940f.jpg" class="w-12 h-12 rounded-lg mb-3">
                        <h4 class="font-medium mb-1">慕课网</h4>
                        <p class="text-xs text-gray-400">1 小时前访问</p>
                    </div>
                </div>
            </div>

            <div class="bg-[#2d2d2d] rounded-lg p-6">
                <h2 class="text-xl font-medium mb-6">快捷功能</h2>
                <div class="grid grid-cols-3 gap-6">
                    <button class="flex items-center justify-center space-x-3 bg-[#3a3a3a] p-4 rounded-lg hover:bg-[#4a4a4a] whitespace-nowrap">
                        <i class="fas fa-plus text-primary"></i>
                        <span>添加新网站</span>
                    </button>
                    <button class="flex items-center justify-center space-x-3 bg-[#3a3a3a] p-4 rounded-lg hover:bg-[#4a4a4a] whitespace-nowrap">
                        <i class="fas fa-cog text-secondary"></i>
                        <span>网站管理</span>
                    </button>
                    <button class="flex items-center justify-center space-x-3 bg-[#3a3a3a] p-4 rounded-lg hover:bg-[#4a4a4a] whitespace-nowrap">
                        <i class="fas fa-folder text-green-500"></i>
                        <span>分类管理</span>
                    </button>
                </div>
            </div>
        </main>

        <footer class="bg-[#2d2d2d] mt-12">
            <div class="max-w-7xl mx-auto px-4 py-8">
                <div class="grid grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-lg font-medium mb-4">常见问题</h3>
                        <ul class="space-y-2 text-gray-400">
                            <li><a href="#" class="hover:text-white">如何添加新网站?</a></li>
                            <li><a href="#" class="hover:text-white">如何管理网站分类?</a></li>
                            <li><a href="#" class="hover:text-white">如何自定义布局?</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium mb-4">意见反馈</h3>
                        <p class="text-gray-400 mb-4">如果您有任何建议或问题,欢迎随时联系我们</p>
                        <button class="bg-primary px-4 py-2 !rounded-button hover:bg-primary/90 whitespace-nowrap">
                            <i class="fas fa-paper-plane mr-2"></i>
                            提交反馈
                        </button>
                    </div>
                </div>
                <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                    <p>© 2025 网址导航. 保留所有权利</p>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>
目录
设置
主题设置
深色模式
字体设置
字体大小
16