【一为主题】首页“菜单”代码分享

代码：

<section id="module_id_1" class="custom-background module-id-1" style="margin-top: 0px; margin-bottom: 0px; padding: 0px 0px 0px 0px"><div class="ioui-content switch-container home-container sidebar_no container"><div class="ioui-main"><div class="content-wrap"><div class="content-layout"><!-- 首页十宫格 -->
<style>
    .custom-container { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; margin: 0 auto; max-width: 100%; justify-content: space-around; }
    .custom-button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; background: rgba(255, 255, 255, 0.3); border-radius: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s; cursor: pointer; text-decoration: none; color: #333; flex-grow: 1; flex-basis: calc(10% - 8px); text-align: center; }
    .custom-button:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.5); }
    .custom-button:active { transform: translateY(2px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.7); }
    .custom-button img { width: 30px; height: 30px; margin-bottom: 8px; }
    .custom-button span { font-size: 12px; font-weight: bold; text-align: center; } @media (max-width: 768px) { .custom-button { flex-basis: calc(20% - 8px); }
        .custom-button img { width: 25px; height: 25px; }
        .custom-button span { font-size: 11px; } } @media (max-width: 480px) { .custom-button { flex-basis: calc(20% - 8px); } .custom-button img { width: 20px; height: 20px; } .custom-button span { font-size: 10px; } }
</style>
<div class="custom-container" id="button-container1"><a href="https://tttdh.com/blog" target="_blank" rel="nofollow" class="custom-button"><img src="https://tttdh.com/my/ico/hot.png" alt="最新博客分享" loading="lazy" width="30" height="30"><span>最新分享</span></a><a href="https://tttdh.com/aigc" target="_blank" rel="nofollow" class="custom-button"><img src="https://tttdh.com/my/ico/a.png" alt="人工智能导航" loading="lazy" width="30" height="30"><span>人工智能</span></a><a href="https://tttdh.com/tools" target="_blank" rel="nofollow" class="custom-button"><img src="https://tttdh.com/my/ico/tools.png" alt="实用工具导航" loading="lazy" width="30" height="30"><span>实用工具</span></a><a href="https://tttdh.com/world" target="_blank" rel="nofollow" class="custom-button"><img src="https://tttdh.com/my/ico/world.png" alt="海外网址导航" loading="lazy" width="30" height="30"><span>海外世界</span></a><a href="https://tttdh.com/welfares" target="_blank" rel="nofollow" class="custom-button"><img src="https://tttdh.com/my/ico/z.png" alt="热门资源导航" loading="lazy" width="30" height="30"><span>资源大全</span></a><a href="https://tttdh.com/learning" target="_blank" rel="nofollow" class="custom-button"><img src="https://tttdh.com/my/ico/x.png" alt="学习资源导航" loading="lazy" width="30" height="30"><span>学习充电</span></a><a href="https://tttdh.com/chinaz" target="_blank" rel="nofollow" class="custom-button"><img src="https://tttdh.com/my/ico/chinaz.png" alt="站长工具导航" loading="lazy" width="30" height="30"><span>站长工具</span></a><a href="https://tttdh.com/open" target="_blank" rel="nofollow" class="custom-button"><img src="https://tttdh.com/my/ico/open.png" alt="开源项目导航" loading="lazy" width="30" height="30"><span>开源项目</span></a><a href="https://tttdh.com/create" target="_blank" rel="nofollow" class="custom-button"><img src="https://tttdh.com/my/ico/create.png" alt="媒体创作导航" loading="lazy" width="30" height="30"><span>创作中心</span></a><a href="https://tttdh.com/themes" target="_blank" rel="nofollow" class="custom-button"><img src="https://tttdh.com/my/ico/k.png" alt="主题酷站导航" loading="lazy" width="30" height="30"><span>主题酷站</span></a></div>
<script>
    const buttonData1 = [
        { href: "https://tttdh.com/blog", imgSrc: "https://tttdh.com/my/ico/hot.png", alt: "最新博客分享", text: "最新分享" },
        { href: "https://tttdh.com/aigc", imgSrc: "https://tttdh.com/my/ico/a.png", alt: "人工智能导航", text: "人工智能" },
        { href: "https://tttdh.com/tools", imgSrc: "https://tttdh.com/my/ico/tools.png", alt: "实用工具导航", text: "实用工具" },
        { href: "https://tttdh.com/world", imgSrc: "https://tttdh.com/my/ico/world.png", alt: "海外网址导航", text: "海外世界" },
        { href: "https://tttdh.com/welfares", imgSrc: "https://tttdh.com/my/ico/z.png", alt: "热门资源导航", text: "资源大全" },
        { href: "https://tttdh.com/learning", imgSrc: "https://tttdh.com/my/ico/x.png", alt: "学习资源导航", text: "学习充电" },
        { href: "https://tttdh.com/chinaz", imgSrc: "https://tttdh.com/my/ico/chinaz.png", alt: "站长工具导航", text: "站长工具" },
        { href: "https://tttdh.com/open", imgSrc: "https://tttdh.com/my/ico/open.png", alt: "开源项目导航", text: "开源项目" },
        { href: "https://tttdh.com/create", imgSrc: "https://tttdh.com/my/ico/create.png", alt: "媒体创作导航", text: "创作中心" },
        { href: "https://tttdh.com/themes", imgSrc: "https://tttdh.com/my/ico/k.png", alt: "主题酷站导航", text: "主题酷站" }
    ]; const buttonContainer1 = document.getElementById('button-container1'); buttonData1.forEach(data => { const button = document.createElement('a'); button.href = data.href; button.target = "_blank"; button.rel = "nofollow"; button.classList.add('custom-button'); const img = document.createElement('img'); img.src = data.imgSrc; img.alt = data.alt; img.loading = "lazy"; img.width = 30; img.height = 30; const span = document.createElement('span'); span.textContent = data.text; button.appendChild(img); button.appendChild(span); buttonContainer1.appendChild(button); });
