为博客文章中的引用添加引用样式
——独立观察员 2014.10.15
自古就有”天下文章一大抄，你抄我来我抄他”的说法，可见，”参考”和”借鉴”是在所难免的。尤其是在如今这个网络时代，复制粘贴毫不费劲，各种言论的来源已变得难以考据。一句话、一个意思，如果经过化用，自然可以”据为己有”，注明出处反而不太合适；但如果是整段引用，则至少应该标明是引用来的，举手之劳，净化网络环境。
我在逛论坛时，看到回帖时在自己的回帖内容上方有用引用的样式带上所回复的内容，我觉得效果不错：
然后我就想，能不能在自己的文章中加入这一特性呢？
我先是了解到有两个HTML标签是用于引用的，以下是它们的介绍：
<blockquote>
http://www.w3school.com.cn/tags/tag_blockquote.asp
<blockquote>标签定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
如需把页面作为 strict XHTML 进行验证，那么 <blockquote> 元素必须包含块级元素，比如<p>元素。
<q>
http://www.w3school.com.cn/tags/tag_q.asp
<q> 标签定义短的引用。
浏览器经常在引用的内容周围添加引号。
<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签。
我试用了一下，感觉效果不明显，还是两边有双引号图片的效果比较好。
稍微想一想就知道，要实现这一效果，需要至少两层div进行嵌套，双引号的一半放在一层div中，另一半放在另一个div中。
好，开动起来，先把”窃取”的双引号图片素材PS一下……
然后准备好用于嵌套的div：
<div class="q-left"><div class="q-right"> </div></div>
以及相应的CSS代码：
.q-left{background:url(https://dlgcy.com/dlgcy/pic/quote_left.png) no-repeat; padding-left:35px;padding-top:10px;}
.q-right{background:url(https://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套在相关内容上即可。
效果展示：
还行吧？哈哈^_^
原创文章，转载请注明： 转载自 独立观察员(dlgcy.com)
本文链接地址: [为博客文章中的引用添加引用样式](https://dlgcy.com/add-quote-style-for-blog/)
关注微信公众号 独立观察员博客（DLGCY_BLOG） 第一时间获取最新文章
发表评论