W3.CSS 面板

I am a panel.

I am a panel.

I am a container.

I am a container.


Panel 面板类

w3-panel 类向任何 HTML 元素添加 16px 的顶部和底部边距以及 16px 的左右填充。

实例

<div class="w3-panel w3-red">
  <p>I am a panel.</p>
</div> 
亲自试一试 »

注释面板

w3-panel 类非常适合显示注释。

注释通常以浅色显示:

伦敦是英国人口最多的城市, 拥有超过 900 万居民的大都市区。

实例

<div class="w3-panel w3-pale-green">
  <p>伦敦是英国人口最多的城市,
  拥有超过 900 万居民的大都市区。</p>
</div>
亲自试一试 »

要了解有关 W3.CSS 注释的更多信息,请访问 W3.CSS 注释 章节。


行情面板

w3-panel 类非常适合显示报价。

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

实例

<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
</div> 
亲自试一试 »

要了解有关 W3.CSS 引用的更多信息,请访问 W3.CSS 引用 章节。


警报面板

w3-panel 类非常适合显示警报。

警报通常使用强烈的颜色显示:

危险!

红色通常表示危险或消极的情况。

实例

<div class="w3-panel w3-red">
  <h3>危险!</h3>
  <p>红色通常表示危险或消极的情况。</p>
</div>
亲自试一试 »

要了解有关 W3.CSS 警报的更多信息,请访问 W3.CSS 警报 章节。


面板作为卡片

伦敦是英国人口最多的城市, 拥有超过 900 万居民的大都市区。

实例

<div class="w3-panel w3-blue w3-card-4">
  <p>伦敦是英国人口最多的城市,
  拥有超过 900 万居民的大都市区。</p>
</div>
亲自试一试 »

圆形面板

伦敦是英国人口最多的城市, 拥有超过 900 万居民的大都市区。

实例

<div class="w3-panel w3-blue w3-round-xlarge">
  <p>伦敦是英国人口最多的城市,
  拥有超过 900 万居民的大都市区。</p>
</div>
亲自试一试 »

隐藏(关闭)面板

隐藏面板很容易。

×

单击 X 关闭此面板。

单击 X 关闭此面板。

实例

<div class="w3-panel w3-display-container">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-topright">X</span>
  <p>单击 X 关闭此面板。</p>
  <p>单击 X 关闭此面板。</p>
</div>
亲自试一试 »

显示(打开)面板

显示(隐藏的)面板很容易:

实例

<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show panel</button>

<div id="id01" class="w3-panel w3-green w3-display-container" style="display:none">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-topright">X</span>
  <p>单击 X 关闭此面板。</p>
  <p>单击 X 关闭此面板。</p>
</div>
亲自试一试 »