软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > Blockquote实现引用文本块的引号效果

Blockquote实现引用文本块的引号效果

  使用一个<blockquote>添加两张引号图片实现引用文本引号效果。方法是分别在blockquote和blockquote:first-letter添加背景图片。

  1.html源代码

<blockquote>Hello, I am a double quote...</blockquote>

 

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]

   2.样式化blockquote

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
blockquote {
font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
width: 400px;
background: url(images/close-quote.gif) no-repeat right bottom;
padding-left: 18px;
text-indent: -18px;
}

  上面的CSS将显示close-quote.gif后括号背景图片在blockquote的右下角。注意padding-left和text-indent的取值,于是呈现如下的样子:

doublequote-2

  3.blockquote:first-letter

  现在添加first-letter:18px在开头第一个字母,让所有文本都对齐了,然后添加open-quote.gif到左上角作为首字母的背景图片。添加点CSS给首字母,让它看上去比较特别。

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

doublequote-3

  转自:http://www.cnblogs.com/island205/

    相关阅读
    栏目导航
    推荐软件