用图片的方式制作引用块(Blockquote)效果

作者: CodeBit     来源: CodeBit.cn     时间: 2007-06-08 23:31:39
摘要: 我们在发布文章时经常要引用他人的观点,为了更好的区分正文和引用文字,我们需要给引用文字赋予不同的样式,本文就是介绍一种让文章中出现的引用文字更加形象的方法。
归类: (X)HTML/CSS,

关键词: 样式, Blockquote, 引证, quote, 引用,


我们在发布文章时经常要引用他人的观点,为了更好的区分正文和引用文字,我们需要给引用文字赋予不同的样式,本文就是介绍一种让文章中出现的引用文字更加形象的方法。


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


CSS:
  1.  
  2. <style type="text/css">
  3.  
  4. blockquote {
  5. background: transparent url(quoleft.gif) left top no-repeat;
  6. }
  7.  
  8. blockquote div {
  9. padding: 0 40px;
  10. background: transparent url(quoright.gif) right bottom no-repeat;
  11. }
  12.  
  13. </style>
  14.  



HTML:
  1.  
  2. <blockquote cite="http://www.CodeBit.cn">
  3. <div>
  4. 在编程的过程中,我们通常都会积累很多简单、有效并且可重用的小段代码,一个简单的字符串处理函数或者一个验证邮件地址的正则表达式,又或者一个简单的文件上传类,甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间,但是时间一长,代码数量越来越多,寻找起来也耗费了不少时间。因此,本站致力于收集整理一些类似的小知识,并且努力提高文章搜索质量,一来方便大家查阅,二来也算是支持一下开源事业。
  5. </div>
  6. </blockquote>
  7.  



我们在 blockquote 下面加了一个 div 标签,然后为各自定义一个背景图片,设置好 padding 即可实现引用块(Blockquote)效果。


推荐链接:(联系 QQ :326801485)