W3.CSS 引用
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
显示引号
w3-panel 类是显示引号的完美类。
引号通常以灰色背景、左边框条和斜体字体样式显示:
实例
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
大引号
互联网上经常使用大引号:
实例
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
块引用
如果您使用标准的 HTML <blockquote> 元素，请注意浏览器会添加额外的左右边距:
"Make it as simple as possible, but not simpler."
Albert Einstein
实例
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>
使用 HTML 符号
您可以使用标准的 HTML 符号代替 & 符号:
| Symbol | 代码 |
|---|---|
| ≪ | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in 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, ornare in 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">
<i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
<p>Albert
Einstein</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>
Programming in C will slowly decline.<br>
Programming in JavaScript
will be more important.</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">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 ...</span></p>
</div>
黑色的引用:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in 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, ornare in 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, ornare in 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">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>
