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