在WordPress文章编辑中有一个较为常用的按钮“块引用”,使用后会给选定的段落添加
blockquote标签简述:
<blockquote> 标签定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
通俗的来说,就是HTML标签语义化的体现,意思是该标签内的内容是引用的(如名言警句、软件介绍等等)而通常会有特定的前端样式。如W3C里面介绍的那样,经常会在左右两边增加外边距,还会用斜体。
而在WordPress主题中,常见的一种前端样式就是如下所示的小绿标,有点泛滥的节奏了。当然也有很多是专门用以提示的类class。
因公司业务调整,非常遗憾的向大家宣布JiaThis公司决定自2018年4月30日起关闭旗下“分享”业务
因为关停“分享”业务给您造成的不便我们深感歉意。
飞鸟的主题之前采用的就是这种风格的blockquote样式,看久了有点审美疲劳了,于是乎重新定义了一些块引用的样式,如下所示

将css代码贴出
/* 雅兮网用块引用样式样式 */ .post blockquote { font: 14px/20px italic Times, serif; color: #888; padding: 18px; background-color: #dddddd; border-left: 15px solid #666666; margin: 5px; background-image: url(img/quote_open.png); background-position: 15px 10px; background-repeat: no-repeat; text-indent: 23px; line-height: 1.8; } .post blockquote p { text-indent:23px; } .post blockquote p:last-child{ background-image: url(img/quote_close.png); background-repeat: no-repeat; background-position: bottom right; }
非常容易看出,只是给blockquote标签增加了一个背景图(开头引号),然后给最后一个p标签加了一个背景图(结尾引号);当然也可以通过伪元素::before、::after来输出这一对引号,可个人喜好了,此处暂且不贴。
当然你也可以自行调整颜色以适配你的主题,两个素材小标地址如下,请自行保存至你的主题模板根目录的img文件夹下面。
WordPress主题DIY之blockquote块引用美化 WordPress主题DIY之blockquote块引用美化
另外之前的小绿标样式也是个非常优秀的样式,可以重新定义一个类,在写文章的时候可以因势调用,让网站更具风格化!
1、网站资源均通过网络等合法渠道获取,该资料仅作为学习交流,其版权归出版社或者原作者所有,下载后请于24小时内删除,如有真实需要请支持正版!因下载本站任何资源造成的损失,全部责任由使用者本人承担!本网站不对所涉及的版权问题负责。网站售卖的价格绝对不是商品价格,而是整理资料的成本。
2、如果你是版权方,认为本文内容对您的权益有所侵犯,请联系博主, 侵删联系 的说明提交相应的证明材料,待博主进行严格地审查后,情况属实的将在三天内将本文删除或修正。
3、博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己资源文章,请原谅博主成为一个文档搬运工!
4、本站虚拟货币充值或数字资源购买后,均不可以任何理由退换!购买前(请慎重考虑)
5、附注:根据二○○二年一月一日《计算机软件保护条例》规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。
6、数字千年版权法案(DMCA)DT模板网网站接受受版权保护的内容DMCA侵权通知。
联系客服