</script>
<!-- 首页六宫格 -->
<!-- 
<section id="module_id_3" class="custom-background module-id-3" style="margin-top: 0px; margin-bottom: 0px; padding: 0px 0px 0px 0px;margin-left:-170px;margin-top:5px">
    <div class="ioui-content switch-container home-container sidebar_no container"><div class="ioui-main">
        <div class="content-wrap">
            <div class="content-layout">
                <div class="row gutters-5">
                    <div class="col-sm-2 col-xs-4"><a href="https://tttdh.com/" target="_blank"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 45%!important;">
                        <img class="fit-cover lazyloaded lazyloadafter" data-src="https://tttdh.com/my/home_ads/ads9.webp" src="https://tttdh.com/my/home_ads/ads9.webp" alt="商务合作"></div></a>
                    </div>
                    <div class="col-sm-2 col-xs-4"><a href="https://ka.kaduoduohk.com/index?k=TzJXQS9UOGVQYnc9" target="_blank"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 45%!important;">
                        <img class="fit-cover lazyloaded lazyloadafter" data-src="https://tttdh.com/my/home_ads/ads1.webp" src="https://tttdh.com/my/home_ads/ads1.webp" alt="号卡办理"></div></a>
                    </div>

                    <div class="col-sm-2 col-xs-4"><a href="https://dt.bd.cn/#/pages/login/register?invite_code=413153" target="_blank"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 45%!important;">
                        <img class="fit-cover lazyloaded lazyloadafter" data-src="https://tttdh.com/my/home_ads/ads2.webp" src="https://tttdh.com/my/home_ads/ads2.webp" alt="网赚项目"></div></a>
                    </div>

                    <div class="col-sm-2 col-xs-4"><a href="https://ziyuanmiao.com/" target="_blank"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 45%!important;">
                        <img class="fit-cover lazyloaded lazyloadafter" data-src="https://tttdh.com/my/home_ads/ads3.webp" src="https://tttdh.com/my/home_ads/ads3.webp" alt="热门资源"></div></a>
                    </div>

                    <div class="col-sm-2 col-xs-4"><a href="https://tttdh.com/my/pic/zfbhb.webp" target="_blank"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 45%!important;">
                        <img class="fit-cover lazyloaded lazyloadafter" data-src="https://tttdh.com/my/home_ads/ads7.webp" src="https://tttdh.com/my/home_ads/ads7.webp" alt="干饭红包"></div></a>
                    </div>

                    <div class="col-sm-2 col-xs-4"><a href="https://tttdh.com/" target="_blank"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 45%!important;">
                        <img class="fit-cover lazyloaded lazyloadafter" data-src="https://tttdh.com/my/home_ads/ads8.webp" src="https://tttdh.com/my/home_ads/ads8.webp" alt="重要通知"></div></a>
                    </div>
                </div>
                <script> document.addEventListener('DOMContentLoaded', function () {
                    // 增强判断逻辑 function checkViewport() { const row = document.querySelector('.row.gutters-5'); if (!row) return; // 使用多种方式判断移动端 const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.matchMedia("(max-width: 767px)").matches; // 双重保障：同时设置display和移除内容 if (isMobile) { row.style.display = 'none'; row.innerHTML = ''; // 清空内容 row.remove(); // 直接移除元素 } } // 初始化检查 checkViewport(); // 添加窗口resize监听 window.addEventListener('resize', checkViewport);
                });
                </script>
                <style>
                    .row.gutters-5 { display: flex; width: 100%; margin: 0; }
                    .col-sm-2.col-xs-4 { position: relative; flex: 0 0 16.6667%; max-width: 16.6667%; padding: 0 5px; }
                    .graphic { position: relative; width: 100%; height: 0; padding-bottom: 45%; overflow: hidden; border-radius: 12px; }
                    .graphic::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; z-index: 1; }
                    .graphic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; border-radius: 5px; z-index: 2; }
                    .graphic:hover img { transform: scale(1.1); } @media (max-width: 767px) { .row.gutters-5 { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } }
                </style>
            </div>
        </div>
    </div>
    </div>
</section>
--></div></div></div></div></section>

电脑端：

手机端：