WordPress主题DIY之blockquote块引用美化教程

投稿   雅兮网  2018-05-10 07:28:43  223 人阅读  19 条评论

在 WordPress 文章编辑中有一个较为常用的按钮“块引用”,使用后会给选定的段落添加<blockquote>标签,用以调用某些引用的语句或者强调。

WordPress主题DIY之blockquote块引用美化教程 WordPress 第1张

blockquote 标签简述:

<blockquote> 标签定义块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

通俗的来说,就是 HTML 标签语义化的体现,意思是该标签内的内容是引用的(如名言警句、软件介绍等等)而通常会有特定的前端样式。如 W3C 里面介绍的那样,经常会在左右两边增加外边距,还会用斜体。

而在 WordPress 主题中,常见的一种前端样式就是如下所示的小绿标,有点泛滥的节奏了。当然也有很多是专门用以提示的类 class。

WordPress主题DIY之blockquote块引用美化教程 WordPress 第2张

飞鸟的主题之前采用的就是这种风格的 blockquote 样式,看久了有点审美疲劳了,于是乎重新定义了一些块引用的样式,如下所示。

WordPress主题DIY之blockquote块引用美化教程 WordPress 第3张

将 css 代码贴出

  1. /* 雅兮网自用块引用样式样式 https://www.yaxi.net */
  2. .post blockquote {
  3. font14px/20px italic Times, serif;
  4. color#888;
  5. padding18px;
  6. background-color#dddddd;
  7. border-left15px solid #666666;
  8. margin5px;
  9. background-imageurl(img/quote_open.png);
  10. background-position15px 10px;
  11. background-repeatno-repeat;
  12. text-indent23px;
  13. line-height: 1.8;
  14. }
  15. .post blockquote p {
  16. text-indent:23px;
  17. }
  18. .post blockquote p:last-child{
  19. background-imageurl(img/quote_close.png);
  20. background-repeatno-repeat;
  21. background-positionbottombottom rightright;
  22. }

非常容易看出,只是给 blockquote 标签增加了一个背景图(开头引号),然后给最后一个 p 标签加了一个背景图(结尾引号);当然也可以通过伪元素::before、::after 来输出这一对引号,可个人喜好了,此处暂且不贴。

当然你也可以自行调整颜色以适配你的主题,两个素材小标地址如下,请自行保存至你的主题模板根目录的 img 文件夹下面。

WordPress主题DIY之blockquote块引用美化教程 WordPress 第4张     WordPress主题DIY之blockquote块引用美化教程 WordPress 第5张

另外之前的小绿标样式也是个非常优秀的样式,可以重新定义一个类,在写文章的时候可以因势调用,让网站更具风格化!

历史上的今天:

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,  
原文地址:https://www.yaxi.net/2018-05-07/1786.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
雅兮网

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 魏艾斯博客
    魏艾斯博客 @回复

    变化后效果还是不错的哦

  2. 西枫里博客
    西枫里博客 @回复

    车长的CSS写的就是优雅~

  3. 钟水洲
    钟水洲 @回复

    好东西就该收藏一下

  4. 99八十一
    99八十一 @回复

    不错,不错,好看的样式我都喜欢收藏了,然后还可以再DIY更多出来 [嘻嘻]

  5. 城南博客
    城南博客 @回复

    一直简简单单的

  6. 心动科技
    心动科技 @回复

    强迫症的福音啊,收藏了!闲了着手去改,哈哈哈!

  7. 大事记
    大事记 @回复

    其实我一直想要这种东西,排版起来看着很舒服,也能让访客看到重点,很棒~

  8. 里维斯社
    里维斯社 @回复

    不错,对于我这种样式强迫症来说很实用

  9. 善记事博客
    善记事博客 @回复

    哈哈,感觉用处不大

  10. 大国小事
    大国小事 @回复

    这个何用?

  11. 橙子VIP视频
    橙子VIP视频 @回复

    有了CSS代码,也可以根据自己的主题自定义相应的引用图标

  12. 城南博客
    城南博客 @回复

    还是来学习的

  13. 梁兴健
    梁兴健 @回复

    很好看! [赞]

  14. 明月登楼
    明月登楼 @回复

    这个不错,学习了!

  15. 手机赚钱
    手机赚钱 @回复

    有时间才会去做网站美化的事

  16. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    WordPress主题真丰富。

  17. 沈唁志
    沈唁志 @回复

    我已经用上了 不错 [可怜]

  18. 闲鱼
    闲鱼 @回复

    点赞,雅兮大佬就是与众不同