子比美化-文章底部版权声明样式-阿呆日记

6619字 34分钟 2025-05-09 daixbu 35 0 该作者已发布116篇文章

演示图

样式一

<div class="posts-copyright"><section id="author" class="author  with-avatar section">
  <div class="info">
    <p _msttexthash="1502586285" _msthash="58">网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
      <br>分享是一种美德，当你分享时请你附带上本文链接。
      </p>
    <div class="social">
      <a href="http://wpa.qq.com/msgrd?v=3&uin=1502586285&site=qq&menu=yes" class="qq" target="_blank" rel="nofollow noopener">
        <i class="fa fa-qq">
        </i>
      </a>
      <a href="mailto:1502586285@qq.com" class="email" title="Follow me on Twitter" target="_blank" rel="nofollow noopener">
        <i class="fa fa-envelope">
        </i>
      </a>
      <a href="" class="WeChat" title="Follow me on Facebook" target="_blank" rel="nofollow noopener">
        <i class="fa fa-wechat">
        </i>
      </a>
    </div>
  </div>
  <div class="clear">
  </div>
</section>
<style>#author {
                padding: 30px;
                position: relative;
                z-index: 1;
                text-align: center;
                background: linear-gradient(135deg, #ff005f91 10%, #0097ff 100%);
                color: #fff;
                margin-top: 15px;
                border-radius: 15px
            }

            #author div.avatar {
                position: absolute;
                left: 50%;
                top: 0;
                z-index: 2;
                width: 88px;
                margin: -44px 0 0 -44px
            }

            #author div.avatar a {
                display: block;
                border-radius: 50%;
                overflow: hidden;
                border: 4px solid #00BEC1
            }

            #author div.avatar img {
                display: block
            }

            #author #single.fullcover .featured-image .top,#author div.info,#single.fullcover .featured-image #author .top {
                font-size: 16px;
                max-width: 75%;
                margin: 0 auto
            }

            #author div.social {
                margin-top: 15px
            }

            #author div.social a {
                display: inline-block;
                margin: 0 12px;
                color: #fff;
                font-size: 22px
            }

            #author div.social a:hover {
                -webkit-transform: translateY(-2px);
                -ms-transform: translateY(-2px);
                transform: translateY(-2px)
            }

            #author .author-name {
                margin-top: 35px;
                margin-bottom: 20px;
                line-height: 1
            }

            #author #single #comments.hosted .comment .comment-author,#author .author-name a,#author .title,#author .wpcf7 label,#single #comments.hosted .comment #author .comment-author,.wpcf7 #author label {
                color: #fff
            }
</style></div>

样式二

<div class="post-copyright">
  <div class="post-copyright__author_group">
    <a class="post-copyright__author_img" href="/about.html"><img class="post-copyright__author_img_front"
        src="https://q1.qlogo.cn/g?b=qq&nk=1502586285&s=640"></a>
    <div class="post-copyright__author_name">
      星雨の博客
    </div>
    <div class="post-copyright__author_desc"></div>
  </div>
  <div class="post-tools" id="post-tools">
    <div class="post-tools-left">
      <div class="reward-link mode">
        <a class="reward-link-button" href="/rss"><i class="solitude fa-solid fa-seedling"></i>订阅</a>
      </div>
    </div>
  </div>
  <div class="social-share">
    <a class="social-share-ico icon-qq" target="_blank" rel="noopener"
      href="https://connect.qq.com/widget/shareqq/index.html?url=" title="分享到QQ">
      <i class="solitude fab fa-qq"></i>
    </a>
    <a class="social-share-ico icon-weibo" target="_blank" rel="noopener"
      href="https://service.weibo.com/share/share.php?url=" title="分享到微博">
      <i class="solitude fab fa-weibo"></i>
    </a>
    <a class="social-share-ico icon-twitter" target="_blank" rel="noopener" href="https://twitter.com/intent/tweet?url="
      title="分享到Twitter">
      <i class="solitude fab fa-twitter"></i>
    </a>
    <a class="social-share-ico icon-facebook" target="_blank" rel="noopener"
      href="https://www.facebook.com/sharer/sharer.php?u=" title="分享到Facebook">
      <i class="solitude fab fa-facebook"></i>
    </a>
    <div class="social-share-ico icon-link" onclick="copyLink()" title="复制文章链接">
      <i class="solitude fas fa-link"></i>
    </div>
    <div class="social-share-ico icon-qrcode" title="使用手机扫码阅读这篇文章">
      <i class="solitude fas fa-qrcode"></i>
      <div class="share-main">
        <div class="share-main-all">
          <div class="qrcode" data-size="100"></div>
          <div class="reward-dec">
            使用手机扫码阅读这篇文章
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post-copyright__notice">
    <span class="post-copyright-info">本文是原创文章，采用<a target="_blank" rel="noopener"
        href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0</a>协议，完整转载请注明来自<a
        href="/">星雨の博客</a></span>
  </div>
</div>
<script>
  const link = window.location.href;
  document.querySelectorAll('a.social-share-ico').forEach(function (element) {
    let href = element.getAttribute('href');
    element.setAttribute('href', href + encodeURIComponent(link));  // 将链接添加到分享地址中
  });
</script>
</script>
<div id="notyn-container"></div>
<script>
  function copyLink() {
    const link = window.location.href;

    navigator.clipboard.writeText(link)
      .then(() => {
        const notyn = document.createElement('div');
        notyn.classList.add('notyn');
        const noty1 = document.createElement('div');
        noty1.classList.add('noty1');
        const notyf = document.createElement('div');
        notyf.classList.add('notyf', 'success');
        notyf.textContent = '本文链接已复制，可贴粘';
        noty1.appendChild(notyf);
        notyn.appendChild(noty1);
        document.getElementById('notyn-container').appendChild(notyn);
        setTimeout(() => {
          notyn.style.display = 'block';
        }, 100);
        setTimeout(() => {
          notyn.style.display = 'none';
          notyn.remove();
        }, 2000);
      })
      .catch(err => {
        console.error('复制失败', err);
      });
  }
</script>

样式三