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>
自己試試 »
