對話框是Web應用程序中常見的用戶界面元素之一,用于顯示用戶與程序之間的交互信息。為了使對話框能夠具備良好的可讀性和可維護性,CSS提供了一種規定定義對話框的方式。
CSS規定定義對話框共包括以下部分:
/* 定義對話框容器 */ .dialog-box { width: 80%; max-width: 600px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 5px; } /* 定義對話框標題 */ .dialog-box .title { padding: 10px; font-size: 20px; text-align: center; border-bottom: 1px solid #ccc; } /* 定義對話框內容 */ .dialog-box .content { padding: 20px; font-size: 16px; } /* 定義對話框底部按鈕 */ .dialog-box .footer { padding: 10px; text-align: right; } /* 定義按鈕樣式 */ .dialog-box .footer button { margin-left: 10px; padding: 6px 12px; font-size: 16px; border-radius: 3px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } /* 定義取消按鈕樣式 */ .dialog-box .footer .cancel { background-color: #ccc; color: #fff; }
在以上代碼中,.dialog-box定義了對話框的外觀,并設置了它的最大寬度、居中對齊、背景顏色、陰影和圓角邊框等屬性。.title定義了對話框標題的樣式,包括了字體大小、文本對齊和下邊框。.content定義了對話框內容的樣式,包括了內邊距和字體大小。.footer定義了對話框底部按鈕的樣式,包括了內邊距、文本對齊和右對齊。.cancel定義了取消按鈕的樣式,使它有不同于其它按鈕的背景顏色。
下一篇css控制元素文本顏色