详情
评论
问答

子比主题-快速导航链接

 

图片[1]|子比主题-快速导航链接|风雪源码

<div class="soft-cat-logo">
    <a href="/yxsx"><span>
            <picture class="picture">
                <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023355196.png"><img class="jitheme-radius" 
                    src="https://img.dmguo.cn/2025/02/20250212023355196.png">
            </picture>
        </span><em>游戏资源</em>
    </a><a href="/7b2"><span>
            <picture class="picture">
                <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023345786.png"><img class="jitheme-radius" 
                    src="https://img.dmguo.cn/2025/02/20250212023345786.png">
            </picture>
        </span><em>主题美化</em>
    </a><a href="/forums"><span>
            <picture class="picture">
                <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023352466.png"><img class="jitheme-radius" 
                    src="https://img.dmguo.cn/2025/02/20250212023352466.png">
            </picture>
        </span><em>写真美图</em>
    </a><a href="/ysnes"><span>
            <picture class="picture">
                <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023348464.png"><img class="jitheme-radius" 
                    src="https://img.dmguo.cn/2025/02/20250212023348464.png">
            </picture>
        </span><em>图集画册</em>
    </a><a href="/nuejw"><span>
            <picture class="picture">
                <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023407573.png"><img class="jitheme-radius" 
                    src="https://img.dmguo.cn/2025/02/20250212023407573.png">
            </picture>
        </span><em>次元社</em>
    </a><a href="/windows"><span>
            <picture class="picture">
                <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023401687.png"><img class="jitheme-radius"  src="https://img.dmguo.cn/2025/02/20250212023401687.png">
            </picture>
        </span><em>软件工具</em>
    </a><a href="/wordpress"><span>
            <picture class="picture">
                <source type="image/webp"
                    srcset="https://img.dmguo.cn/2025/02/20250212023404503.png"><img class="jitheme-radius" src="https://img.dmguo.cn/2025/02/20250212023404503.png">
            </picture>
        </span><em>wp主题</em>
    </a>
</div>
<style>
    .jitheme_item .picture>img {
        width: 100%;
        height: 80px;
    }

    .jitheme-radius,
    .post-thumb {
        border-radius: 10px;
    }

    .soft-cat-logo img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
        border: 0;
        vertical-align: text-top;
    }

    .soft-cat-logo {
        display: flex;
        margin-top: 60px;
        text-align: center;
        justify-content: center;
    }

    .soft-cat-logo a {
        position: relative;
        display: flex;
        padding: .5rem .8rem;
        max-height: 60px;
        color: #1d2129;
        font-size: 12px;
        flex-direction: column;
        align-items: center;
    }

    .soft-cat-logo a span {
        position: relative;
        display: inline-block;
        margin-bottom: 5px;
        width: 70px;
        height: 70px;
        border-radius: .42857143em;
        background-size: contain;
        background-repeat: no-repeat;
        opacity: .8;
    }

    .soft-cat-logo a:hover span:before {
        opacity: 1;
    }

    .soft-cat-logo a span:before {
        position: absolute;
        bottom: -6px;
        left: 50%;
        top: 59%;
        display: block;
        width: 0;
        height: 0;
        border-right: 5px solid transparent;
        border-bottom: 6px solid #ef0053;
        border-left: 5px solid transparent;
        content: "";
        opacity: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .soft-cat-logo a em {
        position: absolute;
        bottom: -19px;
        display: none;
        padding: 4px 8px;
        border-radius: 4px;
        background: #ef0053;
        color: #fff;
        font-size: 13px;
    }

    .soft-cat-logo a:hover em {
        display: inline-block;
    }

    .soft-cat-logo a:hover span {
        overflow: visible;
        opacity: 1;
    }

    /* 新增:手机端隐藏该区域 */
    @media screen and (max-width: 767px) {
        .soft-cat-logo {
            display: none !important;
        }
    }
</style>

 

20251210195154197
20251210195154284
文章很赞,支持一下吧~ 还没有人为TA充电
为TA充电
还没有人为TA充电
© 版权声明
THE END
喜欢就支持一下吧
点赞12打赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容