W3.CSS Panels (面板)

2020-11-30 10:41 更新


我是一个面板

 

我是一个面板

 

    我是一个容器
    我是一个容器

面板类

w3-panel 类增加了一个 16px 的顶部和底部边缘并留下了 16px 和右填充到任何 HTML 元素。

实例

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

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

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

笔记面板

w3-panel 类是完美的显示笔记。

注释通常以浅色显示:

        伦敦是英国人口最多的城市,拥有超过900万居民。

实例

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

    <p>伦敦是英国人口最多的城市,拥有超过900万居民。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

要了解有关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 类非常适合显示警报。

警报通常以深色显示:

   危险 !
     红色通常表示危险或负面情况。

实例

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

  <h3>危险!</h3>

  <p>红色通常表示危险或负面情况。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

要了解有关W3.CSS警报的更多信息,请访问W3.CSS警报章节。


卡片式面板

        伦敦是英国人口最多的城市,拥有超过900万居民。

实例

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

  <p>伦敦是英国人口最多的城市,拥有超过900万居民。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

圆角面板

        伦敦是英国人口最多的城市,拥有超过900万居民。

实例

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


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号