W3.CSS 面板
我是一个面板。
我是一个面板。
我是一个容器。
我是一个容器。
面板类
**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>"尽可能简单，但不要更简单。"</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'">显示面板</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>
自己试试 »
