網頁

▼

2019/8/16

CSS 練習 Type Selectors, Class selectors, ID Selectors

請建立一份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;
}

沒有留言:

張貼留言