W3.CSS Quotes (引用)

2020-11-30 15:07 更新

显示引用

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>


尝试一下 »
点击“尝试一下”按钮查看在线实例





以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号