如果你用了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>
然后,添加如下自定义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;
}
最终的效果,可以在本站首页页脚查看
一、本站上的部份代码及教程来源于互联网,仅供网友学习交流。如有侵权,无意侵害您的权益,请发送邮件至xutian#ahap.cn或点击右侧 联系我们,我们将尽快处理。
二、请勿将购买的资源教程转载或分享与他人!
二、请勿将购买的资源教程转载或分享与他人!