平時(shí)我們?cè)谥谱黜撁娴臅r(shí)候，總是會(huì)碰到這樣那樣的引用，比如引用某人的一句話，或者引用一些名言警句，我們可以用一些引號(hào)將其特殊區(qū)分開來?，F(xiàn)對(duì)平時(shí)遇到的一些引用的相關(guān)例子進(jìn)行一些分析：

例子1：

例子2：QQ空間的一些好友說的話

下面提供四種類似的解決方法：

第一種實(shí)現(xiàn)方法：

用blockquote來做左邊引號(hào)的背景，用p來做右邊的背景

HTML代碼：
?
<blockquote?class="bq1">?
????????????<p>10M的網(wǎng)卡中只有四根彈片，8根線中另四根不起作用所以要求低，兩邊是同一順序就行，但最好按規(guī)范做；100M的網(wǎng)卡中有8根彈片，四根用于數(shù)據(jù)傳輸，另四根用于防串?dāng)_，嚴(yán)格按照規(guī)范做線能減少網(wǎng)絡(luò)故障。?</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;?
}?

第二種實(shí)現(xiàn)方法：

用blockquote來做左邊引號(hào)的背景，用一個(gè)空標(biāo)簽，比如span來做右邊引號(hào)的背景，將span設(shè)置為left或者right的padding，然后給span加背景。

HTML代碼：
?
<blockquote?class="bq2">10M的網(wǎng)卡中只有四根彈片，8根線中另四根不起作用所以要求低，兩邊是同一順序就行，但最好按規(guī)范做；100M的網(wǎng)卡中有8根彈片，四根用于數(shù)據(jù)傳輸，另四根用于防串?dāng)_，嚴(yán)格按照規(guī)范做線能減少網(wǎng)絡(luò)故障。<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;?
}?
?
?

第三種實(shí)現(xiàn)方法：

用blockquote的after和before偽類來做兩個(gè)前后的引號(hào)。不過ie6不支持。

HTML代碼：
?
<blockquote?class="bq3">10M的網(wǎng)卡中只有四根彈片，8根線中另四根不起作用所以要求低，兩邊是同一順序就行，但最好按規(guī)范做；100M的網(wǎng)卡中有8根彈片，四根用于數(shù)據(jù)傳輸，另四根用于防串?dāng)_，嚴(yán)格按照規(guī)范做線能減少網(wǎng)絡(luò)故障。</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;?/*修復(fù)位置*/?
????line-height:20px;?
????content:"“";?
????color:#000;?
}?
.box?.bq3:after?{?
????content:"”";?
}?
?
?

第四種實(shí)現(xiàn)方法：

在blockquote里面增加兩個(gè)標(biāo)簽，在標(biāo)簽里用文字的引號(hào)。

HTML代碼：
?
<blockquote?class="bq4"><strong>“</strong>10M的網(wǎng)卡中只有四根彈片，8根線中另四根不起作用所以要求低，兩邊是同一順序就行，但最好按規(guī)范做；100M的網(wǎng)卡中有8根彈片，四根用于數(shù)據(jù)傳輸，另四根用于防串?dāng)_，嚴(yán)格按照規(guī)范做線能減少網(wǎng)絡(luò)故障。<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;?
}?
?
?

以上四種方法，只是個(gè)人總結(jié)，如果你有更好的建議或方法，可以留言共同探討

查看demo：http://www.xunzou.com/demo/blockquote/blockquote.html

總結(jié)

以上是生活随笔為你收集整理的blockquote 引用的分析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。