W3.CSS 引文
Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Ut non massa vitae risus fermentum ullamcorper。 Phasellus risus urna，在 aliquam id 中被装饰，porttitor sit amet sapien。 Nulla facilisi。
显示引文
这 w3-面板 class 是显示引号的完美类。
引文通常以灰色背景、左边框条和斜体字体显示：
例子
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
</p>
<p>艾尔伯特爱因斯坦</p>
</div>
大行情
网络上经常使用大引语：
例子
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
</p>
<p>艾尔伯特爱因斯坦</p>
</div>
引用
如果你使用标准 HTML<blockquote> 元素，请注意浏览器将添加额外的左边距和右边距：
“尽量使其简单，但不要过于简单。”
艾尔伯特爱因斯坦
例子
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
</p>
<p>艾尔伯特爱因斯坦</p>
</blockquote>
使用 HTML 符号
您可以使用标准 HTML 符号代替“&”符号：
| 象征 | 代码 |
|---|---|
| ≪ | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Ut non massa vitae risus fermentum ullamcorper。 Phasellus risus urna，在 aliquam id 中被装饰，porttitor sit amet sapien。 Nulla facilisi。
Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Ut non massa vitae risus fermentum ullamcorper。 Phasellus risus urna，在 aliquam id 中被装饰，porttitor sit amet sapien。 Nulla facilisi。
例子
<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">
</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 进行编程将会变得更加重要。</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">Lorem ipsum dolor sit amet，consectetur adipiscing elit。</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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>
黑色引文：
Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Ut non massa vitae risus fermentum ullamcorper。 Phasellus risus urna，在 aliquam id 中被装饰，porttitor sit amet sapien。 Nulla facilisi。
例子
<div class="w3-panel w3-black">
<p class="w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>
将引文显示为卡片
Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Ut non massa vitae risus fermentum ullamcorper。 Phasellus risus urna，在 aliquam id 中被装饰，porttitor sit amet sapien。 Nulla facilisi。
例子
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>
Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Ut non massa vitae risus fermentum ullamcorper。 Phasellus risus urna，在 aliquam id 中被装饰，porttitor sit amet sapien。 Nulla facilisi。
例子
<div class="w3-panel w3-card-4 w3-center" style="width:50%">
<span style="font-size:100px">❝</span><br>
<p style="margin-top:-60px">
</p>
</div>
