百变鹏仔教大家把zblog随然响应式增加名站推荐

admin 0

百变鹏仔教大家把zblog随然响应式增加名站推荐-第1张图片-新锐站长网

经常逛其他技术导航发现看到他们首页都有网站推荐,VIP站点之类,觉得挺不错。 鹏仔自己运营的乐Q技术导航,没有这个功能,干脆简单写个小样式吧!

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

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

原作者:百变鹏仔 

这个必须有点会模板修改或者CSS技术,实在不懂的话联系鹏仔、企鹅:344225443

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>


   

标签: 随然导航 自适应代码 技术导航 导航置顶 置顶站点代码

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~