WordPress底部页脚 美化底部页脚纯代码

源码介绍

添加在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>

CSS代码

将以下代码放到主题目录的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;
}

源码属性

整站源码 、完全开源

演示系统

源码截图

WordPress底部页脚 美化底部页脚纯代码
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!

3. 不得使用于非法商业用途,特别是游戏类源码仅用于学习研究,不得违反国家法律。否则后果自负!

4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.tzhuti.com或tzhuti.com或3128469470或248125469",具体请看下方【常见问题】如遇到无法解压的请联系管理员!
囤主题-专注帮助站长建站、源码导购、整站源码及最新虚拟主题资源分享! » WordPress底部页脚 美化底部页脚纯代码

发表评论