有朋自远方来,不亦乐乎。
纯代码给博客添加头像装饰
原创 橘子书  16 Dec/22 1.17K A+

博客永远只是兴趣,所以在更新方面我一直比较随性。

今天特地放空自己,折腾了一会代码。给自己的博客写一个小功能,毕竟过年过节的,添点小装饰品,比较讨喜嘛。

言归正传,此次的代码非常的简单,难的就只有两个地方:需自行调试,需自行判断代码的安放位置。

部署代码

<div style="自行书写css样式"><img style="css样式" src="图片链接"></img></div>

具体放在哪里,我就不说了,因为每个主题的书写习惯不一样,不能概论。

不过,不外乎是logo的位置(header.php)、评论的位置(comment-template或functions.php)、博主介绍的位置(这个更不好说,五花八门!)。

css解释

left:10px; 距离左边10px
top:10px; 高度下移10px;
z-index:1; 图层,最下层写-1,最上层写9999;
position:absolute; 绝对定位;
height:120px; 图片高度;
width:120px; 图片宽度;
!important:强调‘重要的’,避免css不起效果。

根据这些css介绍,自行填写第一步的css样式。

教程(20170327)

补充通过伪元素(:before 和 :after),为网站logo添加圣诞帽的教程。

它的使用方法更简单,又不用改动任何文件,只需在style.css添加如下代码:

/*圣诞帽*/
.logo:after{
   content:url(/*素材图片url*/);
   display:block;
   position:absolute;
   top:/*根据实际情况修改定位*/px;
   left:/*根据实际情况修改定位*/px;
}

记得修改里面的参数。

图片素材

圣诞帽素材

圣诞帽

DEMO

总结

这个小功能,其实去年圣诞节的时候,我就想着写进主题。然而,那个时候我对代码不熟悉,特别是css几乎不会写。导致根本没有预期的效果,索性就放弃了。

其实吧,还有另一种写法,就是部署代码的时候,将图片素材写进css,大致如下:

    background-image: url("images/hat0.png");图片链接
    background-repeat: no-repeat;图片不重复
    background-size: cover;保持图片比例

没然后了,END。

阅读全文

该文章还没有任何评论,你来说两句吧.

发表评论

莫慌,小狮子正在努力加载评论...