WordPress 主题 美化网站底部信息

用于网站底部位置展示相关文章资源统计信息，还可以根据具体需要修改相关文本和图片，从而在wordpress等网站中中实现各种有趣的用法，贴心的配置了一个按钮，吸引你的访客来点击

这是一款有趣的信息引导快，可以在网站需要的位置展示网站的相关资源统计信息，还可以根据具体需要修改相关文本和图片，从而在wordpress等网站中中实现各种有趣的用法，贴心的配置了一个按钮，吸引你的访客来点击。

效果展示：

代码展示：

<div class="footer-statistics">
	<div class="site-data-wp" id="J_siteDataBar" data-bg="./img/bg.png" style="background-image: url('./img/bg.png');">
	<ul class="data-items">
		<li>
			<i><img src="./img/view.png"></i><span class="srctive">361</span><strong>本站运营(天)</strong>
		</li>
		<li>
			<i><img src="./img/order_unread.png"></i><span class="srctive">106</span><strong>用户总数</strong>
		</li>
		<li>
			<i><img src="./img/download.png"></i><span class="srctive">136</span><strong>资源数(个)</strong>
		</li>
		<li>
			<i><img src="./img/refresh.png"></i><span class="srctive">4</span><strong>近7天更新(个)</strong>
		</li>
		<li>
			<i><img src="./img/check.png"></i><span class="srctive srcshujia">1000</span><strong>资源大小(GB)</strong>
		</li>
		</ul>
		<a class="btn btn-outlined" href="https://www.lurending.com/" target="_blank" rel="nofollow">Golurending</a>
					
	</div>
</div>


<style type="text/css">
	.site-data-wp {
    height: 246px;
    background-size: cover;
    background-color: #7a99f2;
    background-position: center;
    text-align: center;
    font-size: 0;
}
.site-data-wp .data-items {
    padding-top: 45px;
    padding-bottom: 32px;
    font-size: 0;
    min-height: 85px;
    margin: 0;
    padding-left: 0;
}
.g-footer ol, ul {
    list-style-type: none;
    list-style-image: none;
}
ol, ul {
    list-style: none;
}
.site-data-wp li {
    display: inline-block;
    vertical-align: top;
    width: 220px;
}
.rightList ul, ol, li {
    list-style-type: none;
}
.rightList ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}


.site-data-wp li i {
    display: inline-block;
    height: 25px;
}
.site-data-wp svg {
    fill: #abbae5;
    -webkit-transition: fill .3s cubic-bezier(.31,1,.34,1);
    transition: fill .3s cubic-bezier(.31,1,.34,1);
}


.site-data-wp li span {
    display: block;
    line-height: 48px;
    font-size: 36px;
    color: #fff;
    position: relative;
}
.site-data-wp li strong {
    display: block;
    color: #abbae5;
    font-size: 12px;
    line-height: 1;
    -webkit-transition: color .3s cubic-bezier(.31,1,.34,1);
    transition: color .3s cubic-bezier(.31,1,.34,1);
}
.site-data-wp li strong {
    display: block;
    color: #abbae5;
    font-size: 12px;
    line-height: 1;
    -webkit-transition: color .3s cubic-bezier(.31,1,.34,1);
    transition: color .3s cubic-bezier(.31,1,.34,1);
}


.site-data-wp .btn-outlined {
    min-width: 100px;
    height: 40px;
    line-height: 36px;
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
}
a:link, a:visited {
    text-decoration: none;
}


.site-data-wp .btn-outlined:active, .site-data-wp .btn-outlined:hover {
    background-color: rgba(255,255,255,.2);
}
.btn:hover {
    opacity: 1;
}
.btn:hover {
    opacity: 0.8;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.btn-outlined {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    height: 43px;
    line-height: 43px;
    min-width: 80px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    background-color: #fff;
    border-radius: 5px;
    border: 0 none;
    position: relative;
    overflow: hidden;
}
.btn {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 36px;
    outline: none;
    padding: 0 18px;
    text-align: center;
    position: relative;
}

a {
    color: #34495e;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
</style>

参考： 《cinui》 《精彩的网站信息引导卡片 – wordpress美化》