W3.CSS 面板
I am a panel.
I am a panel.
I am a container.
I am a container.
Panel 面板类
w3-panel 类向任何 HTML 元素添加 16px 的顶部和底部边距以及 16px 的左右填充。
注释面板
w3-panel 类非常适合显示注释。
注释通常以浅色显示:
伦敦是英国人口最多的城市， 拥有超过 900 万居民的大都市区。
要了解有关 W3.CSS 注释的更多信息，请访问 W3.CSS 注释 章节。
行情面板
w3-panel 类非常适合显示报价。
实例
<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 类非常适合显示警报。
警报通常使用强烈的颜色显示:
危险！
红色通常表示危险或消极的情况。
要了解有关 W3.CSS 警报的更多信息，请访问 W3.CSS 警报 章节。
面板作为卡片
伦敦是英国人口最多的城市， 拥有超过 900 万居民的大都市区。
圆形面板
伦敦是英国人口最多的城市， 拥有超过 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>
亲自试一试 »
