CSS樣式表是網頁制作中不可或缺的一部分,可以讓我們輕松地美化頁面樣式并實現各種效果。今天我們來學習如何用CSS應用于一個簡單的注冊表單中。
/* 注冊表單樣式 */ form { margin: 20px auto; width: 400px; background-color: #f4f4f4; padding: 20px; } /* 表單輸入框樣式 */ input[type="text"], input[type="password"] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: none; background-color: #e8eeef; } /* 按鈕樣式 */ input[type="submit"] { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; }
上面的代碼中,我們定義了一個注冊表單樣式,將其居中并設置了寬度和背景顏色。接下來,我們統一定制了輸入框的樣式,包括寬度、內邊距、外邊距、盒模型和背景顏色等。最后,我們針對提交按鈕進行了樣式定制,包括背景顏色、文字顏色、內邊距、外邊距、邊框和光標。
這樣,我們就完成了一個基本的注冊表單界面樣式的設置。當然,如果你想讓你的表單細節更加出眾,你可以繼續定制表單的樣式,比如表單標題、字體樣式等等。
下一篇css簡單的下拉列表