W3.CSS 行情

❝

Lorem ipsum dolor sat amet，consectetur adipiscing elit。 Ut non Massa vitae risus fusionum ullamcorper。 Phasellus risus urna，ornare in aliquam id，porttitor 坐 amet sapien。 Nulla facilisi。

显示报价

这个w3面板class 是显示引号的完美类。

引号通常以灰色背景、左边框栏和斜体字体样式显示：

"Make it as simple as possible, but not simpler."

艾尔伯特爱因斯坦

示例

<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>

亲自试一试»

大行情

网上经常使用大引用：

"Make it as simple as possible, but not simpler."

艾尔伯特爱因斯坦

示例

<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."

艾尔伯特爱因斯坦

示例

<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 符号代替 & 符号：

象征	代码
≪	#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>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
<p>Albert Einstein</p>
</div>

亲自试一试»

✔C 语言编程将会慢慢衰落。
用 JavaScript 编程将变得更加重要。

示例

<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>

亲自试一试»

黑色引用：

示例

<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>

亲自试一试»

将报价显示为卡片

示例

<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>

亲自试一试»

❝

示例

<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>

亲自试一试»