當今,樣式表表單已成為網頁設計中不可或缺的一部分。使用CSS樣式表,我們可以讓表單元素更加美觀、易讀、易用。下面是一個簡單的CSS樣式表單代碼:
form { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 20px; } label { display: inline-block; margin-bottom: 10px; } input[type=text], input[type=email] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 20px; } input[type=submit] { background-color: #007bff; color: #fff; border-radius: 5px; padding: 10px 20px; font-size: 16px; }
這個表單樣式包括以下幾個部分:
- 整個表單使用了一個背景顏色為白色的背景,邊框為1像素的灰色顏色,圓角為5像素。
- 每個表單元素的標簽(label)使用了 inline-block 屬性,使標簽水平排列,然后設置了一個下邊距。
- 文本輸入框和電子郵件(email)輸入框的寬度均為100%,具有相同的內外邊距和邊框風格,且下邊距大于文本標簽的下邊距。
- 提交(submit)按鈕使用了藍色背景色、白色字體色、圓角5像素、較大的內外邊距、16像素的字體大小。
借助這個簡單的CSS樣式表單,我們可以創建一個漂亮而且易于使用的表單。
上一篇css樣式表圖片大全
下一篇css樣式表層疊優先級