首页 » 建站技术 » WordPress » 浏览内容

史上最全的WP blockquote引用样式+演示


2011-02-20 00:02:09 7,903 0 发表评论 字体: 作者:C.K.
标签: cssWordPress

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

WordPress 的blockquote引用功能非常实用,可起到醒目和增强排版效果的作用,但有些主题自带的blockquote引用样式与主题有搭配或不是你想要的样式,今天有时间,我就整理了一下现在在WordPress上比较流行和常用的blockquote引用,有很多样式可以通过简单修改颜色获得。

blockquote引用样式使用方法:复制对应代码粘贴到样式文件(style.css)最底下的空白地方就可以(有blockquote引用样式的删除原有的)

blockquote引用样式1

blockquote {background: #ECF6F3; margin: 0px 25px 15px 25px; padding: 0px 25px 0px 10px; border: 5px solid #e9e3d1;}
  • #content blockquote p {margin: 0px; padding: 10px 0px 10px 0px;}
  • 效果如图:

    blockquote引用样式2

    blockquote{border-left:5px solid #DDD; margin:15px 30px 0 10px; padding-left:20px}

    效果如图:

    blockquote引用样式3

    blockquote {
  • margin: 1em 3em;
  • padding: .5em;
  • background-color: #f6ebc1; }
  • blockquote p {
  • margin: 0; }
  • 效果如图:

    blockquote引用样式4

    blockquote {
  • margin: 1em 3em;
  • padding: .5em 1em;
  • border-left: 5px solid #fce27c;
  • background-color: #f6ebc1; }
  • blockquote p {
  • margin: 0; }
  • 效果如图:

    blockquote引用样式5

    blockquote { margin: 1em 20px; padding-left: 50px; background: transparent url(quote.gif) no-repeat; }

    效果如图:

    blockquote引用样式6

    blockquote {
  • margin: 1em 2em;
  • border-left: 1px dashed #999;
  • padding-left: 1em; }
  • blockquote p:first-letter {
  • float: left;
  • margin: .2em .3em .1em 0;
  • font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
  • font-size: 220%;
  • font-weight: bold; }
  • blockquote p:first-line {
  • font-variant: small-caps; }
  • 效果如果:

    blockquote引用样式7

    blockquote {
  • color: #66a;
  • font-weight: bold;
  • font-style: italic;
  • margin: 1em 3em; }
  • blockquote p:before {
  • content: '"'; }
  • blockquote p:after {
  • content: '"'; }
  • 效果如果:

    blockquote引用样式8

    blockquote {
  • margin: 5px 10px 5px 10px;
  • padding: 15px 20px 15px 20px;
  • border-width: 1px;
  • border-style: solid;
  • border-color: #cfcfcf;
  • background: url(images/blockquote1-img.png) no-repeat;
  • }
  • 效果如图:

    blockquote引用样式9

    blockquote {
  • margin: 5px 10px 5px 10px;
  • padding: 10px 10px 10px 10px;
  • border-width: 3px;
  • border-style: solid;
  • border-color: #980000;
  • color: #9b5c5c;
  • font-size: 14px;
  • font-style: italic;
  • }
  • 效果如图:

    blockquote引用样式10

    blockquote {
  • margin: 5px 10px 5px 10px;
  • padding: 10px 60px 10px 10px;
  • border-width: 1px;
  • border-style: solid;
  • border-color: #cfcfcf;
  • background-color: #d3eefd;
  • background-image: url(images/blockquote3-img.png);
  • background-repeat: no-repeat;
  • background-position: top right;
  • font-family: Georgia;
  • font-size: 14px;
  • font-weight: bold;
  • color: #8f8f8f;
  • }
  • 效果如图:

    blockquote引用样式11

    blockquote {
  • margin: 5px 10px 5px 10px;
  • padding: 10px 120px 10px 10px;
  • border-width: 1px;
  • border-style: solid;
  • border-color: #cfcfcf;
  • background-image: url(images/blockquote4-img.png);
  • background-repeat: repeat-y;
  • font-family: Arial;
  • font-size: 14px;
  • font-weight: bold;
  • color: #efefef;
  • }
  • 效果如图:

    blockquote引用样式12

    blockquote {
  • background:#f9f9f9;
  • border-left:10px solid #ccc;
  • margin:1.5em 10px;
  • padding:.5em 10px;
  • quotes:"201C""201D""2018""2019";
  • width: 400px;
  • font: italic normal 12pt/1.2em Georgia;
  • color: #888;
  • }
  • blockquote:before {
  • color:#ccc;
  • content:open-quote;
  • font-size:4em;
  • line-height:.1em;
  • margin-right:.25em;
  • vertical-align:-.4em;
  • }
  • blockquote p {
  • display:inline;
  • }
  • 效果如图:

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4857 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13462451 位访客

      广告区 Guǎng Gào