!
也想出现在这里? 联系我们
全球五大数据中心,CYUN提供海外优质服务器,CN2优化线路,为您的业务推进提供强大助力

WordPress美化 - 怎么美化blockquote块引用?

使用后会给选定的段落添加blockquote标签,用以调用某些引用的语句或者强调,默认的不好看,通过这次的wordpress美化教程来美化下

在WordPress文章编辑中有一个较为常用的按钮“块引用”,使用后会给选定的段落添加<blockquote>标签,用以调用某些引用的语句或者强调。这一次的wordpress美化教程就教大家如何美化。

WordPress美化 - 怎么美化blockquote块引用?-Npcink
WordPress美化 - 怎么美化blockquote块引用位置

blockquote标签简述:

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

<blockquote> 标签定义块引用。

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

WordPress美化 - 怎么美化blockquote块引用?-Npcink
背景图片

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

WordPress美化 - 怎么美化blockquote块引用?-Npcink
WordPress美化 - 怎么美化blockquote块引用效果直角版

将css代码贴出

/* 雅兮网自用块引用样式样式 https://www.yaxi.net */
.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美化 - 怎么美化blockquote块引用?-Npcink
quote_close
WordPress美化 - 怎么美化blockquote块引用?-Npcink
quote_open

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

2018.11.7重新调整blockquote引用块样式,使其更加圆润,简洁。新样式代码如下,只修改了blockquote标签的样式,其他的不变。

WordPress美化 - 怎么美化blockquote块引用?-Npcink
WordPress美化 - 怎么美化blockquote块引用效果圆润版
blockquote {
font: 16px/20px italic Times, serif;
color: #333;
padding: 18px;
background-color: #f5f5f5;
border-left: 15px solid #666666;
border-radius: 5px;
margin: 5px;
background-image: url(../img/quote_open.png);
background-position: 15px 10px;
background-repeat: no-repeat;
text-indent: 23px;
line-height: 1.8;
}


如果你也喜欢折腾这些花里胡哨的的东西,那么还可以看看这个wordpress美化教程:

WordPress美化 - 怎么美化blockquote块引用?-Npcink
WordPress美化 - 怎么美化blockquote块引用?-Npcink

精致的鼠标点击烟花效果 - WordPress美化

当鼠标在网站上点击下,就会迸发出许多漂亮的粒子,这一款的粒子偏小一点,颜色上也是很轻快,不会有一种厚重的感觉,而且还是经过优化的哦。这一次的wordpress

人已赞赏
WP开发

WordPress 技巧:在后台显示日志浏览数

2019-2-5 20:27:16

WP开发

WordPress友情链接函数: wp_list_bookmarks() 详解

2019-2-8 0:32:42

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索