html css blockquote,css之blockquote美化

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

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

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

Hello, I am a double quote...

Hello, I am a double quote...

Hello, I am a double quote...

Hello, I am a double quote...

一般blockquote里的都段落，so都是

...

标签。如果是特例，那就特殊处理好了…… 这边里给思路，别的免了！

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

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

那么，一个引号肯定是通过blockquote的背景图片来实现，那其他的只能通过内部的

标签来实现了。(如果内部没有标签的话？谁会这么无聊？……)

然后，如果你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;

}

最终效果如下：

Hello, I am a double quote...

Hello, I am a double quote...

Hello, I am a double quote...

Hello, I am a double quote...

最近由于知识有所增长，所以对上面的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...