W3CSS 教程

W3.CSS Panels 面板

我是一个面板。

我是一个面板。

我是一个容器。

我是一个容器。

面板类

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

例子 (Example)

<div class="w3-panel w3-red">
  <p>I am a panel.</p>
</div>
       自己试试 »

笔记面板

在W3面板类是完美的显示笔记。

笔记通常以浅色显示：

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

例子 (Example)

<div class="w3-panel w3-pale-green">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>
       自己试试 »

要了解有关 W3.CSS 注释的更多信息，请访问W3.CSS 注释章节。

报价面板

在W3面板类是完美的显示引号。

“让它尽可能简单，但不要更简单。”

例子 (Example)

<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
       自己试试 »

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

警报面板

在W3面板类是完美的显示警报。

警报通常使用强烈的颜色显示：

危险！

红色通常表示危险或消极的情况。

例子 (Example)

<div class="w3-panel w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div>
       自己试试 »

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

面板作为卡片

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

例子 (Example)

<div class="w3-panel w3-blue w3-card-4">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>
       自己试试 »

圆形面板

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

例子 (Example)

<div class="w3-panel w3-blue w3-round-xlarge">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>
       自己试试 »

隐藏（关闭）面板

隐藏面板很容易。

×

单击 X 关闭此面板。

单击 X 关闭此面板。

例子 (Example)

<div class="w3-panel w3-display-container">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-topright">X</span>
  <p>Click on the X to close this panel.</p>
  <p>Click on the X to close this panel.</p>
</div>
       自己试试 »

显示（打开）面板

显示（隐藏的）面板很容易：

×

单击 X 关闭此面板。

单击 X 关闭此面板。

例子 (Example)

<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show panel</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>Click on the X to close this panel.</p>
  <p>Click on the X to close this panel.</p>
</div>
        自己试试 »


上一主题 W3.CSS Containers 容器 下一主题 没有了
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具