W3.CSS Panels (面板)
面板类
w3-panel 类增加了一个 16px 的顶部和底部边缘并留下了 16px 和右填充到任何 HTML 元素。
笔记面板
w3-panel 类是完美的显示笔记。
注释通常以浅色显示：
实例
<div class="w3-panel w3-pale-green">
<p>伦敦是英国人口最多的城市，拥有超过900万居民。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
要了解有关W3.CSS注释的更多信息，请访问W3.CSS注释章节。
引用面板
w3-panel 类非常适合显示引用：
“使它尽可能简单，但不要简单。”
实例
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"使它尽可能简单，但不要简单。"</i></p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
要了解有关 W3.CSS引用的更多信息，请访问 W3.CSS引用 章节。
警报面板
w3-panel 类非常适合显示警报。
警报通常以深色显示：
红色通常表示危险或负面情况。
要了解有关W3.CSS警报的更多信息，请访问W3.CSS警报章节。
卡片式面板
实例
<div class="w3-panel w3-blue w3-card-4">
<p>伦敦是英国人口最多的城市，拥有超过900万居民。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
圆角面板
实例
<div class="w3-panel w3-blue w3-round-xlarge">
<p>伦敦是英国人口最多的城市，拥有超过900万居民。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
隐藏（关闭）面板
隐藏面板很容易。
实例
<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'">显示面板</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>
尝试一下 »
点击“尝试一下”按钮查看在线实例