在WordPress文章編輯中有一個(gè)較為常用的按鈕“塊引用”，使用后會(huì)給選定的段落添加<blockquote>標(biāo)簽，用以調(diào)用某些引用的語(yǔ)句或者強(qiáng)調(diào)。這一次的wordpress美化教程就教大家如何美化。
- 參考來(lái)源：詳情
blockquote標(biāo)簽簡(jiǎn)述：
<blockquote> 與 </blockquote> 之間的所有文本都會(huì)從常規(guī)文本中分離出來(lái)，經(jīng)常會(huì)在左、右兩邊進(jìn)行縮進(jìn)（增加外邊距），而且有時(shí)會(huì)使用斜體。也就是說(shuō)，塊引用擁有它們自己的空間。
<blockquote> 標(biāo)簽定義塊引用。
通俗的來(lái)說(shuō)，就是HTML標(biāo)簽語(yǔ)義化的體現(xiàn)，意思是該標(biāo)簽內(nèi)的內(nèi)容是引用的（如名言警句、軟件介紹等等）而通常會(huì)有特定的前端樣式。如W3C里面介紹的那樣，經(jīng)常會(huì)在左右兩邊增加外邊距，還會(huì)用斜體。
飛鳥(niǎo)的主題之前采用的就是這種風(fēng)格的blockquote樣式，看久了有點(diǎn)審美疲勞了，于是乎重新定義了一些塊引用的樣式，如下所示。
將css代碼貼出
/* 雅兮網(wǎng)自用塊引用樣式樣式 https://www.yaxi.net */
.post blockquote {
font: 14px/20px italic Times, serif;
color: #888;
padding: 18px;
background-color: #dddddd;
border-left: 15px solid #666666;
margin: 5px;
background-image: url(img/quote_open.png);
background-position: 15px 10px;
background-repeat: no-repeat;
text-indent: 23px;
line-height: 1.8;
}
.post blockquote p {
text-indent:23px;
}
.post blockquote p:last-child{
background-image: url(img/quote_close.png);
background-repeat: no-repeat;
background-position: bottom right;
}非常容易看出，只是給blockquote標(biāo)簽增加了一個(gè)背景圖（開(kāi)頭引號(hào)），然后給最后一個(gè)p標(biāo)簽加了一個(gè)背景圖（結(jié)尾引號(hào)）；當(dāng)然也可以通過(guò)偽元素::before、::after來(lái)輸出這一對(duì)引號(hào)，可個(gè)人喜好了，此處暫且不貼。
當(dāng)然你也可以自行調(diào)整顏色以適配你的主題，兩個(gè)素材小標(biāo)地址如下，請(qǐng)自行保存至你的主題模板根目錄的img文件夾下面。
另外之前的小綠標(biāo)樣式也是個(gè)非常優(yōu)秀的樣式，可以重新定義一個(gè)類，在寫(xiě)文章的時(shí)候可以因勢(shì)調(diào)用，讓網(wǎng)站更具風(fēng)格化！
2018.11.7重新調(diào)整blockquote引用塊樣式，使其更加圓潤(rùn)，簡(jiǎn)潔。新樣式代碼如下，只修改了blockquote標(biāo)簽的樣式，其他的不變。
blockquote {
font: 16px/20px italic Times, serif;
color: #333;
padding: 18px;
background-color: #f5f5f5;
border-left: 15px solid #666666;
border-radius: 5px;
margin: 5px;
background-image: url(../img/quote_open.png);
background-position: 15px 10px;
background-repeat: no-repeat;
text-indent: 23px;
line-height: 1.8;
}
?如果你也喜歡折騰這些花里胡哨的的東西，那么還可以看看這個(gè)wordpress美化教程：
