菜单
×
   ❮     
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-button 类和 onclick 事件的 <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">
自己试试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持