简介清爽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: '#10B981',
                        secondary: '#6B7280'
                    },
                    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-image: url('/6a68d4bc95e834aa589a6d220866e105.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: #a2d3ff;
        }
        
        .search-container {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }
        
        .site-card {
            background: rgba(255, 255, 255, 0.95);
            transition: all 0.3s ease;
        }
        
        .site-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .hot-tag {
            background: #ef4444;
            padding: 2px 6px;
            border-radius: 4px;
            color: white;
            font-size: 12px;
            margin-left: 4px;
        }
    </style>
</head>
<body>
    <div class="font-sans">
        <div class="max-w-[1440px] mx-auto px-6">
            <!-- 顶部导航 -->
            <header class="py-4 flex justify-between items-center text-gray-600">
                <nav class="flex space-x-6">
    <a href="#" class="text-primary">导航首页</a>
                    <a href="#" class="hover:text-primary">导航微店</a>
                    <a href="#" class="hover:text-primary">申请提交</a>
                </nav>
                <div class="text-sm">2025年03月05日 星期三 14:32:04</div>
            </header>
            <!-- 主标题 -->
            <div class="text-center my-12">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">Guojiz导航</h1>
                <p class="text-gray-500">MoYi Navigation</p>
            </div>
            <!-- 导航菜单 -->
            <nav class="flex justify-center space-x-8 mb-8 search-engines">
                <button class="px-4 py-2 text-white bg-primary !rounded-button" data-engine="local">本站</button>
                <button class="px-4 py-2 text-gray-600 hover:text-primary" data-engine="baidu">百度</button>
                <button class="px-4 py-2 text-gray-600 hover:text-primary" data-engine="entertainment">娱乐</button>
                <button class="px-4 py-2 text-gray-600 hover:text-primary" data-engine="billiards">台球</button>
                <button class="px-4 py-2 text-gray-600 hover:text-primary" data-engine="bing">必应</button>
                <button class="px-4 py-2 text-gray-600 hover:text-primary" data-engine="coffee">咖啡啤酒</button>
                <button class="px-4 py-2 text-gray-600 hover:text-primary" data-engine="taobao">淘宝</button>
            </nav>
            <!-- 搜索框 -->
            <div class="search-container max-w-3xl mx-auto mb-8 !rounded-button">
                <div class="relative">
                    <input type="text" placeholder="搜索你感兴趣的内容..." class="w-full px-6 py-4 text-lg border-none !rounded-button focus:ring-2 focus:ring-primary focus:outline-none">
                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white px-6 py-2 !rounded-button">
    <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
            <!-- 热门关键词 -->
            <div class="flex justify-center space-x-6 mb-12 text-sm">
    <a href="#" class="text-gray-600 hover:text-primary">
    主机测评网<span class="hot-tag">hot</span>
    </a>
                <a href="#" class="text-gray-600 hover:text-primary">
    网易资源网<span class="hot-tag">new</span>
    </a>
                <a href="#" class="text-gray-600 hover:text-primary">
    免费秒赞<span class="hot-tag">hot</span>
    </a>
            </div>
            <!-- 本站推荐 -->
            <section class="mb-12">
                <h2 class="text-xl font-bold mb-6 flex items-center">
    <span class="w-1 h-6 bg-primary mr-3"></span>
    本站推荐
    </h2>
                <div class="grid grid-cols-5 gap-4">
                    <div class="site-card p-4 !rounded-lg text-center">
                        <img src="https://ai-public.mastergo.com/ai/img_res/43a0c984a68867bcaa276513a6e7fed9.jpg" alt="" class="w-15 h-15 !rounded-lg mx-auto mb-3">
                        <h3 class="font-bold mb-2">主机测评网</h3>
                        <p class="text-gray-600 text-xs">专业VPS主机测评服务</p>
                    </div>
                    <div class="site-card p-4 !rounded-lg text-center">
                        <img src="https://ai-public.mastergo.com/ai/img_res/26aceda654789d7701ebf3f4326d912a.jpg" alt="" class="w-15 h-15 !rounded-lg mx-auto mb-3">
                        <h3 class="font-bold mb-2">野草云</h3>
                        <p class="text-gray-600 text-xs">优质云服务提供商</p>
                    </div>
                    <div class="site-card p-4 !rounded-lg text-center">
                        <img src="https://ai-public.mastergo.com/ai/img_res/4d1abd2be8f349e7e2335fb7f0ca0b5d.jpg" alt="" class="w-15 h-15 !rounded-lg mx-auto mb-3">
                        <h3 class="font-bold mb-2">网络安全</h3>
                        <p class="text-gray-600 text-xs">专业安全服务平台</p>
                    </div>
                    <div class="site-card p-4 !rounded-lg text-center">
                        <img src="https://ai-public.mastergo.com/ai/img_res/012abff985eb7d35dddb65bc6dd16ba7.jpg" alt="" class="w-15 h-15 !rounded-lg mx-auto mb-3">
                        <h3 class="font-bold mb-2">数据中心</h3>
                        <p class="text-gray-600 text-xs">专业数据存储服务</p>
                    </div>
                    <div class="site-card p-4 !rounded-lg text-center">
                        <img src="https://ai-public.mastergo.com/ai/img_res/a212ee48ac2bb7ebdcf543a2cf082565.jpg" alt="" class="w-15 h-15 !rounded-lg mx-auto mb-3">
                        <h3 class="font-bold mb-2">AI科技</h3>
                        <p class="text-gray-600 text-xs">人工智能技术服务</p>
                    </div>
                </div>
            </section>
            <!-- 资源博客 -->
            <section class="mb-12">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold flex items-center">
    <span class="w-1 h-6 bg-primary mr-3"></span>
    资源博客
    </h2>
                    <a href="#" class="text-primary hover:underline">查看更多</a>
                </div>
                <div class="grid grid-cols-5 gap-4">
                    <div class="site-card p-6 !rounded-lg">
                        <img src="https://ai-public.mastergo.com/ai/img_res/503e56d253abbfdbdee76e303cc0cdb4.jpg" alt="" class="w-15 h-15 !rounded-lg mb-4">
                        <h3 class="font-bold mb-2">夜雨博客</h3>
                        <p class="text-gray-600 text-sm">专业的技术分享平台,提供最新的互联网技术资讯</p>
                    </div>
                    <div class="site-card p-6 !rounded-lg">
                        <img src="https://ai-public.mastergo.com/ai/img_res/e21d2816c258b620144f46a5d3caf85b.jpg" alt="" class="w-15 h-15 !rounded-lg mb-4">
                        <h3 class="font-bold mb-2">Guojiz资源网</h3>
                        <p class="text-gray-600 text-sm">优质资源分享平台,汇集各类精品资源</p>
                    </div>
                    <div class="site-card p-6 !rounded-lg">
                        <img src="https://ai-public.mastergo.com/ai/img_res/195775461138f40ea836eac8d4850918.jpg" alt="" class="w-15 h-15 !rounded-lg mb-4">
                        <h3 class="font-bold mb-2">安全博客</h3>
                        <p class="text-gray-600 text-sm">专注网络安全技术分享,定期更新安全资讯</p>
                    </div>
                    <div class="site-card p-6 !rounded-lg">
                        <img src="https://ai-public.mastergo.com/ai/img_res/7f4c535f16daa74655517c3cc3ca4eec.jpg" alt="" class="w-15 h-15 !rounded-lg mb-4">
                        <h3 class="font-bold mb-2">玖壹SEO</h3>
                        <p class="text-gray-600 text-sm">专业的SEO优化技术分享平台</p>
                    </div>
                    <div class="site-card p-6 !rounded-lg">
                        <img src="https://ai-public.mastergo.com/ai/img_res/f71994c6ebf32172853f4a3b771b8851.jpg" alt="" class="w-15 h-15 !rounded-lg mb-4">
                        <h3 class="font-bold mb-2">星空技术网</h3>
                        <p class="text-gray-600 text-sm">提供最新的互联网技术教程和资源</p>
                    </div>
                    <div class="site-card p-6 !rounded-lg">
                        <img src="https://ai-public.mastergo.com/ai/img_res/63528fbfa396139d963b4020749bd96e.jpg" alt="" class="w-15 h-15 !rounded-lg mb-4">
                        <h3 class="font-bold mb-2">小小琛博客</h3>
                        <p class="text-gray-600 text-sm">分享生活感悟和技术心得的个人博客</p>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.querySelector('input[type="text"]');
        const searchEngines = document.querySelectorAll('.search-engines button');
        let currentEngine = 'local';
        searchEngines.forEach(button => {
            button.addEventListener('click', function() {
                searchEngines.forEach(btn => btn.classList.remove('bg-primary', 'text-white'));
                this.classList.add('bg-primary', 'text-white');
                currentEngine = this.getAttribute('data-engine');
            });
        });
        document.querySelector('.search-container button').addEventListener('click', function() {
            const query = searchInput.value.trim();
            if (!query) return;
            let searchUrl;
            switch(currentEngine) {
                case 'baidu':
                    searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(query)}`;
                    break;
                case 'bing':
                    searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(query)}`;
                    break;
                case 'taobao':
                    searchUrl = `https://s.taobao.com/search?q=${encodeURIComponent(query)}`;
                    break;
                default:
                    searchUrl = `/?s=${encodeURIComponent(query)}`;
                    break;
            }
            window.open(searchUrl, '_blank');
        });
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.search-container button').click();
            }
        });
        // 返回顶部功能
        const backToTop = document.querySelector('.fa-arrow-up').parentElement;
        backToTop.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    });
    </script>
</body>
</html>
目录
设置
主题设置
深色模式
字体设置
字体大小
16