冰剑'blog

平时我们在制作页面的时候，总是会碰到这样那样的引用，比如引用某人的一句话，或者引用一些名言警句，我们可以用一些引号将其特殊区分开来。现对平时遇到的一些引用的相关例子进行一些分析：

第一种实现方法：

用blockquote来做左边引号的背景，用p来做右边的背景

<blockquote class="bq1">
        	<p>10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。 </p>
        </blockquote>

.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加背景。

<blockquote class="bq2">10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。<span></span></blockquote> 

.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不支持。

<blockquote class="bq3">10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。</blockquote>
 

.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里面增加两个标签，在标签里用文字的引号。

<blockquote class="bq4"><strong>“</strong>10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。<strong>”</strong></blockquote>
 

.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