CSS提示框是一種非常有用的UI組件，它可以用來顯示信息，警告或錯誤消息。在本教程中，我們將使用CSS和HTML創建簡單但有效的提示框。
首先，在HTML文檔中創建一個容器元素，我們將使用div元素并為其添加一個類名。例如：

<div class="alert">
<p>這是一個提示框。</p>
</div>

接下來，我們可以為該類創建CSS樣式。我們可以使用position屬性將其定位到屏幕頂部或底部，并添加一個背景顏色和一些內邊距。例如：

.alert {
position: fixed;
bottom: 0;
background-color: #f44336;
color: white;
padding: 10px;
}

現在我們已經有了一個具有樣式的提示框，但我們需要一個關閉按鈕來清除提示框。
我們可以使用::after選擇器和CSS偽元素來添加關閉按鈕。例如：

.alert::after {
content: "x";
color: white;
padding-left: 10px;
cursor: pointer;
}
.alert:hover::after {
color: black;
}

現在引入了一個類的帶有關閉按鈕的提示框，但我們可能想要顯示更多不同類型的提示框。我們可以使用不同的類名和不同的背景顏色來為提示框添加風格。
例如：

.alert-warning {
background-color: #ff9800;
}
.alert-success {
background-color: #4caf50;
}
.alert-info {
background-color: #03a9f4;
}
.alert-danger {
background-color: #f44336;
}

現在，我們可以使用不同的類名來創建具有不同外觀的提示框。例如：

<div class="alert-success">
<p>操作成功!</p>
</div>
<div class="alert-warning">
<p>請填寫必要字段。</p>
</div>
<div class="alert-danger">
<p>不能刪除該項目。</p>
</div>

現在您已經學會如何創建具有漂亮外觀且實用的CSS提示框。開始添加提示框來增強您的網站用戶體驗吧！