W3.CSS Quotes (引用)
显示引用
w3-panel 类可以完美的用于显示引用内容。
引用内容通常显示为灰色背景，左边框和斜体字体样式：
实例
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>“使它尽可能简单，但不要简单。”</i></p>
<p>艾尔伯特爱因斯坦</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
显著的引用
Internet 上经常使用显著的引用：
实例
<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>“使它尽可能简单，但不要简单。”</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>
尝试一下 »
点击“尝试一下”按钮查看在线实例