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>

亲自试一试 »