最新公告
  • 欢迎您光临DT模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • WordPress主题DIY之blockquote块引用美化


    在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块引用美化

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

    DT模板网上源码供源码爱好者(站长)学习研究使用。借鉴职业开发人员的代码写法,快速提升自己。部分源码需以前VIP用户分享,VIP费用供我们用来买源码,服务器开支。源码具有可复制性,部分源码被不断分享出去,但源码本身的性质不变,仅供本地环境下学习研究使用,如果你直接拿来做站,又做了违法违规的网站,请自行承担一切法律后果。
    DT模板网 » WordPress主题DIY之blockquote块引用美化

    发表评论

    • 3563会员总数(位)
    • 744资源总数(个)
    • 2本周发布(个)
    • 0 今日发布(个)
    • 591稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情