一款狐狸很早的zibll子比主题页脚样式，个人审美觉得这个页脚样式还不错，整体布局进行微调和修改，删除大量冗余代码以及seo不友好的布局内容看起来更加清爽大气，喜欢的自行部署！
代码常规分两个部分，一个PHP代码，一个CSS代码，跟着我的教程操作，小白也能得心应手。
PHP代码
首先我们进入网站文件管理，并找到主题底部代码PHP文件，也就是footer.php文件。我们先到/wp-content/themes/zibll/footer.php，找到下面的代码
<footer class="footer">
<?php if (function_exists('dynamic_sidebar')) {
dynamic_sidebar('all_footer');
}?>
<div class="container-fluid container-footer">
<?php do_action('zib_footer_conter');?>
</div>
</footer>下面美化后的页脚代码把上面这段代码整段替换，覆盖掉
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28"
preserveAspectRatio="none" shape-rendering="auto" style="bottom: 4px;">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="var(--float-btn-bg)"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="var(--main-shadow)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="var(--main-border-color)"></use>
<use xlink:href="#gentle-wave" x="48" y="7" fill="var(--main-bg-color)"></use>
</g>
</svg>
<div id="colophon" class="footer" style="padding: 15px;">
<div id="Onecad_footer_ys2" class="footer-navi">
<div id="huliku_title" class="huliku_wrapper">
<div class="about widget Onecad_fl">
<div class="title">
<div class="huliku_beat_heart">
<div class="huliku_beat_left"></div>
<div class="huliku_beat_right"></div>
</div>
<h3>千里网 • WWW.BABC.CC</h3>
</div>
<div class="title-h-left "><b ><?php bloginfo('name');?></b></div>
<p style="text-indent:2em;">千里网资源库整合网课学习资料、AI教程应用分享平台。本网专注网课学习资料、AI教程运用技巧、网站源码下载等服务，「知毫厘行千里」每天解锁新知识积少成多学以致用！！</p>
</div>
<div class="navis Onecad_fl hide_sm">
<div class="navi">
<h2 class="title">关于我们</h2>
<ul>
<li>
<a href="/privacy">
隐私协议
</a>
</li>
<li>
<a href="/yhxy">
用户协议
</a>
</li>
<li>
<a href="/mzsm">
免责声明
</a>
</li>
<li>
<a href="">
联系我们
</a>
</li>
<li>
</ul>
</div>
<div class="navi">
<h2 class="title">特色功能</h2>
<ul>
<li>
<a href="">
社区圈
</a>
</li>
<li>
<a href="">
推广返佣
</a>
</li>
<li>
<a href="">
待开发..
</a>
</li>
<li>
<a href="">
网站地图
</a>
</li>
<li>
</ul>
</div>
<div class="navi">
<h2 class="title">商务服务</h2>
<ul>
<li>
<a href="">
会员服务
</a>
</li>
<li>
<a href="">
广告服务
</a>
</li>
<li>
<a href="">
其他服务
</a>
</li>
<li>
<a href="">
友情链接
</a>
</li>
</ul>
</div>
</div>
<div class="ewms widget fr hide_sm">
<ul class="huliku_clearfix">
<li>
<div>
<div class="Onecad_footer_ico"><i class="thumb "
style="background-image:url(https://img.alicdn.com/imgextra/i1/2210123621994/O1CN0123vfxk1QbIhKWfcYq_!!2210123621994.png)"></i>
</div>
<h4>AI知识</h4>
</div>
<div class="ewm-content Onecad_hide ewm-weibo">
<!--<div class="ewm-main clearfix">
<div class="thumb-div Onecad_fl">
<i class="thumb"
style="background-image:url(https://www.freeimg.cn/i/2024/03/07/65e95b587d030.png);">
</i>
</div>
<h4>
这是第一个的文字
</h4>
<h4>
<a href="">
这是第一个下面的文字
</a>
</h4>
</div>-->
</div>
</li>
<li>
<div>
<div class="Onecad_footer_ico"><i class="thumb "
style="background-image:url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01whhWGM1QbIhKiSEc2_!!2210123621994.png)"></i>
</div>
<h4>网页美化</h4>
</div>
<div class="ewm-content Onecad_hide ewm-weibo">
<!--<div class="ewm-main clearfix">
<div class="thumb-div Onecad_fl"> <i class="thumb"
style="background-image:url(https://www.babc.cc/wp-content/uploads/2025/07/4-2.jpg);"></i>
</div>
<h4>这是第二个的文字</h4>
<h4><a href="" target="_blank">这是第二个下面的文字</a></h4>
</div>-->
</div>
</li>
<li>
<div>
<div class="Onecad_footer_ico"><i class="thumb "
style="background-image:url(https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01VKBRQM1QbIhKiQ5YE_!!2210123621994.png)"></i>
</div>
<h4>资源下载</h4>
</div>
<div class="ewm-content Onecad_hide ewm-weibo">
<!--<div class="ewm-main clearfix">
<div class="thumb-div Onecad_fl"> <i class="thumb"
style="background-image: url(https://www.freeimg.cn/i/2024/03/07/65e95b15740a6.png);"></i>
</div>
<h4>这是第三个的文字</h4>
<h4><a href="">这是第三个下面的文字</a></h4>
</div>-->
</div>
</li>
</ul>
<div class="like">
<strong><?php $count_posts = wp_count_posts();echo $published_posts =$count_posts->publish;?></strong></br>
<h4 class="my-face" style="font-size:13px;margin:0 5px 2px 5px;color:#797979;margin-bottom: 10px;">精品资源等您来关注</h4>
</div>
</div>
</div>
<center>
<div class="foot-copyright">
<div class="huliku_wrapper">
<p class="foot-copyright-fl fla">Copyright © 2024 - 2025 <a href="/"
style="font-size:12px;"><?php bloginfo('name');?></a> All Rights Reserved
<a rel="nofollow"target="_blank" href="" style="font-size:12px;"></a>技术支持.
<img src="https://www.babc.cc/wp-content/themes/zibll8/pic/beian.png" width="12px" style="margin-bottom: 2px;">网安备：<a rel="nofollow" target="_blank" href="http://www.beian.gov.cn/" style="font-size:12px;">皖ICP备2025090521号-1</a> ・ <img src="https://moxingbk.com/demo/ba.svg" width="14px" style="margin-bottom: 2px;">备案号：
<a rel="nofollow" target="_blank" href="http://www.beian.gov.cn/" style="font-size:12px;">皖ICP备2025090521号-1</a>
</p>
</center>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://www.babc.cc/wp-content/themes/zibll8/css/ueo.css" type="text/css">如果不想覆盖掉子比自带的主题页脚，那么可以手动隐藏，避免后期子比主题更新更好的页脚样式可以自由切换。隐藏代码（<!-- **-->），完毕！！
css代码
没有动手能力的css代码一般直接丢入主题设置自定义css代码里面就可以，代码量较多建议文件调用比较妥。
© 版权声明
本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。
如果用于其他用途，请购买正版支持作者，谢谢！若您认为「BABC.CC」发布的内容若侵犯到您的权益，请联系站长邮箱:919172441@qq.com 进行删除处理。
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。THE END
网安备：
备案号：
暂无评论内容