用于网站底部位置展示相关文章资源统计信息,还可以根据具体需要修改相关文本和图片,从而在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>