引用块(Blockquote)CSS效果

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

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

HTML示例代码
<blockquote cite="https://www.wilf.cn/">
<p>引用块(Blockquote)CSS效果.本文从最基本的CSS给你详细说明blockquote标签的使用.</p>
</blockquote>
CSS代码
blockquote{
 font: 14px italic Times, serif;
 padding-left: 70px;
 padding-top: 18px;
 padding-bottom: 18px;
 padding-right: 10px;
 background-color: #dadada;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 margin: 5px;
 background-image: url(images/openquote4.gif);
 background-position: middle left;
 background-repeat: no-repeat;
 text-indent: 23px;
 }

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

更多参考:Blockquote Examples by CSS

3 thoughts to “引用块(Blockquote)CSS效果”

回复 阿惠 取消回复

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