为博客园添加github跳转链接

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xingoo_/article/details/86143430

为博客园添加github跳转链接

一般程序员都会有自己的github仓库,在博客园添加跳转链接,可以很方便的进行访问查看。

添加html

首先,需要在设置中添加一段html,用于跳转链接

<a class="git-link" href="https://github.com/xinghalo"></a>

449064-20170928144118169-504680974.png

修改样式

然后设置相应的样式,,可以根据自己的导航条样式,决定css是absolute的还是fixed。由于我的导航条就是固定在屏幕上的,因此github的链接也采用了fixed模式。

.git-link {
    z-index: 100;
    position: fixed;
    top: 0;
    right: 0;
    border: 0;
    height: 149px;
    width: 149px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    background-image: url(//images2015.cnblogs.com/blog/459873/201603/459873-20160317090540131-1089895320.png);
}

449064-20170928144235262-512423902.png

最终的效果

449064-20170928144319356-1614800855.png

posted @ 2017-09-28 14:44 xingoo 阅读(...) 评论(...) 编辑 收藏
展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页