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 类是显示引号的完美类。

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

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

Albert Einstein

实例

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

Albert Einstein

实例

<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">&#10077;</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>

亲自试一试 »

Programming in C will slowly decline.
Programming in JavaScript will be more important.

实例

<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">&#10004;</span>
  Programming in C will slowly decline.<br>
  Programming in JavaScript will be more important.</i></p>
</div>

亲自试一试 »


使用 Font Awesome 图标

您还可以使用 Font Awesome 库中的图标:


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

亲自试一试 »

您还可以更改颜色和不透明度:


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-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">&#10077;</span><br>
  <p style="margin-top:-60px">
  <i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>

亲自试一试 »