引用塊（Blockquote）CSS效果

2024-07-11 09:06:11

字體：大中小

供稿：網(wǎng)友

blockquote標(biāo)簽表示引用塊，這個(gè)大家都知道。Z-Blog后臺(tái)使用的 fckeditor 2.5 就有這個(gè)標(biāo)簽的按鈕，個(gè)人曾經(jīng)認(rèn)為這是個(gè)雞肋按鈕。但是只要定義兩個(gè)簡(jiǎn)單的CSS，就可以大展拳腳了。還是看效果先：

Blockquote在blog和論壇中使用的比較多，很多網(wǎng)站都可以看到。使用 <blockquote>標(biāo)簽可以在屏幕上用分離的塊顯示大段的引用。與行內(nèi)引用不同，塊引用可以包含塊級(jí)元素，諸如<p>、<table>等。多數(shù)瀏覽器通常改變引用部分的頁(yè)邊界，以和周?chē)奈谋緟^(qū)分開(kāi)。可選的cite屬性提供了引用來(lái)源的URL，這一屬性盡管未廣泛被各種瀏覽器支持，但能使用戶方便的驗(yàn)證引用的正確性。Blockquote標(biāo)簽是成對(duì)出現(xiàn)的，以<blockquote>開(kāi)始，以</blockquote>結(jié)束，常用屬性如下：
Common – 一般屬性

HTML示例代碼

<blockquote cite="http://www.survivalescaperooms.com/">
<p>引用塊（Blockquote）CSS效果.本文從最基本的CSS給你詳細(xì)說(shuō)明blockquote標(biāo)簽的使用.</p>
</blockquote>

CSS代碼

blockquote{
font: 14px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(images/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}

如果你也想在z-blog中讓blockquote變得更有型，不妨試試上面的CSS代碼