W3.CSS Panels (面板)

<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">

  <p><i>"使它盡可能簡單，但不要簡單。"</i></p>

</div> 

<div class="w3-panel w3-red">

  <h3>危險!</h3>

  <p>紅色通常表示危險或負面情況。</p>

</div>

<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>