引用块（Blockquote）CSS效果

blockquote 标签表示引用块，这个大家都知道。Z-Blog 后台使用的 fckeditor 2.5 就有这个标签的按钮，个人曾经认为这是个鸡肋按钮。但是只要定义两个简单的 CSS，就可以大展拳脚了。还是看效果先：

Blockquote 在 blog 和论坛中使用的比较多，很多网站都可以看到。使用 <blockquote> 标签可以在屏幕上用分离的块显示大段的引用。与行内引用不同，块引用可以包含块级元素，诸如 <p>、<table> 等。多数浏览器通常改变引用部分的页边界，以和周围的文本区分开。可选的 cite 属性提供了引用来源的 URL，这一属性尽管未广泛被各种浏览器支持，但能使用户方便的验证引用的正确性。Blockquote 标签是成对出现的，以 <blockquote> 开始，以 </blockquote> 结束，常用属性如下：

Common - 一般属性

HTML 示例代码：

1
<blockquote>引用块（Blockquote）CSS效果.本文从最基本的CSS给你详细说明blockquote标签的使用.</blockquote>

CSS 代码：

1
blockquote {
2
  font:
3
    14px italic Times,
4
    serif;
5
  padding-left: 70px;
6
  padding-top: 18px;
7
  padding-bottom: 18px;
8
  padding-right: 10px;
9
  background-color: #dadada;
10
  border-top: 1px solid #ccc;
11
  border-bottom: 1px solid #ccc;
12
  margin: 5px;
13
  background-image: url(images/openquote4.gif);
14
  background-position: middle left;
15
  background-repeat: no-repeat;
16
  text-indent: 23px;
17
}

如果你也想在 z-blog 中让 blockquote 变得更有型，不妨试试上面的 CSS 代码，分别加在 ADMIN/FCKeditor/editor/css/fck_editorarea.css 以及 blog 模板的 CSS 里即可。

更多参考：Blockquote Examples by CSS