W3.CSS Panels (面板)

2020-11-30 10:41 更新


我是一個(gè)面板

 

我是一個(gè)面板

 

    我是一個(gè)容器
    我是一個(gè)容器

面板類

w3-panel 類增加了一個(gè) 16px 的頂部和底部邊緣并留下了 16px 和右填充到任何 HTML 元素。

實(shí)例

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

    <p>我是面板。</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

筆記面板

w3-panel 類是完美的顯示筆記。

注釋通常以淺色顯示：

        倫敦是英國(guó)人口最多的城市，擁有超過900萬(wàn)居民。

實(shí)例

<div class="w3-panel w3-pale-green">

    <p>倫敦是英國(guó)人口最多的城市，擁有超過900萬(wàn)居民。</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

要了解有關(guān)W3.CSS注釋的更多信息，請(qǐng)?jiān)L問W3.CSS注釋章節(jié)。

引用面板

w3-panel 類非常適合顯示引用：

“使它盡可能簡(jiǎn)單，但不要簡(jiǎn)單?！?/i>

實(shí)例

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

  <p><i>"使它盡可能簡(jiǎn)單，但不要簡(jiǎn)單。"</i></p>

</div> 


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

要了解有關(guān) W3.CSS引用的更多信息，請(qǐng)?jiān)L問 W3.CSS引用 章節(jié)。

警報(bào)面板

w3-panel 類非常適合顯示警報(bào)。

警報(bào)通常以深色顯示：

   危險(xiǎn) !
     紅色通常表示危險(xiǎn)或負(fù)面情況。

實(shí)例

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

  <h3>危險(xiǎn)!</h3>

  <p>紅色通常表示危險(xiǎn)或負(fù)面情況。</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

要了解有關(guān)W3.CSS警報(bào)的更多信息，請(qǐng)?jiān)L問W3.CSS警報(bào)章節(jié)。

卡片式面板

        倫敦是英國(guó)人口最多的城市，擁有超過900萬(wàn)居民。

實(shí)例

<div class="w3-panel w3-blue w3-card-4">

  <p>倫敦是英國(guó)人口最多的城市，擁有超過900萬(wàn)居民。</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

圓角面板

        倫敦是英國(guó)人口最多的城市，擁有超過900萬(wàn)居民。

實(shí)例

<div class="w3-panel w3-blue w3-round-xlarge">

  <p>倫敦是英國(guó)人口最多的城市，擁有超過900萬(wàn)居民。</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

隱藏（關(guān)閉）面板

隱藏面板很容易。

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

顯示（打開）面板

顯示（隱藏）面板很容易：

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)