文章版权声明样式美化

效果

代码部署

子比主题：WordPress后台 >> 主题设置 >> 文章&列表 >> 文章页面 >> 将代码添加到“版权提示内容​”中

<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=442333508&site=qq&menu=yes" class="qq" target="_blank" rel="nofollow noopener">
        <i class="fa fa-qq">
        </i>
      </a>
      <a href="mailto:iLiLiKu@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>