Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS 警告


w3-panel 类是显示所有类型警告的完美类

×

危险!

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

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

×

危险!

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

示例

<div class="w3-panel w3-red">
  <h3>危险!</h3>
  <p>红色通常表示危险或负面情况。</p>
</div> 
动手试试 »

显示警告

×

警告!

黄色通常表示可能需要关注的警告。

×

警告!

黄色通常表示可能需要关注的警告。

示例

<div class="w3-panel w3-yellow">
  <h3>警告!</h3>
  <p>黄色通常表示可能需要关注的警告。</p>
</div> 
动手试试 »

显示成功

×

成功!

绿色通常表示成功或积极的事情。

×

成功!

绿色通常表示成功或积极的事情。

示例

<div class="w3-panel w3-green">
  <h3>成功!</h3>
  <p>绿色通常表示成功或积极的事情。</p>
</div> 
动手试试 »

显示信息

×

信息!

蓝色通常表示中性的信息性更改或操作。

×

信息!

蓝色通常表示中性的信息性更改或操作。

示例

<div class="w3-panel w3-blue">
  <h3>信息!</h3>
  <p>蓝色通常表示中性的信息性更改或操作。</p>
</div> 
动手试试 »

使用容器

w3-container 类也可以用来显示警告

示例

<div class="w3-container w3-red">
  <h3>危险!</h3>
  <p>红色通常表示危险或负面情况。</p>
</div> 
动手试试 »


所有颜色的警告

警告通常以特殊颜色显示,但可以使用任何颜色

危险!

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

危险!

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

危险!

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

危险!

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

危险!

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

示例

<div class="w3-panel w3-blue-grey">
  <h3>危险!</h3>
  <p>红色通常表示危险或负面情况。</p>
</div> 
动手试试 »

关闭警告

要关闭警告框,请点击右上角的 X

×

危险!

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

要创建关闭警告的 X,请添加一个带有类 w3-buttononclick 事件的 <span> 元素

示例

<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">&times;</span>
动手试试 »

提示: HTML &times; 实体是关闭按钮的首选图标(而不是字母“X”)。


圆角警告

如果您想要圆角,请使用 w3-round

成功!

这里使用了 w3-round。

成功!

这里使用了 w3-round-large。

成功!

这里使用了 w3-round-xxlarge。

示例

<div class="w3-panel w3-green w3-round">
动手试试 »

警告作为卡片

如果您想要将警告显示为卡片,请使用 w3-card

警告!

黄色通常表示需要关注的事情。

示例

<div class="w3-panel w3-yellow w3-card-4">
动手试试 »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.