WordPress Blockquote 引用样式

作者: Admin 分类: 网站程序 发布时间: 2013-01-18 03:35 ė 6 没有评论

  WordPress 的 blockquote 引用功能非常实用,但有些主题自带的 blockquote 引用样式与主题搭配并不协调,或者不是我们想要的效果,这样就需要我们进行修改。本文收集整理了一些 WordPress 比较流行的 blockquote 引用,汇总在这里,供童鞋们学习参考。要提醒童鞋们的是,下面仅仅是示例代码,例如,其中一些的颜色等是可以修改的。

  要使用以下代码,你只要把相应主题样式文件(style.css)中原来的 blockquote 引用样式的删除,然后把下面的代码贴到 style.css 最底下的空白处即可。

  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;
  contentpen-quote;
  font-size:4em;
  line-height:.1em;
  margin-right:.25em;
  vertical-align:-.4em;
  }
  blockquote p {
  display:inline;
  }

  效果如图:
  blockquote 引用样式 13

  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引用样式 14

  blockquote {
  font-family:’Century Gothic’, “Microsoft Yahei”, Monaco, Consolas, “Andale Mono”, “DejaVu Sans Mono”, monospace;
  }
  blockquote {
  border-left:5px solid #c00909;
  margin:10px 0px 10px 0px;
  padding-top:5px;
  padding-left:20px;
  padding-bottom:5px;
  background:#f1f1f1;
  color:#333;
  border-top:1px solid #DCDCDC;
  border-right:1px solid #DCDCDC;
  border-bottom:1px solid #DCDCDC;}

  效果如图:
  blockquote 引用样式 15

  blockquote {
  background:#f9f9f9;
  border-left:10px solid #ccc;
  margin:1.5em 10px;
  padding:.5em 10px;
  quotes:”201C””201D””2018″”2019″;
  }
  blockquote:before {
  color:#ccc;
  content:open-quote;
  font-size:4em;
  line-height:.1em;
  margin-right:.25em;
  vertical-align:-.4em;
  }
  blockquote p {
  display:inline;
  }

  效果如图:

本文出自微歌,转载时请注明出处及相应链接。

本文永久链接: http://wego2.com/WordPress-Blockquote-yin-yong-yang-shi.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Ɣ回顶部