如何对blockquote进行美化?如何如何使用blockquote?

只有经受过冰霜的人,才会领悟太阳的温暖,只有饱尝人生艰辛的人,才会懂得生命的可贵。早安!

WordPress 编辑中有一个 blockquote 块引用,不知道大家是否经常使用?有些主题早已对这个 blockquote 块引用美化了,如果你的主题没有美化的,不妨试试以下这个方法(PS:如不喜欢本文的美化效果可移步学习另一种样式:WordPress 主题 DIY 之 blockquote 块引用美化好代码教程)。

如何对 blockquote 进行美化

如何你的主题还没有对 blockquote 块引用进行美化,你可以直接将以下 CSS 代码添加到当前所使用的主题的 CSS 文件最后,然后刷新即可实现 blockquote 块引用新样式。

blockquote {
font: 700 18px/1.5 Consolas,"Courier New",KaiTi,KaiTi_GB2312,FangSong_GB2312,SimHei,arial,Monaco,monospace;
margin: 1em auto;
padding: 1px;
max-width: 80%;
quotes: "\201C""\201D""\2018""\2019";
background: #f2f2f2;
border-radius: 20px;
color: #8b8b8b
}

blockquote:after,blockquote:before {
font-size: 2em;
color: #16a085;
line-height: .01em;
vertical-align: -.5em
}

blockquote:before {
content: open-quote;
top: 20px;
float: left;
position: relative;
margin-left: -.8em
}

blockquote:after {
float: right;
position: relative;
content: close-quote;
bottom: 20px;
margin-right: -.8em
}

blockquote ol {
margin: .2em;
padding: 0
}

blockquote li {
margin: .2em;
padding: 0
}

本自然段就是美化之后的 blockquote 块引用新样式,建议大家在使用的时候结合自己的主题特点对以上代码的字体、大小、颜色、间距、宽度等内容进行微调,以便让它与站点更加契合,更加完美。

WordPress 站点如何使用 blockquote

在后台编辑文章的时候,直接选择某个自然段,然后点击编辑器中的块引用按钮即可成功为该自然段添加了<blockquote>标签。具体如下图所示:

以上就是如何对blockquote进行美化?如何如何使用blockquote?。每个人都可以树立目标,但并不是每个人都能实现自己的目标。只要你付出劳动,总会得到目标的报偿。更多关于如何对blockquote进行美化?如何如何使用blockquote?请关注haodaima.com其它相关文章!

标签: blockquote