前言

     这段时间一直不知道写些什么文章，所以一直在很多博客网站里面打转，我发现很多博客的文章页面都有一个熊掌号主资料展示，然后我也给自己的网站弄了一个熊掌号主展示，各位可以看看本站的文章下面，那个就是熊掌号主资料展示。

     虽然说熊掌号作用已经没有以前那么大了，但是熊掌号也算是百度的一部分产业，从熊掌号的崛起到现在，百度也是花了心思的，所以说熊掌号一时半会还是不会倒闭的，熊掌号可以加速网站收录，有这一点就能留住很多站长。

     估计有很多站长也想给自己的博客文章页面弄一个熊掌号主资料展示，但是百度上面好像并没有教程，所以我才想写写这篇文章的。

教程开始

    把下面HTML代码里面的熊掌号链接、头像、网站链接等等资料全部修改成你自己的，然后把这串代码放到你网站里面，你想让熊掌号展现在哪里，就把这串代码放到哪里。

    HTML+CSS代码如下：

<!--HTML代码开始-->
<div class="xiongzhanghao panel-sort">
<div class="xiongzhanghao_touxiang"><a href="https://author.baidu.com/home/1615308608564867" rel="nofollow"><img src="https://cambrian-images.cdn.bcebos.com/b5425413daed5e96028f0b040190e593_1540478178213.jpeg" width="67px"></a></div>
<div class="xiongzhanghao_biaoti"><a href="https://author.baidu.com/home/1615308608564867" rel="nofollow"><a href="https://www.vc99.cn/author/1" title="查看关于红尘SEO博客的文章">红尘SEO博客</a></a></div>
<div class="xiongzhanghao_miaoshu"><a href="https://author.baidu.com/home/1615308608564867" rel="nofollow">分享关于网站优化以及网站常见问题的教程</a></div>
<div class="xiongzhanghao_ck"><a href="https://author.baidu.com/home/1615308608564867" rel="nofollow" target="_blank"><div class="xiongzhanghao1">查看熊掌号</div></a></div>
</div>
<!--CSS代码开始-->
<style>
.post-copyright {
    position: relative;
    font-size: 13px;
    color: #666;
    background: #fff;
    padding: 10px 15px;
    word-wrap: break-word;
    border-style: solid;
}

.xiongzhanghao {
    background-color: #fff;
    position: relative;
    z-index: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
}

.panel-sort {
    border: 1px solid #eaeaea;
    box-shadow: none;
    border-radius: 10px;
}

.xiongzhanghao_miaoshu {
    width: 90%;
    margin: auto;
    margin-top: 10px;
    font-size: 13px;
    color: #666;
    line-height: 17px;
    font-weight: 300;
}

.xiongzhanghao_ck {
    margin: 13px 0 25px;
}


.xiongzhanghao_biaoti {
    fon-size: 18px;
    color: #333;
    margin-top: 10px;
    line-height: 18px;
    font-weight: 600;
}
</style>

后记

      上面的代码我把HTML和CSS全部放在一起了，如果你觉得上面那种方法不好看的话，可以单独建立一个CSS文件，把css代码放进去，然后在调用css文件即可，如果你不会的话，还是老老实实的用第一种方法吧。

      熊掌号主资料展示的源代码我已经发在上面了，直接复制粘贴就可以使用，如果你觉得css样式不好看，你也可以自己琢磨。