W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
W3.CSS Panels (面板)
面板類
w3-panel 類增加了一個 16px 的頂部和底部邊緣并留下了 16px 和右填充到任何 HTML 元素。
筆記面板
w3-panel 類是完美的顯示筆記。
注釋通常以淺色顯示：
實例
<div class="w3-panel w3-pale-green">
<p>倫敦是英國人口最多的城市，擁有超過900萬居民。</p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
要了解有關(guān)W3.CSS注釋的更多信息，請訪問W3.CSS注釋章節(jié)。
引用面板
w3-panel 類非常適合顯示引用：
“使它盡可能簡單，但不要簡單?！?/i>
實例
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"使它盡可能簡單，但不要簡單。"</i></p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
要了解有關(guān) W3.CSS引用的更多信息，請訪問 W3.CSS引用 章節(jié)。
警報面板
w3-panel 類非常適合顯示警報。
警報通常以深色顯示：
紅色通常表示危險或負面情況。
要了解有關(guān)W3.CSS警報的更多信息，請訪問W3.CSS警報章節(jié)。
卡片式面板
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
隱藏（關(guān)閉）面板
隱藏面板很容易。
實例
<div class="w3-panel w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<p>單擊 X 關(guān)閉此面板。</p>
<p>單擊 X 關(guān)閉此面板。</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 關(guān)閉此面板。</p>
<p>單擊 X 關(guān)閉此面板。</p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
- 內(nèi)容錯誤
- 更新不及時
- 鏈接錯誤
- 缺少代碼/圖片示列
- 太簡單/步驟待完善
- 其他
推薦文章
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話：173-0602-2364|舉報郵箱：jubao@eeedong.com
更多建議：