blockquote 引用的分析
平时我们在制作页面的时候,总是会碰到这样那样的引用,比如引用某人的一句话,或者引用一些名言警句,我们可以用一些引号将其特殊区分开来。现对平时遇到的一些引用的相关例子进行一些分析:
例子1:![](http://www.xunzou.com/blog/upload/2010/11/201011270013275611.jpg)
例子2:QQ空间的一些好友说的话
![](http://www.xunzou.com/blog/upload/2010/11/201011270014181010.jpg)
下面提供四种类似的解决方法:
第一种实现方法:
用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