W3.CSS Alerts (警报)
2020-11-30 15:42 更新
在 w3-panel 类可以完美的显示所有类型的警报：
显示警告
实例
<div class="w3-panel w3-yellow">
<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，需添加带有类 w3-button 和 onclick 事件的 <span> 元素 ：
实例
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">×</span>
尝试一下 »
点击“尝试一下”按钮查看在线实例
提示： HTML ＆times; 实体是关闭按钮的首选图标（而不是字母“ X”）。
圆角化警告
如果需要圆角，请使用 w3-round 类：
卡片式警告
如果要将警报显示为卡片，请使用 w3-card 类：
以上内容是否对您有帮助：
更多建议：