選單
×
   ❮     
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 提供支援