熊掌号主资料在网站页面内展示 HTML+CSS源代码教程分享

时间:2019-05-07 分类: 技术教程评论:0 阅读:80 百度未收录

前言

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

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

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

教程开始

把下面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>