有時候我們需要在網頁上向用戶展示一些操作完成的信息提示,比如上傳文件成功、購買商品成功等等。為了讓信息提示看起來更加美觀,我們可以運用 CSS 技術來美化它。
.success { background-color: #dff0d8; color: #3c763d; border: 1px solid #3c763d; padding: 10px; border-radius: 4px; }
上面的代碼演示了一個成功信息提示框的樣式。我們使用了背景色、文本顏色、邊框、內邊距和圓角等 CSS 屬性來美化它。
在 HTML 代碼中,我們可以將信息提示框放置在合適的位置,比如在表單上方或者操作按鈕下方:
<form> <input type="text" name="username"> <input type="password" name="password"> <button type="submit">登錄</button> </form> <div class="success">登錄成功!</div>
在用戶輸入正確的用戶名和密碼并點擊登錄按鈕后,我們可以使用 JavaScript 將信息提示框顯示出來:
const form = document.querySelector('form'); const success = document.querySelector('.success'); form.addEventListener('submit', function(event) { event.preventDefault(); // 表單驗證成功,顯示信息提示框 success.style.display = 'block'; });
通過以上步驟,我們成功地實現了一個漂亮的信息提示框,并在用戶操作成功后將它顯示出來。