博客园首页美化----js添加分割线
引言: “工欲善其事必先利其器“,刚开始在博客园写文,也是看中了博客园css与js给用户开放的特点。这样我们就可以根据自己的喜好在一定范围内(其实js权限都已经开放了,基本上也没有范围了)对页面加以改变,所以第一步,是打造属于自己的写文小窝。 网上有些博主的首页都做的都很漂亮,也去学习了一些经验。并且网上也有许多模板可供选择,当然你也是可以选择自己从头到尾设计编码的。我认为页面简洁看着舒服就行,毕竟写文主要是记录自己,要完整的去研究样式的改变再转换成自己的知识对我这个小白来说太花时间了。 在此之前已经先改好了主题背景以及相应的标题字体样式等,觉得好像也差不多了。后来发现首页随笔之间挨的太紧了看着有点乱,打算弄个分割线隔开来看看。 分析: **(不想看分析的话可以直接跳到下面操作部分)** 鼠标移动到首页随笔部分再右键检查源,查看对应源代码结构: 起初以为每个class="day"的div里是装着一篇随笔的,但是我后面多添加了几篇篇幅较小的随笔之后,它竟然把前几篇随笔放在一个class=“day”的div里了。下面的代码结构这么对称还是很有迷惑性的(如下图)。 后来发现每个随笔最后都是class="postDesc"的div结尾,或者说每篇随笔都有唯一一个此div结尾(如下图),所以可以借用类名为postDesc的div可以作为唯一标识来操作。 总结