Q站资源网
当前位置:网站首页 > 最近更新 > 免费技术 > 网站建设 > 正文

zblog随然响应式导航网址目录主题添加VIP(网站推荐)站点代码

作者:百变鹏仔日期:2022-05-25浏览:1148分类:网站建设

    经常去一些导航网申请收录,看到他们首页都有网站推荐,VIP站点之类,觉得挺不错。

    鹏仔自己运营的乐Q导航网,没有这个功能,干脆简单写个小样式吧!

    这个功能不止可以用来做网站推荐,也可以用来当做广告位置,如果你是和鹏仔一样,同款zblog导航网源码,那直接复制就可以使用,适用于夜间模式与白天模式。

    由于这个主题自带的广告位置是移动端与PC端,所以鹏仔也直接搞了两种,一种适用于移动端的一种是PC端的。


效果预览

http://www.lqzhan.com


效果图如下所示

zblog随然响应式导航网址目录主题添加VIP(网站推荐)站点代码


PC端代码

<style>
    .tp-clear:after{
        content: '';
        display: block;
        clear: both;
        height: 0;
    }
    .tp-vip-items{
        width: 100%;
        padding: 15px 20px;
        box-sizing: border-box;
    }
    .tp-vip-items a{
        float: left;
        line-height: 30px;
        width: 14.28%;
        padding: 8px 20px;
        box-sizing: border-box;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
    }
    .tp-vip-items a img{
        margin-right: 8px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
    .tp-vip-items a span{
        display: block;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<div class="part current" style="position: relative;">
    <p class="tt sticky" style="width: 1106.67px; position: static; top: 78px;">
        <strong>网站推荐</strong>
    </p>
    <div class="tp-vip-items tp-clear">
        <a href="http://iqzhan.com" target="_black">
            <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=344225443&spec=100">
            <span>百变鹏仔</span>
        </a>
        <a href="http://iqzhan.com" target="_black">
            <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=344225443&spec=100">
            <span>百变鹏仔</span>
        </a>
    </div>
</div>


移动端代码

<style>
    .tp-clear:after{
        content: '';
        display: block;
        clear: both;
        height: 0;
    }
    .tp-vip-items{
        width: 100%;
        padding: 4px 4px;
        box-sizing: border-box;
    }
    .tp-vip-items a{
        float: left;
        line-height: 30px;
        width: 25%;
        padding: 2px 4px;
        box-sizing: border-box;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
    }
    .tp-vip-items a img{
        margin-right: 2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
    .tp-vip-items a span{
        display: block;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<div class="part current" style="position: relative;">
    <p class="tt sticky" style="width: 1106.67px; position: static; top: 78px;">
        <strong>网站推荐</strong>
    </p>
    <div class="tp-vip-items tp-clear">
        <a href="http://iqzhan.com" target="_black">
            <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=344225443&spec=100">
            <span>百变鹏仔</span>
        </a>
        <a href="http://iqzhan.com" target="_black">
            <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=344225443&spec=100">
            <span>百变鹏仔</span>
        </a>
    </div>
</div>


如需定制,可联系鹏仔QQ:344225443

免责声明:
本站资源来自互联网收集,仅供学习与交流,请勿用于商业
如有侵权、不妥之处,请联系站长并出示版权证明以便删除
侵权删帖 - 投稿等事物联系邮箱: 344225443@qq.com

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