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 万居民。
示例
<div class="w3-panel w3-blue w3-card-4">
<p>伦敦是英国人口最多的城市，</p>
大都市区人口超过 900 万。（维基百科）</p>
</div>
自己试试 »
圆角面板
伦敦是英国人口最多的城市，都会区超过 900 万居民。
示例
<div class="w3-panel w3-blue w3-round-xlarge">
<p>伦敦是英国人口最多的城市，</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>
自己试试 »
