平時我們在制作頁面的時候，總是會碰到這樣那樣的引用，比如引用某人的一句話，或者引用一些名言警句，我們可以用一些引號將其特殊區分開來。現對平時遇到的一些引用的相關例子進行一些分析：

例子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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。