Feng's Blog

blockquote即块引用，就是说是引用的东西，当然主要是有缩进的效果，这样就不同于其它的普通的文字了。如果不是块级的引用，则用q标签（不常用吧，这个就是给标签内的文字加引号而已）。虽然并不一定要用blockquote才能达到这种效果（可以用css对任意标签实现blockquote效果），但这用得还是比较流行的，当作愉乐&长见识&学习了！

    首先主题是：美化blockquote的显示效果，即然是引用，则就需要加上引号了，可文字效果的引号太无趣&不显眼了……

    那么就加图片吧！这样够显眼了吧。如下html代码

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

一般blockquote里的都段落，so都是<p>...</p>标签。如果是特例，那就特殊处理好了…… 这边里给思路，别的免了！

首先肯定是要加图片的了，但不应该修改html代码，因为如果是通过修改html代码来达到效果，那是不是每次都要进行修改呢？那么就用css来实现吧，这样只要导入css代码，就能一改全改了！

然后，即然不能修改html代码，只能通过标签的背景图片来实现了，难道？先制作好固定大小的有双引号的图片，再放入？那不定死了？如果分开两引号，刚背景图片只有一个，如何？真的只有一个吗？Are sure ?好吧，貌似……

那么，一个引号肯定是通过blockquote的背景图片来实现，那其他的只能通过内部的<p>标签来实现了。（如果内部没有标签的话？谁会这么无聊？……）

然后，如果你css选择器用得熟的话，就知道:first-child这个选择器的吧，就是选择第一个子元素。(貌似css3支持last-child选择器了！！~~)如：

/*选择blockquote下第一个p*/
blockquote p:first-child{}

既然选择到了第一个元素，那么左边的引号就交给它了！

/*选择blockquote下第一个p*/
blockquote p:first-child{
background:url(open-quote.gif) no-repeat scroll left top;
}

注意放在左上角以及不重复，但发现问题了，因为是背景，so文字在其上面。所以加上点padding-left:10px;（根据图片的大小来设置。）但问题对出现了，由于首个p标签加了padding-left，so等于进行了缩进，不好看，没办法，对所以p都进行padding-left的设置好了。

blockquote p{padding-left:10px;}

好，就剩下右引号了，这个简单，设置blockquote的背景图片就行了。

blockquote{
 background:url(close-quote.gif) no-repeat scroll right bottom;
 width:200px;/*记得加上个宽，不然是整个浏览器的宽*/
}

最终调整过的代码：

blockquote p{
 padding:10px 50px;
 margin:auto; /*让段落在blockquote中居中*/
 width:500px;/*必须定义宽,margin的居中才有效，
但如果文字少，看上去没居中的样子了，如最终效果*/
}
blockquote p:first-child{
 background:url(open-quote.gif) no-repeat scroll left top;
}
blockquote{
 background:url(close-quote.gif) no-repeat scroll right bottom;
 width:600px;
}

最终效果如下：

参考资料：

  blockquote引用加背景引号图片

  用途相似的标签：cite,q与blockquote

最近由于知识有所增长，所以对上面的css代码进行如下改进（改进了blockquote内部内容布局问题）

blockquote p{
 padding:10px 50px;
 /*margin:auto; 不需要了
 width:500px;*/
}
blockquote p:first-child{
 background:url(open-quote.gif) no-repeat scroll left top;
}
blockquote{
 background:url(close-quote.gif) no-repeat scroll right bottom;
 /*width:600px;不需要了*/
 display:inline-block;/*定义为内联块级元素，这样其默认宽不会是整个浏览器的宽度了
  而是适应内容的变化而动态的变化。 这步是修改的关键一步，关键在于inline-block的运用
*/
}

演示代码如下（终于能够接近完美的实现了，呵呵……）

Hello, I am a double quote...

Hello, I am a double quote...

Hello, I am a double quote...

Hello, I am a double quote...