为博客文章中的引用添加引用样式

为博客文章中的引用添加引用样式

——独立观察员 2014.10.15

自古就有”天下文章一大抄，你抄我来我抄他”的说法，可见，”参考”和”借鉴”是在所难免的。尤其是在如今这个网络时代，复制粘贴毫不费劲，各种言论的来源已变得难以考据。一句话、一个意思，如果经过化用，自然可以”据为己有”，注明出处反而不太合适；但如果是整段引用，则至少应该标明是引用来的，举手之劳，净化网络环境。

我在逛论坛时，看到回帖时在自己的回帖内容上方有用引用的样式带上所回复的内容，我觉得效果不错：

然后我就想，能不能在自己的文章中加入这一特性呢？

我先是了解到有两个HTML标签是用于引用的，以下是它们的介绍：

我试用了一下，感觉效果不明显，还是两边有双引号图片的效果比较好。

稍微想一想就知道，要实现这一效果，需要至少两层div进行嵌套，双引号的一半放在一层div中，另一半放在另一个div中。

好，开动起来，先把”窃取”的双引号图片素材PS一下……

然后准备好用于嵌套的div：

<div class="q-left"><div class="q-right"> </div></div>

以及相应的CSS代码：

.q-left{background:url(http://dlgcy.com/dlgcy/pic/quote_left.png) no-repeat; padding-left:35px;padding-top:10px;}

.q-right{background:url(http://dlgcy.com/dlgcy/pic/quote_right.png) no-repeat right bottom; padding-right:32px;padding-bottom:10px;}

（事先已经把图片传到网站空间中了，大家需要的话，可以自己取，或者直接引用）

简要说明：.q-left是外围的div，背景图片在默认位置（左上角）；.q-right是内层div，背景图片放在了右下角；调整好边距。

使用方法：把CSS代码写在能影响页面的地方，我自己是写在了HeadWay主题的Live CSS区；写文章时，或之后编辑时，切换到HTML代码模式，将上面提供的div套在相关内容上即可。

效果展示：

还行吧？哈哈^_^

打赏