简单生活

Simple life , it's as easy as 1,2,3...

引用块(Blockquote)CSS效果

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

Blockquote在blog和论坛中使用的比较多,很多网站都可以看到。使用 <blockquote>标签可以在屏幕上用分离的块显示大段的引用。与行内引用不同,块引用可以包含块级元素,诸如<p>、<table>等。多数浏览器通常改变引用部分的页边界,以和周围的文本区分开。可选的cite属性提供了引用来源的URL,这一属性尽管未广泛被各种浏览器支持,但能使用户方便的验证引用的正确性。Blockquote标签是成对出现的,以<blockquote>开始,以</blockquote>结束,常用属性如下:
Common - 一般属性
cite - 被引用内容的URL
HTML示例代码
  1. <blockquote cite="http://www.wilf.cn/">  
  2.     <p>引用块(Blockquote)CSS效果.本文从最基本的CSS给你详细说明blockquote标签的使用.</p>  
  3. </blockquote>  
CSS代码
  1. blockquote{   
  2.   font14px italic Times, serif;   
  3.   padding-left70px;   
  4.   padding-top18px;   
  5.   padding-bottom18px;   
  6.   padding-right10px;   
  7.   background-color#dadada;   
  8.   border-top1px solid #ccc;   
  9.   border-bottom1px solid #ccc;   
  10.   margin5px;   
  11.   background-imageurl(images/openquote4.gif);   
  12.   background-positionmiddle left;   
  13.   background-repeatno-repeat;   
  14.   text-indent23px;   
  15. }   

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

更多参考:Blockquote Examples by CSS


« CNNIC网络应用排名:BLOG仅为23.5%这就是国内门户的胸怀 »
    Gravatar头像
  • quote 2.masansan
  • 2008-10-10 17:28:25 回复
  • 终于学到这玩意了,晕哦。。。
    Gravatar头像
  • quote 1.阿惠
  • 2008-1-30 15:29:58 回复
  • 请问那个引用代码格式的ubb标签是哪个啊?
    狼的旋律 于 2008-1-30 20:24:35 回复
    不是UBB标签,是FCK里的标签 ,半个引号 “

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog 1.8 Walle Build 91204

©2007-2010 Wilf.cn - 皖ICP备07003355号 - About - Archiver - TOP