友链样式修改,效果如本站友链展示

XiaoFu 122 0

动次,打次
动次,打次
动次,打次
动次,打次

轰轰响雷 - 不下雨 [ 啦啦啦啦啦... ]
今天对主题做了部分内容修改

打开links.php 找到绿色框内容替换以下代码即可

红色框代码如下

新建一个CSS文件,CSS内容如下复制粘贴到新建的CSS中即可:

selection {background: #0cc;color: #fff;text-shadow: none;float: left;}

.links-main {
    letter-spacing: -.8em;
   float: left;
}

.grouping-title {
    letter-spacing: 0;
    margin-bottom: 6px
}
.links-main .item {
    display: inline-block;
    letter-spacing: 0;
    margin-right: 20px;
    width: 280px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #e1e8ed;
}

.links-main .link-bg {
    position: relative;
    height: 90px;
    padding: 0 1em
}

.links-main .link-bg:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5)
}

.links-main .link-bg .link-avatar {
    position: absolute;
    bottom: -50px;
    border-radius: 100%;
}

.links-main .link-bg .link-avatar img {
    border-radius: 100%
}

.links-main .meta {
    padding: .9em 1em;
    text-align: right
}

.links-main .info {
    color: #525766;
    padding: 0 1em 1em
}

.links-main .info .name {
    font-weight: 600;
    font-size: 16px
}

.links-main .info .description {
    font-weight: 600;
    font-size: 12px
}

.bgm {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: block
}

#button, .button a {
    background: linear-gradient(left , rgba(43,158,229,0.89),rgba(247,91,29,0.94) 100%);
    background: -o-linear-gradient(left , rgba(43,158,229,0.89),rgba(247,91,29,0.94) 100%);
    background: -ms-linear-gradient(left , rgba(43,158,229,0.89),rgba(247,91,29,0.94) 100%);
    background: -moz-linear-gradient(left , rgba(43,158,229,0.89),rgba(247,91,29,0.94) 100%);
    background: -webkit-linear-gradient(left , rgba(43,158,229,0.89),rgba(247,91,29,0.94) 100%);
}


#button, .button a {
    color: #FFFFFF;
    background-color: #898C7B;
}

#button, .button a {
    opacity: .8;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    line-height: 1;
    padding: 10px 14px;
    border-radius: 999em;
    margin: 0;
    appearance: none;
    cursor: pointer;
    border: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}
@media only screen and (max-width:900px) {
    #mobilebar {
        display: block
    }

    .links-main .item {
        margin-right: 1%;
        width: 32.1%;
        box-sizing: border-box;
    }
}
@media only screen and (max-width:900px) {
    #mobilebar {
        display: block
    }

    .links-main .item {
        margin-right: 1%;
        width: 32.1%;
        box-sizing: border-box;
    }

}
@media only screen and (max-width:640px) {

    .links-main .item {
        width: 100%;
        margin-right: 0;
    }
}
svg {
    width: 10px;
    height: 10px;
}

引用CSS样式

补充:样式引入后链接不正常显示,应该是优先级问题(不懂可百度CSS优先级)
如和本站主题一致可放入component/header.php文件本地css静态资源下

引用CSS后实现效果,修改完成,记录于此。
[ 修改内容由林阿三提供 www.h-best.cn ]

发表评论 取消回复
表情 图片 链接 代码

  1. YIR
    YIR Lv 1

    这么嗨的吗?

  2. 学习笔记Blog

    没有看懂!(´இ皿இ`)

  3. 梁兴健
    梁兴健 Lv 1

    css文件没贴出来啊。。。 ::aru:sweat::

    • Lore°
      Lore° Lv 6

      @梁兴健没有呢,我引用的别人的网站的CSS 嘿嘿 我把地址发给你邮箱

  4. 林阿三
    林阿三 Lv 2

    小老板

  5. verkey
    verkey Lv 1

    OωO很风骚!

  6. 芭比
    芭比 Lv 1

    骚气十足

  7. Rinvay
    Rinvay Lv 2

    话说很HI啊

  8. 小彦
    小彦 Lv 1

    打个真的很好的广告 ::aru:proud:: ——友链欢迎使用『个站商店』提供的,http://storeweb.cn/column/one/1

    • Lore°
      Lore° Lv 6

      @小彦可以,我先试试,。 那样网站内加友联就方便了

  9. 绅士福利

    挺好的哈。。不错不错

分享
微信
微博
QQ