本篇文章更新于 2021-05-05 20:41:46
本篇文章更新于 2021-05-05
效果图
教程方法
添加在footer.php文件中(替换所有内容)，注意自行修改其中链接。
<div class="footer hidden-xs">
<div class="footer__wrapper site-info" style="margin-top: 100px;">
<div class="footer__row">
<div class="footer__column hodss footer__column-products ducts pull-left mfu-5j">
<h4>热门资源分类</h4>
<div class="footer__column pull-left">
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3BjLw==" class="list__link">电脑主题</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3RhZy90dWJpYW8v" class="list__link">电脑图标</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3dhbGxwYXBlci8=" class="list__link">高清壁纸</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3RhZy9jdXJzb3JzLw==" class="list__link">鼠标指针</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3NraW5zLw==" class="list__link">软件皮肤</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3dhbGxwYXBlci8=" class="list__link">高清壁纸</a>
</div>
<div class="footer__column pull-left">
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL21vYmlsZS8=" class="list__link">手机壁纸</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2xhYnMv" class="list__link">问卷调查</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3Rvb2xzLw==" class="list__link">美化软件</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2J1YmJsZS8=" class="list__link">桌面秀</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3N0dWR5Lw==" class="list__link">美化教程</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3Rvb2xzLw==" class="list__link">美化软件</a>
</div>
</div>
<div class="footer__column hodss footer__column-products pull-left mob-hide mar-2x">
<h4 data-microtip="你继续使用本站即视为理解并同意以下协议" data-microtip-position="top">网站协议</h4>
<div class="footer__column">
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2d1aWZhbi8=" target="_blank" class="list__link">用户规范</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3N1Lw==" target="_blank" class="list__link">版权声明</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2t1YW4v" target="_blank" class="list__link">充值协议</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3ByaXZhY3kv" target="_blank" class="list__link">隐私权声明</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2NvLw==" target="_blank" class="list__link">授权及使用协议</a>
</div>
</div>
<div class="footer__column hodss footer__column-company pull-left mob-hide mar-20j">
<h4>关于我们</h4>
<div class="footer__column">
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2Fib3V0dXMv" target="_blank" class="list__link">关于致美化</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2NvbnRhY3Qv" target="_blank" class="list__link">联系方式</a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2pvaW51cy8=" target="_blank" class="list__link">加入我们</a>
</div>
</div>
<div class="footer__column footer__column-newsletter pull-right mar-1j">
<div style="" class="footer__row">
<div class="join join_simple">
<div class="join__form">
<form id="scbar_form" role="search" method="get" class="search-form" action="https://www.miuiy.com/" target="_blank">
<div class="join__field field">
<div class="field__wrap">
<input type="text" name="s" placeholder="" id="s" class="pd5 field__input ng-pristine ng-untouched ng-valid ng-empty ng-valid-email" value="">
<img src="https://www.miuiy.com/logo.png">
</div>
</div>
<button type="submit" name="post_type" sc="1" class="join__btn v6-btn" value="post">
<i class="sai feng-sousuo2"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</div> <div class="footer__row">
<div class="footer__column footer__column-cta cta-author pull-left">
<a href="/qqqun/" class="btn v6-btn v6-btn_blue">QQ群</a>
<div class="button-cta author hodss">
<span>加入艺创博客技术QQ群一起学习美化。</span>
</div>
</div>
<div class="footer__column footer__column-cta cta-affiliate gzzh pull-left mar-20l">
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly9zcGFjZS5iaWxpYmlsaS5jb20vMTU4MDEzOA==" target="_blank" data-microtip="致美化哔哩哔哩空间" data-microtip-position="top-left"><img src="https://dl.zhutix.net/2019/02/bilibili.svg"></a>
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly93ZWliby5jb20vbWZhbjE1MQ==" target="_blank" data-microtip="致美化新浪微博" data-microtip-position="top-right"><img src="https://dl.zhutix.net/2019/02/weibo.svg"></a>
<!-- <a href="/vips" class="btn v6-btn column12">申请VIP</a>
<div class="button-cta affiliate">
<span>三折抢终生会员享免锋币下载特权</span>
</div> -->
</div>
<div class="footer__column footer__column-counts pull-right">
<div class="count" data-microtip="⛔当你的锋币＜1且60天内未登录网站会被自动删除账号" data-microtip-position="top-left">
<div class="number">221679</div>
<div class="caption">用户数量</div>
</div>
<div class="count">
<div class="number">396505</div>
<div class="caption">互动数量</div>
</div>
<div class="count">
<div class="number">1332</div>
<div class="caption">素材数量</div>
</div>
<div class="count hodss">
<div class="number">18</div>
<div class="caption">作者数量</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer-bottom">
<div class="footer__row site-info">
<div class="footer__column copyright pull-left">
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5taWl0YmVpYW4uZ292LmNuLw==" target="_blank" rel="external nofollow">豫ICP备12009440号</a>
Theme by <a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly83YjIuY29t" target="_blank">柒比贰</a><!-- 18 queries 0.128s -->
</div>
<div class="footer__column payment hodss pull-right">
<!-- <i class="sai feng-anquan1"></i>
<span>技术支持:</span> -->
<img class="icon icon-v6 icon-v6-stripe teng" src="https://dl.zhutix.net/v2.1/teng.svg" title="腾讯云">
<img class="icon icon-v6 icon-v6-stripe ali" src="https://dl.zhutix.net/v2.1/ali.svg" title="阿里云">
<img class="icon icon-v6 icon-v6-stripe qiniu" src="https://dl.zhutix.net/v2.1/qiniu.svg" title="七牛云">
<img class="icon icon-v6 icon-v6-stripe youku" src="https://dl.zhutix.net/v2.1/youku.svg" title="优酷">
<img class="icon icon-v6 icon-v6-stripe alipay" src="https://dl.zhutix.net/v2.1/alipay.svg" title="支付宝">
<img class="icon icon-v6 icon-v6-stripe weixinpay" src="https://dl.zhutix.net/v2.1/weixinpay.svg" title="微信支付">
<a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly92Lnl1bmFxLmNvbS9jZXJ0aWZpY2F0ZT9kb21haW49d3d3LnpodXRpeC5jb20mYW1wO2FtcDtmcm9tPWxhYmVsJmFtcDthbXA7Y29kZT05MDAzMA==">
<img class="icon11 icon-v6 icon-v6-strip" src="https://aqyzmedia.yunaq.com/labels/label_sm_90030.png">
</a>
</div>
<div class="wencom pull-left">
Copyright © 2018 <a rel="external nofollow" target="_blank" href="https://www.miuiy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3podXRpeC5jb20v" target="_blank">zhutiX.com</a><span class="hodss">. All Rights Reserved. </span>
</div>
</div>
</div>
样式代码放到主题目录的style.css文件内，不同主题可能会有变化（柒比贰主题放置子主题内的style.css即可）。
/*底部*/
.footer {
border-bottom: 1px solid #000;
box-sizing: border-box;
left: 0;
bottom: 0;
letter-spacing: .4px;
line-height: 1.3;
z-index: 6;
position: relative;
width: 100%;
height: 405px;
background:#ffffff url(https://dl.zhutix.net/2019/01/foot-bg.png) center bottom no-repeat;
}
.mar-1j{
margin-top: 108px;
}
.mfu-5j {
margin-top: -28px;
}
.mar-2x {
margin-top: 2px;
}
.mar-20j{
margin-top: 62px;
}
.mar-20l{
margin-left: 34px;
}
.footer__wrapper {
box-sizing: border-box;
margin: 0 auto;
padding: 85px 5px 0px;
}
.footer__wrapper>.footer__row:first-of-type {
margin-bottom: 20px;
}
.pull-left {
float: left;
}
.footer__column-products {
margin-right: 95px;
}
.footer h4 {
font-size: 20px;
font-weight: 300;
line-height: 1;
color: #fff;
padding-bottom: 10px;
color: #03a9f4;
border-bottom: #03a9f4 solid 1px;
margin-bottom: 10px;
}
.footer__column-products .footer__column:not(:last-of-type) {
margin-right: 90px;
}
.footer .list__link:hover {
color: #03a9f4;
}
.footer .list__link {
color: #979b9e;
display: block;
font-size: 14px;
line-height: 2.2;
padding: 0;
}
.pull-right {
float: right;
}
.footer .join {
margin: 12px 0 12px;
width: 390px;
}
.join {
text-align: center;
}
.join__form {
position: relative;
max-width: 544px;
margin: 0 auto;
text-align: left;
}
.field {
position: relative;
}
.footer .join .field__wrap {
border: 2px solid #33353a;
}
.field__wrap {
border-radius: 5px;
}
.footer .join .field__input {
height: 54px;color: #a9a9a9;
padding: 0 15px 0 58px;
}
.field__input {
border: 0;
box-sizing: border-box;
width: 100%;
height: 64px;
padding: 10px 22px 0;
background: #17181b;
border-radius: 5px;
font-size: 14px;
color: #fff;
}
.footer button, .footer input, .footer select, .footer textarea {
color: inherit;
font: inherit;
font-family: Microsoft YaHei;
margin: 0;
outline: none;
font-size: 14px;
}
.footer .join .field__wrap img {
height: 30px;
left: 14px;
position: absolute;
top: 14px;
vertical-align: middle;
width: 30px;
}
.footer .join .field__label {
padding: 0 56px;
top: 22px;
}
.field__label {
position: absolute;
top: 25px;
padding: 0 22px;
font-size: 12px;
color: #adb7be;
pointer-events: none;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s;
}
.footer .join .join__btn {
background: transparent;
height: 38px;
right: 10px;
top: 2px;
width: unset;
}
.join__btn {
background: transparent;
box-sizing: border-box !important;
position: absolute;
top: 22px;
right: 14px;
height: 46px;
padding: 10px;
}
.v6-btn {
border: 0;
padding: 12px 20px 11px;
border-radius: 4px;
color: #fff;
letter-spacing: .4px;
outline: none;
text-transform: uppercase;
font-weight: normal;
font-size: 14px;
}
.footer .signup-cta {
color: #50595b;
font-size: 13px;
}
.footer .social__links {
margin: 15px 0 0;
}
.footer .social__links .link__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
float: left;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.link__container .feng-weibo-logo {
color: #E6162D;
}
.footer .social__link {
float: right;
}
.social__link {
margin: 0 20px;
}
.footer .social__links:after {
content: "";
display: table;
clear: both;
}
.link {
margin-bottom: 40px;
}
.link .t {
font-size: 20px;
font-weight: 300;
line-height: 1;
margin: 0;
margin-right: 20px;
width: 100%;
}
.link li {
float: left;
margin: 20px 0;
padding: 8px;
}
.link li a {
color: #adb7be;
}
.footer__wrapper>.footer__row:nth-of-type(2) {
border-top: #2e2e2e solid 1px;
padding: 30px 0;
}
.footer__wrapper>.footer__row {
width: 100%;
}
.footer__column-cta.cta-author {
margin-right: 60px;
}
a.v6-btn {
display: inline-block;
}
.v6-btn_blue {
background: #03a9f4 !important;
}
.footer .button-cta.author {
max-width: 110px;
}
.footer .button-cta span, .caption {
font-size: 12px;
line-height: 1.6;
}
.footer .button-cta.affiliate {
max-width: 120px;
}
.footer .button-cta {
color: #50595b;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 38px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: 14px;
vertical-align: middle;
}
.footer__wrapper>.footer__row:after {
content: "";
display: table;
clear: both;
}
.footer__column-counts .count:first-of-type {
margin-left: 0 !important;
}
.footer__column-counts .count {
float: left;
margin-left: 60px;
}
.footer__column-counts .count .number {
font-size: 20px;
line-height: 1;
margin-bottom: 6px;
color: #d6d6d6;
}
.footer__column-counts .count .caption {
color: #50595b;
line-height: 1;
}
.footer__wrapper>.footer__row:last-of-type {
margin-top: 25px;
}
.footer__wrapper>.footer__row {
width: 100%;
}
.copyright, .copyright a,.footer .copyright {
color: #50595b;
font-size: 13px;
}
.wencom,.copyright {
margin-bottom: 10px;
}
.wencom {
width: 100%;
color: #50595b;
font-size: 13px;
}
#footer-bottom .payment .icon-v6-lock {
margin-right: 6px;
margin-top: -3px;
}
#footer-bottom .payment .icon {
height: 16px;
vertical-align: middle;
}
#footer-bottom .icon-v6-stripe.alipay {
width: 50px;
height: auto;
}
#footer-bottom .payment .icon-v6-stripe {
margin-left: 30px;
}
.column12 {
border: 2px #ff5d8f solid !important;
color: #ff5d8f !important;
}
#footer-bottom .payment .icon-v6-stripe.weixinpay {
width: 62px;
height: auto;
}
#footer-bottom:after, .footer:after {
content: "";
display: table;
clear: both;
}
#footer-bottom .payment span {
font-size: 14px;
}
.link__container i {
font-size: 30px;
}
.join__form .feng-sousuo2 {
font-size: 24px;
color: #a9a9a9;
}
.wencom a{
color: #00e500;
}
@media screen and (max-width: 1200px) {
.ducts {
display: none;
}
}
@media screen and (max-width: 900px) {
.hodss {
display: none;
}
.join__form {
max-width: 100%;
}
.footer .join {
width: 100%;
}
.wencom {
margin-bottom: 30px;
}
.footer__column-newsletter {
float: left;
}
.footer__column-newsletter, .cta-affiliate {
margin-left: 10px;
}
.cta-author {
height: 70px;
margin-left: 10px;
}
}
#footer-bottom .icon11 {
height: 35px;
margin-left: 30px;
margin-top: -6px;
filter: grayscale(1);
}
#footer-bottom .icon11:hover {
filter: grayscale(0);
}
#footer-bottom {
bottom: 0;
left: 0;
border-top: 1px solid #444;
letter-spacing: .4px;
line-height: 1.3;
z-index: 2;
width: 100%;
background: url(https://dl.zhutix.net/2018/11/footer_bottom_bg.png) repeat-x left bottom #000;
padding: 25px 0 25px 0;
overflow: hidden;
position: relative;
}
.gzzh img {
height: 43px;
margin-right: 50px;
}
摘自：子安微记录