CSS 第九章上機1任務要求我們創建一個樸素的表單。在表單中,我們需要創建一個輸入框,一個多選框以及一個提交按鈕。
<form> <label for="text">文本:</label> <input type="text" id="text" name="text"> <br><br> <label for="checkbox">多選框:</label> <input type="checkbox" id="checkbox" name="checkbox" value="1"><br> <label for="checkbox">選項1</label><br> <input type="checkbox" id="checkbox" name="checkbox" value="2"><br> <label for="checkbox">選項2</label><br> <br> <input type="submit" value="提交"> </form>
在這段代碼中,我們使用了 <form> 元素來創建一個表單,并為 <input> 元素設置了類型和名稱屬性。 <label> 元素用于將文本與輸入框和多選框相關聯。 最后,我們使用 <submit> 輸入類型創建一個提交按鈕。
現在,我們已經創建了一個基本的表單,但還需要一些 CSS 來美化它。 我們可以添加一些樣式來改變輸入框和多選框的顏色、大小和邊框樣式。
input[type="text"] { border: 2px solid #ccc; border-radius: 4px; padding: 8px; font-size: 16px; } input[type="checkbox"] { width: 20px; height: 20px; margin-right: 5px; } input[type="submit"] { background-color: #4CAF50; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } input[type="submit"]:hover { background-color: #3e8e41; }
以上 CSS 代碼將輸入框設置為帶有邊框和圓角的矩形,并為多選框設置寬度和高度。 提交按鈕被設置為圓角矩形,并帶有背景顏色、文本顏色和指針光標。 鼠標懸停時,背景顏色會稍稍變暗。
這樣,我們的表單就變得更加美觀和易于使用了!