西门的后花园

一个热爱网络的年轻人的博客

blockquote引用加背景引号图片

之前写博客主题的时候,也考虑到blockquote引用加背景引号图片这个问题,不过我用blockquote引用并不多,所以忽略掉了。昨天野鹤问我这个问题如何处理,我看了下他写的代码,是借鉴他搜索的DEMO。当然那DEMO上的效果肯定是对的,但我没有急于看DEMO,而是看他写的代码为什么没有实现想要的效果。

野鹤的页面很好理解,在blockquote右下角设置反引号的背景图片,在blockquote里的p标签的第一个汉字,设置正引号背景图片。我当时想,p:first-letter既然不好设置背景图片,为什么不直接在p标签设置正引号图片,然后做个padding:left,自然图片就出现在文字的左边了。

我按照他的思路和代码,帮他写了个DEMO1,效果确实出来了,也兼容了IE6/7/8、FF、chrome。

核心CSS代码:

blockquote{background:url("icon_quote_e.gif") no-repeat right bottom;}
blockquote p{padding:10px 30px;background:url("icon_quote_s.gif") no-repeat left top;}

但是想起曾经我写文章时,blockquote里面好多段落,所以有好几个p标签,那么昨天的DEMO2就会出现另外的效果。原因很简单,就是我把正引号写到了p上,而如果有好几个p标签,那么每一段开头都会有正引号,而这不是我要的效果。所以再思考更为合理的写法。

所以我就打开野鹤昨天给我的DEMO,但问题又来了,那个DEMO和WordPress的HTML结构不一样,那DEMO直接blockquote引用后面就是文字,而WordPress默认blockquote引号里会有p标签。如果我借鉴那DEMO的blockquote:first-letter写法,就出现其他问题,所以只有放弃first-letter。

跑去CSS手册里翻其他伪类,发现first-child这个伪类,他的作用是设置第一个对象。我想这应该是我要的,我把blockquote p:first-child第一个p标签加背景不就OK了么?最后实现的效果DEMO3

但是IE6却不支持first-child,所以还是没有找到最完美的方法。

这篇文章并不是告诉你blockquote引用加背景引号图片,而是告诉你一个思路,HTML和CSS每个标签和属性都是有用的,你加上任意一个属性,一定要说出你为什么要加他。不然你加他干嘛?增加代码量?

评论已关闭

分类目录