[导读]:其实本文跟 WordPress 没什么关系, blockquote 是一个通用的标签,也叫“块引用”。blockquote 标签内的所有内容会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边...
其实本文跟 WordPress 没什么关系,blockquote 是一个通用的标签,也叫“块引用”。blockquote 标签内的所有内容会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。通俗来讲,就是 HTML 标签语义化的体现,意思是该标签内的内容是引用的(如名言警句、软件介绍等)而通常会有特定的前端样式。
如何自定义 Wordpress 里的 blockquote 样式?这里提供一个比较完整的 CSS 样式,有字体、边框、背景、引号甚至阴影等效果,以此为基础,可以根据自己的需求加以修改,所以这里留一个供参考。
blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; /*字体*/ font-family: Georgia, serif; font-size: 16px; line-height: 1.2; color: #666; text-align: justify; /*边框 - (选项)*/ border-left: 15px solid #c76c0c; border-right: 2px solid #c76c0c; /*盒子阴影 - (选项)*/ -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; } blockquote::before{ content: "\201C"; /*左双引号的Unicode编码*/ /*字体*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; /*位置*/ position: absolute; left: 10px; top:5px; } blockquote::after{ content: ""; /*如果要显示右双引号,则写 content: "\201D"; */ }
本文来自投稿,不代表微盟圈立场,如若转载,请注明出处:https://www.vm7.com/a/jc/10996.html