blockquote 引用的分析
平时我们在制作页面的时候，总是会碰到这样那样的引用，比如引用某人的一句话，或者引用一些名言警句，我们可以用一些引号将其特殊区分开来。现对平时遇到的一些引用的相关例子进行一些分析：
例子1：
例子2：QQ空间的一些好友说的话
下面提供四种类似的解决方法：
第一种实现方法：
用blockquote来做左边引号的背景，用p来做右边的背景
HTML代码：
<blockquote class="bq1">
<p>10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。 </p>
</blockquote>
CSS代码：
.box .bq1 {
color:#333;
background:#ccc url(images/quotebefore.gif) no-repeat 10px 10px;
text-indent:30px;
padding:10px;
margin:50px 0;
}
.box .bq1 p {
margin:0;
background:url(images/quoteafter.gif) no-repeat right bottom;
}
第二种实现方法：
用blockquote来做左边引号的背景，用一个空标签，比如span来做右边引号的背景，将span设置为left或者right的padding，然后给span加背景。
HTML代码：
<blockquote class="bq2">10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。<span></span></blockquote> CSS代码：
.box .bq2{
color:#333;
background:#ccc url(images/quotebefore.gif) no-repeat 10px 10px;
text-indent:30px;
padding:10px;
margin:50px 0;
}
.box .bq2 span {
padding:0 0 0 25px;
background:url(images/quoteafter.gif) no-repeat;
}
第三种实现方法：
用blockquote的after和before伪类来做两个前后的引号。不过ie6不支持。
HTML代码：
<blockquote class="bq3">10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。</blockquote>
CSS代码：
.box .bq3 {
background:#666;
color:#CCC;
margin:0;
padding:20px 10px;
}
.box .bq3:before, .box .bq3:after {
display:inline-block;
height:16px;
font-size:40px;
vertical-align:-16px; /*修复位置*/
line-height:20px;
content:"“";
color:#000;
}
.box .bq3:after {
content:"”";
}
第四种实现方法：
在blockquote里面增加两个标签，在标签里用文字的引号。
HTML代码：
<blockquote class="bq4"><strong>“</strong>10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。<strong>”</strong></blockquote>
CSS代码：
.box .bq4 {
color:#333;
background:#ccc;
padding:10px;
margin:50px 0;
}
.box .bq4 strong {
font-size:36px;
*font-size:28px;
font-family:Arial, Consolas;
display:inline-block;
display: -moz-inline-stack;/*firefox 2 的display inline-block */
line-height:38px;
*line-height:30px;
height:16px;
overflow:hidden;
vertical-align:-1px;
*vertical-align:6px;
color:#999999;
}
以上四种方法，只是个人总结，如果你有更好的建议或方法，可以留言共同探讨
查看demo：http://www.xunzou.com/demo/blockquote/blockquote.html
