免費AI編程助手
W3.CSS Quotes (引用)
顯示引用
w3-panel 類可以完美的用于顯示引用內容。
引用內容通常顯示為灰色背景，左邊框和斜體字體樣式：
實例
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>“使它盡可能簡單，但不要簡單?！?lt;/i></p>
<p>艾爾伯特愛因斯坦</p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
顯著的引用
Internet 上經(jīng)常使用顯著的引用：
實例
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>“使它盡可能簡單，但不要簡單。”</i></p>
<p>艾爾伯特愛因斯坦</p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
塊引用
如果使用標準 HTML <blockquote> 元素，請注意瀏覽器將添加一個額外的左右邊距：
實例
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>“使它盡可能簡單，但不要簡單?！?lt;/i></p>
<p>艾爾伯特愛因斯坦</p>
</blockquote>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
使用HTML符號
您可以使用標準的 HTML 符號代替“＆”符號：
| 符號 | 碼 |
|---|---|
| ? | ＃8810 |
| ? | ＃9986 |
| ? | ＃10077 |
| ? | ＃10078 |
| ? | ＃10080 |
| ? | ＃10004 |
實例
<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>"如果他在受苦，他會被認為是在幫助他。這可..."</i></p>
<p>艾爾伯特愛因斯坦</p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
使用 Font Awesome 圖標
您還可以使用 Font Awesome 庫中的圖標：
實例
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">如果他在受苦，他會被認為是在幫助他。這可...</i></p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
您還可以更改顏色和不透明度：
實例
<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">
如果他在受苦，他會被認為是在幫助他。這可...</span></p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
黑色引號：
實例
<div class="w3-panel w3-black">
<p class="w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
如果他在受苦，他會被認為是在幫助他。這可...</p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
將引用顯示為卡片
實例
<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>
如果他在受苦，他會被認為是在幫助他。這可...</p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
實例
<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>如果他在受苦，他會被認為是在幫助他。這可...</b></i></p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
更多建議：