zl程序教程

您现在的位置是:首页 >  其他

当前栏目

JustNews主题显示友链图标教程

2023-02-19 12:17:42 时间

如果你用了justnews的可视化编辑首页,将links.php中对应代码替换为以下代码;如果你用默认的首页,修改index.php对应代码:请注意修改代码中的png图片,是默认的网站图标。

<div class="sec-panel-body">
<ul class="list list-links">
<!--?php foreach($bookmarks as $link){ if($link--->link_visible=='Y'){ ?>
<li class="links"><img alt="<?php echo $link->link_name?>" src="<?php%20echo%20$link->link_image?>" onerror="javascript:this.src='https://oss.iymark.com/2021/03/2021030215074746.png'"><a <?php="" if($link-="">link_target){?>target="<!--?php echo $link--->link_target;?>" <!--?php } ?--><!--?php if($link--->link_description){?>title="<!--?php echo esc_attr($link--->link_description);?>" <!--?php } ?-->href="<!--?php%20echo%20$link--->link_url?>"<!--?php if($link--->link_rel){?> rel="<!--?php echo $link--->link_rel;?>"<!--?php } ?-->><!--?php echo $link--->link_name?></a></li>
<!--?php }} ?-->
</ul>
</div>

代码放在176-182

然后,添加如下自定义css代码:

.list-links img {
    width: 20px;
    margin-right: 5px;
}
.list-links .links {
    float: left;
    padding: 5px 5px 0 5px;
    text-align: justify;
    width: 9.5%;
    border: 4px solid #f1f1f1;
    margin: 2px;
	background:#f1f1f1;
}
@media (max-width: 1240px){
	.list-links .links {
    width: 32.2%;
}
}
@media (max-width: 991px){
	.list-links .links {
    width: 46%;
}
}
.list-links {
    display: inline-block;
}
.list-links a {
    width: 70%;
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis;
    overflow: hidden;
	line-height: inherit;
	margin:0;
}

最终的效果,可以在本站首页页脚查看

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。