使用CSS可以讓我們的網站變得漂亮而可讀性強,而confirm.css是一種CSS類,它的設計旨在讓開發者創建適合于確認提示框的UI。
.confirm { margin: 50px auto; width: 200px; background-color: #fff; border: 1px solid #ccc; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: 0 2px 4px #ccc; -webkit-box-shadow: 0 2px 4px #ccc; -moz-box-shadow: 0 2px 4px #ccc; } .confirm .message { margin: 20px; font-size: 14px; } .confirm .buttons { margin: 20px 0; text-align: center; } .confirm .button-ok { display: inline-block; margin-right: 20px; padding: 6px 18px; background-color: #2ecc71; color: #fff; font-size: 12px; text-transform: uppercase; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .confirm .button-cancel { display: inline-block; margin-left: 20px; padding: 6px 18px; background-color: #e74c3c; color: #fff; font-size: 12px; text-transform: uppercase; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
上面的代碼展示了confirm.css的樣式規則。我們可以看到,confirm類包含了一個消息框和按鈕,使用了簡單而又實用的樣式設計。.message和.buttons類定義了消息和確認和取消按鈕的樣式。我們可以使用confirm類將其應用于我們的網站上確認提示框。
總而言之,confirm.css是一個功能強大的CSS庫,可以快速創建具有吸引力和易讀性的確認提示框,使用戶的使用體驗更好。
上一篇css 自適應布局實例
下一篇css 照片比例1 1