免費(fèi)AI編程助手
W3.CSS Quotes (引用)
顯示引用
w3-panel 類可以完美的用于顯示引用內(nèi)容。
引用內(nèi)容通常顯示為灰色背景，左邊框和斜體字體樣式：
實(shí)例
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>“使它盡可能簡(jiǎn)單，但不要簡(jiǎn)單?！?lt;/i></p>
<p>艾爾伯特愛因斯坦</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
顯著的引用
Internet 上經(jīng)常使用顯著的引用：
實(shí)例
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>“使它盡可能簡(jiǎn)單，但不要簡(jiǎn)單?！?lt;/i></p>
<p>艾爾伯特愛因斯坦</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
塊引用
如果使用標(biāo)準(zhǔn) HTML <blockquote> 元素，請(qǐng)注意瀏覽器將添加一個(gè)額外的左右邊距：
實(shí)例
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>“使它盡可能簡(jiǎn)單，但不要簡(jiǎn)單?！?lt;/i></p>
<p>艾爾伯特愛因斯坦</p>
</blockquote>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
使用HTML符號(hào)
您可以使用標(biāo)準(zhǔn)的 HTML 符號(hào)代替“＆”符號(hào)：
| 符號(hào) | 碼 |
|---|---|
| ? | ＃8810 |
| ? | ＃9986 |
| ? | ＃10077 |
| ? | ＃10078 |
| ? | ＃10080 |
| ? | ＃10004 |
實(shí)例
<div class="w3-panel w3-light-grey">
<span style="font-size:150px;line-height:0.6em;opacity:0.2">?</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>"如果他在受苦，他會(huì)被認(rèn)為是在幫助他。這可..."</i></p>
<p>艾爾伯特愛因斯坦</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
實(shí)例
<div class="w3-panel w3-center w3-leftbar w3-sand">
<p><i class="w3-serif w3-xlarge">
<span style="font-size:150px;line-height:0.6em;opacity:0.2">?</span>
用 C 編程將緩慢下降。<br>
用 JavaScript 編程將更加重要。</i></p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
使用 Font Awesome 圖標(biāo)
您還可以使用 Font Awesome 庫中的圖標(biāo)：
實(shí)例
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">如果他在受苦，他會(huì)被認(rèn)為是在幫助他。這可...</i></p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
您還可以更改顏色和不透明度：
實(shí)例
<div class="w3-panel w3-sand w3-leftbar">
<p><i class="fa fa-quote-right w3-xxlarge w3-opacity"></i>
<span class="w3-serif w3-xlarge">
如果他在受苦，他會(huì)被認(rèn)為是在幫助他。這可...</span></p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
黑色引號(hào)：
實(shí)例
<div class="w3-panel w3-black">
<p class="w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
如果他在受苦，他會(huì)被認(rèn)為是在幫助他。這可...</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
將引用顯示為卡片
實(shí)例
<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
<p class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-text-red"></i><br>
如果他在受苦，他會(huì)被認(rèn)為是在幫助他。這可...</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
實(shí)例
<div class="w3-panel w3-card-4 w3-center" style="width:50%">
<span style="font-size:100px">?</span><br>
<p style="margin-top:-60px">
<i><b>如果他在受苦，他會(huì)被認(rèn)為是在幫助他。這可...</b></i></p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
更多建議：