友情链接样式

效果图:

友情链接效果图

食用方法:

  1. 首先更换原来/usr/themes/handsome/links.php中51-86行的数据
                    <div class="tab-pane fade in" id="tab_2">
                        <div class="link-box">
                            <?php
                            $mypattern = <<<eof
  <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> 
    <div class="thumb">
        <img width="200" height="200" src={image} alt="{title}" /> 
    </div>
    <div class="content">
        <p class="title">{name}</p>
    </div>
</a>
eof;
                            Handsome_Plugin::output($mypattern, 0, "one");
                            ?>
                        </div>
                    </div>

                    <div class="tab-pane fade in" id="tab_3">
                        <div class="link-box">
                            <?php
                            $mypattern = <<<eof
  <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> 
    <div class="thumb">
        <img width="200" height="200" src={image} alt="{title}" /> 
    </div>
    <div class="content">
        <p class="title">{name}</p>
    </div>
</a>
eof;
                            Handsome_Plugin::output($mypattern, 0, "good");
                            ?>
                        </div>
                    </div>

                    <div class="tab-pane fade in" id="tab_4">
                        <div class="link-box">
                            <?php
                            $mypattern = <<<eof
  <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> 
    <div class="thumb">
        <img width="200" height="200" src={image} alt="{title}" /> 
    </div>
    <div class="content">
        <p class="title">{name}</p>
    </div>
</a>
eof;
                            Handsome_Plugin::output($mypattern, 0, "ten");
  1. 将以下代码添加至后台-开发者设置-自定义CSS
.link-box a .thumb {
    font-size: 0;
    overflow: hidden;
    background-color: #fff;
    margin: 0;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    width: 100%;
}

.link-box {
    overflow: hidden;
    padding: 4.375rem 2.1875rem 2.1875rem;
    margin: -3.125rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.link-box a{
    width: 16%;
    text-align: center;
    margin: 14px;
    border-radius: 1.3125rem;
}
.link-box a:hover{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

特此声明

本文章转载于(https://itudo.cn/handsome-links.html

Last modification:February 8th, 2020 at 05:22 pm
如果觉得我的文章对你有用,请随意赞赏