請建立一份HTML文件,檔名為account.html
。請用VS Code編輯。
請在文件中建立如下的帳戶資料表填寫表格。在外部樣式表中加入適當的CSS設定來套用樣式。
現有的CSS external style sheet如下。
style.css
table {
border-collapse: collapse;
width: 600px;
}
table, th, td {
border: solid 1px;
}
th, td {
padding: 5px;
}
規格說明
帳號請用文字輸入欄位,最多限制輸入10個字。
密碼請用密碼輸入欄位,最多限制輸入10個字。
生日請用日期輸入欄位。
郵遞區號用文字輸入欄位,最多限制輸入5個字。
縣市用文字輸入欄位。
地址用文字輸入欄位,欄位長度60,最多限制輸入100個字。
備註用文字輸入欄位,欄位長度60,最多限制輸入100個字。
最後一列分別為提交按鈕(submit)與重設按鈕(reset)。
標題列淡藍色底色的色號為#bbddff
。
輸入欄位名稱灰色底色的色號為#cccccc
。
輸入欄位的黃色底色色號為#ffffaa
。
備註欄位名稱的淡紅色底色色號為#ffaaaa;
。
提示:
HTML <input> 輸入元素 Input element 簡介
HTML <input> maxlength屬性
CSS Type selector 元素選擇器
CSS Class selectors 類選擇器
CSS ID selectors ID選擇器
HTML 使用colspan屬性合併表格欄位
acccount.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<thead>
<tr>
<th colspan="4">帳戶資料</th>
</tr>
</thead>
<tbody>
<tr>
<td class="caption"><label>帳號</label></td>
<td><input type="text" maxlength="10"></td>
<td class="caption"><label>密碼</label></td>
<td><input type="password" maxlength="10"></td>
</tr>
<tr>
<td class="caption"><label>生日</label></td>
<td><input type="date"></td>
<td class="caption"><label>性別</label></td>
<td>
<select>
<option value="1">男</option>
<option value="2">女</option>
</select>
</td>
</tr>
<tr>
<th colspan="4">戶籍資料</th>
</tr>
<tr>
<td class="caption"><label>郵遞區號</label></td>
<td><input type="text" maxlength="5"></td>
<td class="caption"><label>縣市</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td class="caption"><label>地址</label></td>
<td colspan="3"><input type="text" size="60"></td>
</tr>
<tr>
<td id="remark"><label>備註</label></td>
<td colspan="3"><input type="text" size="60" maxlength="100"></td>
</tr>
<tr>
<td colspan="4"><input type="submit"> <input type="reset"></td>
</tr>
</tbody>
</table>
</body>
</html>
style.css
table {
border-collapse: collapse;
width: 600px;
}
table, th, td {
border: solid 1px;
}
th, td {
padding: 5px;
}
th {
background-color:#bbddff;
}
td {
background-color: #ffffaa;
}
.caption {
background-color:#cccccc;
}
#remark {
background-color:#ffaaaa;
}
沒有留言:
張貼留言