为下载的迅睿cms模板前端增加友情链接版块

模板制作 2024-10-28 20:59:42 1

无需魔法，免费体验ChatGPT-4 / MJ绘图等AI大模型！AI问答、写文案、做表格、绘图、写脚本、写代码...

有时候在平台遇到很喜欢的模板，但是模板前端没有友情连接板块，如果有一定前端基础的朋友，可以自己新增一个板块调用友情连接。不懂前端或者懒得写的朋友，可以使用本篇教程分享的迅睿cms模板前端增加友情连接板块的通用代码。

HTML前端代码

将以下HTML代码复制粘贴到首页模板文件（index.html）的</body>前面即可。

<div class="link_box">
  <div class="container"> <span class="link_title">友情链接</span> 
  <span class="link_list">
      <?php $mysite=dr_site_value('yqlj');?>
      {php $mval = $mysite;}
        {loop $mval $v}
        <a href="{$v[2]}" target="_blank">{$v[1]}</a>
        {/loop}
  </span> 
  </div>
</div>

CSS样式代码

将以下CSS样式代码复制粘贴到首页调用的任意CSS样式文件中即可。

/*友情链接板块样式*/
.link_box{
    background-color: #000000;
    padding: 20px 0px 20px 0px;
    text-align: center;
    color: #fff;
    font-size: 13px;
}
.link_box a{
    color: #fff;
    padding:0px 0px 0px 10px;
    font-size: 13px;
    text-decoration: none;
}
.link_box a:hover{
    text-decoration: none;
    color:#002B57;
}

.link_title{
    font-size: 13px;
    margin-right: -6px;
}
.link_title:after{
    content:"：";
}

/* 移动端隐藏友情连接板块 */
@media only screen and (min-width: 320px) and (max-width: 991px) {
.link_box{
    display: none;
}
}